json schema

app/[locale]/contact/page.tsx

@@ -1,6 +1,7 @@
 import { useTranslations } from 'next-intl';
 import { getTranslations } from 'next-intl/server';
 import { Metadata } from 'next';
+import JsonLd from '@/components/JsonLd';
 import { Section, Container, Button, Heading, Card, Input, Textarea, Label } from '@/components/ui';
 
 interface ContactPageProps {
@@ -37,9 +38,25 @@ export async function generateMetadata({ params: { locale } }: ContactPageProps)
 
 export default function ContactPage() {
   const t = useTranslations('Contact');
+  const locale = t('locale') || 'en'; // Fallback if needed, but usually passed via params
 
   return (
     <div className="flex flex-col min-h-screen bg-neutral-light">
+      <JsonLd
+        id="breadcrumb-contact"
+        data={{
+          '@context': 'https://schema.org',
+          '@type': 'BreadcrumbList',
+          itemListElement: [
+            {
+              '@type': 'ListItem',
+              position: 1,
+              name: t('title'),
+              item: `https://klz-cables.com/${locale}/contact`,
+            },
+          ],
+        }}
+      />
       {/* Hero Section */}
       <section className="bg-primary-dark text-white py-20 md:py-32 relative overflow-hidden">
         <div className="absolute inset-0 opacity-20">