klz-cables.com/app/[locale]/contact/page.tsx

import ContactForm from '@/components/ContactForm';
import JsonLd from '@/components/JsonLd';
import Reveal from '@/components/Reveal';
import { Container, Heading, Section } from '@/components/ui';
import { Metadata } from 'next';
import { getTranslations, setRequestLocale } from 'next-intl/server';
import { SITE_URL } from '@/lib/schema';
import { getOGImageMetadata } from '@/lib/metadata';
import { Suspense } from 'react';
import ContactMap from '@/components/ContactMap';

interface ContactPageProps {
  params: Promise<{
    locale: string;
  }>;
}

export async function generateMetadata({ params }: ContactPageProps): Promise<Metadata> {
  const { locale } = await params;
  const t = await getTranslations({ locale, namespace: 'Contact' });
  const title = t('meta.title') || t('title');
  const description = t('meta.description') || t('subtitle');
  return {
    title,
    description,
    alternates: {
      canonical: `${SITE_URL}/${locale}/contact`,
      languages: {
        'de-DE': '/de/contact',
        'en-US': '/en/contact',
      },
    },
    openGraph: {
      title: `${title} | KLZ Cables`,
      description,
      url: `${SITE_URL}/${locale}/contact`,
      siteName: 'KLZ Cables',
      images: getOGImageMetadata('contact', title, locale),
      locale: `${locale.toUpperCase()}_DE`,
      type: 'website',
    },
    twitter: {
      card: 'summary_large_image',
      title: `${title} | KLZ Cables`,
      description,
      images: [`${SITE_URL}/${locale}/contact/opengraph-image`],
    },
    robots: {
      index: true,
      follow: true,
    },
  };
}

export async function generateStaticParams() {
  return [{ locale: 'de' }, { locale: 'en' }];
}

export default async function ContactPage({ params }: ContactPageProps) {
  const { locale } = await params;
  setRequestLocale(locale);
  const t = await getTranslations({ locale, namespace: 'Contact' });
  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: `${SITE_URL}/${locale}/contact`,
            },
          ],
        }}
      />
      <JsonLd
        id="local-business-contact"
        data={{
          '@context': 'https://schema.org',
          '@type': 'LocalBusiness',
          name: 'KLZ Cables',
          image: `${SITE_URL}/logo.png`,
          '@id': SITE_URL,
          url: SITE_URL,
          address: {
            '@type': 'PostalAddress',
            streetAddress: 'Raiffeisenstraße 22',
            addressLocality: 'Remshalden',
            postalCode: '73630',
            addressCountry: 'DE',
          },
          geo: {
            '@type': 'GeoCoordinates',
            latitude: 48.8144,
            longitude: 9.4144,
          },
          openingHoursSpecification: [
            {
              '@type': 'OpeningHoursSpecification',
              dayOfWeek: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
              opens: '08:00',
              closes: '17:00',
            },
          ],
          sameAs: ['https://www.linkedin.com/company/klz-cables'],
        }}
      />
      {/* Hero Section */}
      <Reveal>
        <section className="bg-primary-dark text-white py-20 md:py-32 relative overflow-hidden">
          <div className="absolute inset-0 opacity-20">
            <div className="absolute top-0 left-0 w-full h-full bg-[radial-gradient(circle_at_center,_var(--tw-gradient-stops))] from-accent via-transparent to-transparent" />
          </div>
          <Container className="relative z-10">
            <div className="max-w-4xl">
              <Heading level={1} subtitle={t('heroSubtitle')} className="text-white mb-4 md:mb-6">
                <span className="text-white">{t('title')}</span>
              </Heading>
              <p className="text-lg md:text-xl text-white/70 leading-relaxed max-w-2xl">
                {t('subtitle')}
              </p>
            </div>
          </Container>
        </section>
      </Reveal>

      <Section className="bg-neutral-light -mt-8 md:-mt-20 relative z-20 py-12 md:py-28">
        <Container>
          <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 md:gap-16">
            {/* Contact Info */}
            <div className="lg:col-span-5 space-y-6 md:space-y-12">
              <div className="animate-fade-in">
                <Heading level={3} subtitle={t('info.subtitle')} className="mb-6 md:mb-8">
                  {t('info.howToReachUs')}
                </Heading>
                <div className="space-y-4 md:space-y-8">
                  <div className="flex items-start gap-4 md:gap-6 group">
                    <div className="w-10 h-10 md:w-14 md:h-14 rounded-xl md:rounded-2xl bg-saturated/10 flex items-center justify-center text-saturated group-hover:bg-accent group-hover:text-primary-dark transition-all duration-300 shadow-sm flex-shrink-0">
                      <svg
                        className="w-5 h-5 md:w-7 md:h-7"
                        fill="none"
                        viewBox="0 0 24 24"
                        stroke="currentColor"
                      >
                        <path
                          strokeLinecap="round"
                          strokeLinejoin="round"
                          strokeWidth={2}
                          d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"
                        />
                        <path
                          strokeLinecap="round"
                          strokeLinejoin="round"
                          strokeWidth={2}
                          d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"
                        />
                      </svg>
                    </div>
                    <div>
                      <h4 className="text-base md:text-xl font-bold text-primary mb-1 md:mb-2">
                        {t('info.office')}
                      </h4>
                      <p className="text-sm md:text-lg text-text-secondary leading-relaxed whitespace-pre-line">
                        {t('info.address')}
                      </p>
                    </div>
                  </div>

                  <div className="flex items-start gap-4 md:gap-6 group">
                    <div className="w-10 h-10 md:w-14 md:h-14 rounded-xl md:rounded-2xl bg-saturated/10 flex items-center justify-center text-saturated group-hover:bg-accent group-hover:text-primary-dark transition-all duration-300 shadow-sm flex-shrink-0">
                      <svg
                        className="w-5 h-5 md:w-7 md:h-7"
                        fill="none"
                        viewBox="0 0 24 24"
                        stroke="currentColor"
                      >
                        <path
                          strokeLinecap="round"
                          strokeLinejoin="round"
                          strokeWidth={2}
                          d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
                        />
                      </svg>
                    </div>
                    <div>
                      <h4 className="text-base md:text-xl font-bold text-primary mb-1 md:mb-2">
                        {t('info.email')}
                      </h4>
                      <a
                        href="mailto:info@klz-cables.com"
                        className="text-sm md:text-lg text-text-secondary hover:text-primary transition-colors font-medium touch-target"
                      >
                        info@klz-cables.com
                      </a>
                    </div>
                  </div>
                </div>
              </div>

              <div className="p-6 md:p-10 bg-white rounded-2xl md:rounded-3xl border border-neutral-medium shadow-sm animate-fade-in">
                <Heading level={4} className="mb-4 md:mb-6">
                  {t('hours.title')}
                </Heading>
                <ul className="space-y-2 md:space-y-4 list-none m-0 p-0">
                  <li className="flex justify-between items-center pb-2 md:pb-4 border-b border-neutral-medium text-sm md:text-base">
                    <span className="font-bold text-primary">{t('hours.weekdays')}</span>
                    <span className="text-text-secondary">{t('hours.weekdaysTime')}</span>
                  </li>
                  <li className="flex justify-between items-center text-sm md:text-base">
                    <span className="font-bold text-primary">{t('hours.weekend')}</span>
                    <span className="text-accent-dark font-bold">{t('hours.closed')}</span>
                  </li>
                </ul>
              </div>
            </div>

            {/* Contact Form */}
            <div className="lg:col-span-7">
              <Suspense
                fallback={
                  <div className="animate-pulse bg-neutral-medium h-96 rounded-2xl md:rounded-3xl"></div>
                }
              >
                <ContactForm />
              </Suspense>
            </div>
          </div>
        </Container>
      </Section>

      {/* Map Section */}
      <section className="h-[300px] md:h-[500px] bg-neutral-medium relative overflow-hidden grayscale hover:grayscale-0 transition-all duration-1000">
        <Suspense
          fallback={
            <div className="h-full w-full bg-neutral-medium animate-pulse flex items-center justify-center">
              <div className="text-primary font-medium">Loading Map...</div>
            </div>
          }
        >
          <ContactMap address={t('info.address')} lat={48.8144} lng={9.4144} />
        </Suspense>
      </section>
    </div>
  );
}