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

import Reveal from '@/components/Reveal';
import { Badge, Button, Card, Container, Heading, Section } from '@/components/ui';
import { getTranslations, setRequestLocale } from 'next-intl/server';
import { Metadata } from 'next';
import Image from 'next/image';
import { mapFileSlugToTranslated } from '@/lib/slugs';
import { SITE_URL } from '@/lib/schema';
import TrackedLink from '@/components/analytics/TrackedLink';

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

export async function generateMetadata({ params }: ProductsPageProps): Promise<Metadata> {
  const { locale } = await params;
  const t = await getTranslations({ locale, namespace: 'Products' });
  const title = t.has('meta.title')
    ? t('meta.title')
    : t.has('breadcrumb')
      ? t('breadcrumb')
      : 'Products';
  const description = t('meta.description') || t('subtitle');
  return {
    title,
    description,
    alternates: {
      canonical: `${SITE_URL}/${locale}/${await mapFileSlugToTranslated('products', locale)}`,
      languages: {
        de: `${SITE_URL}/de/${await mapFileSlugToTranslated('products', 'de')}`,
        en: `${SITE_URL}/en/${await mapFileSlugToTranslated('products', 'en')}`,
        'x-default': `${SITE_URL}/en/${await mapFileSlugToTranslated('products', 'en')}`,
      },
    },
    openGraph: {
      title: `${title} | KLZ Cables`,
      description,
      url: `${SITE_URL}/${locale}/${await mapFileSlugToTranslated('products', locale)}`,
    },
    twitter: {
      card: 'summary_large_image',
      title: `${title} | KLZ Cables`,
      description,
    },
  };
}

export default async function ProductsPage({ params }: ProductsPageProps) {
  const { locale } = await params;
  setRequestLocale(locale);
  const t = await getTranslations('Products');

  // Get translated category slugs
  const lowVoltageSlug = await mapFileSlugToTranslated('low-voltage-cables', locale);
  const mediumVoltageSlug = await mapFileSlugToTranslated('medium-voltage-cables', locale);
  const highVoltageSlug = await mapFileSlugToTranslated('high-voltage-cables', locale);
  const solarSlug = await mapFileSlugToTranslated('solar-cables', locale);

  const productsSlug = await mapFileSlugToTranslated('products', locale);
  const contactSlug = await mapFileSlugToTranslated('contact', locale);

  const categories = [
    {
      title: t('categories.lowVoltage.title'),
      desc: t('categories.lowVoltage.description'),
      img: '/uploads/2024/11/low-voltage-category.webp',
      icon: '/uploads/2024/11/Low-Voltage.svg',
      href: `/${locale}/${productsSlug}/${lowVoltageSlug}`,
    },
    {
      title: t('categories.mediumVoltage.title'),
      desc: t('categories.mediumVoltage.description'),
      img: '/uploads/2024/11/medium-voltage-category.webp',
      icon: '/uploads/2024/11/Medium-Voltage.svg',
      href: `/${locale}/${productsSlug}/${mediumVoltageSlug}`,
    },
    {
      title: t('categories.highVoltage.title'),
      desc: t('categories.highVoltage.description'),
      img: '/uploads/2024/11/high-voltage-category.webp',
      icon: '/uploads/2024/11/High-Voltage.svg',
      href: `/${locale}/${productsSlug}/${highVoltageSlug}`,
    },
    {
      title: t('categories.solar.title'),
      desc: t('categories.solar.description'),
      img: '/uploads/2024/11/solar-category.webp',
      icon: '/uploads/2024/11/Solar.svg',
      href: `/${locale}/${productsSlug}/${solarSlug}`,
    },
  ];

  return (
    <div className="flex flex-col min-h-screen bg-neutral-light">
      {/* Hero Section */}
      <section className="relative flex items-center pt-32 pb-16 md:pt-40 md:pb-24 overflow-hidden bg-primary-dark">
        <Container className="relative z-10">
          <div className="max-w-4xl animate-slide-up">
            <Badge
              variant="saturated"
              className="mb-4 md:mb-8 shadow-lg px-3 py-1 md:px-4 md:py-1.5"
            >
              {t('heroSubtitle')}
            </Badge>
            <Heading level={1} className="text-white mb-4 md:mb-8">
              {t.rich('title', {
                green: (chunks) => <span className="text-accent italic">{chunks}</span>,
              })}
            </Heading>
            <p className="text-lg md:text-xl text-white/70 leading-relaxed max-w-2xl mb-8 md:mb-12 line-clamp-2 md:line-clamp-none">
              {t('subtitle')}
            </p>
            <div className="flex flex-wrap gap-4 md:gap-6">
              <Button
                href="#categories"
                variant="accent"
                size="lg"
                className="group w-full md:w-auto"
              >
                {t('viewProducts')}
                <span className="ml-3 transition-transform group-hover:translate-y-1">↓</span>
              </Button>
            </div>
          </div>
        </Container>
      </section>

      <Section id="categories" className="bg-neutral-light relative">
        <Container>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6 md:gap-8 lg:gap-12">
            {categories.map((category, idx) => (
              <Reveal key={idx} delay={idx * 100}>
                <TrackedLink
                  key={idx}
                  href={category.href}
                  className="group block"
                  eventProperties={{
                    category_title: category.title,
                    location: 'products_index',
                  }}
                >
                  <Card className="h-full border-none shadow-sm hover:shadow-2xl transition-all duration-500 rounded-[24px] md:rounded-[48px] overflow-hidden bg-white active:scale-[0.98]">
                    <div className="relative h-[200px] md:h-[400px] overflow-hidden">
                      <Image
                        src={category.img}
                        alt={category.title}
                        fill
                        className="object-cover transition-transform duration-1000 group-hover:scale-105"
                        sizes="(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 33vw"
                      />
                      <div className="absolute inset-0 image-overlay-gradient opacity-80 group-hover:opacity-90 transition-opacity duration-500" />

                      <div className="absolute top-3 right-3 md:top-8 md:right-8 w-10 h-10 md:w-20 md:h-20 bg-white/10 backdrop-blur-md rounded-xl md:rounded-[24px] flex items-center justify-center border border-white/20 shadow-2xl transition-all duration-500 group-hover:scale-110 group-hover:bg-white/20">
                        <Image
                          src={category.icon}
                          alt=""
                          width={24}
                          height={24}
                          className="w-6 h-6 md:w-12 md:h-12 brightness-0 invert opacity-80"
                        />
                      </div>

                      <div className="absolute bottom-4 left-4 md:bottom-10 md:left-10 right-4 md:right-10">
                        <Badge
                          variant="accent"
                          className="mb-2 md:mb-4 shadow-lg bg-accent text-primary-dark border-none text-[10px] md:text-xs"
                        >
                          {t('categoryLabel')}
                        </Badge>
                        <h2 className="text-xl md:text-4xl font-bold text-white leading-tight transition-transform duration-500 group-hover:translate-x-1">
                          {category.title}
                        </h2>
                      </div>
                    </div>
                    <div className="p-5 md:p-10">
                      <p className="text-text-secondary text-sm md:text-lg leading-relaxed mb-4 md:mb-8 line-clamp-2 md:line-clamp-none">
                        {category.desc}
                      </p>
                      <div className="flex items-center text-saturated font-bold text-base md:text-lg group-hover:text-accent-dark transition-colors">
                        <span className="border-b-2 border-saturated/10 group-hover:border-accent-dark transition-colors pb-1">
                          {t('viewProducts')}
                        </span>
                        <div className="ml-3 md:ml-4 w-8 h-8 md:w-10 md:h-10 rounded-full bg-primary-light flex items-center justify-center text-saturated group-hover:bg-accent group-hover:text-primary-dark transition-all duration-300 shadow-sm">
                          <svg
                            className="w-4 h-4 md:w-5 md:h-5 transition-transform group-hover:translate-x-1"
                            fill="none"
                            stroke="currentColor"
                            viewBox="0 0 24 24"
                          >
                            <path
                              strokeLinecap="round"
                              strokeLinejoin="round"
                              strokeWidth={2}
                              d="M17 8l4 4m0 0l-4 4m4-4H3"
                            />
                          </svg>
                        </div>
                      </div>
                    </div>
                  </Card>
                </TrackedLink>
              </Reveal>
            ))}
          </div>
        </Container>
      </Section>

      {/* Technical Support CTA */}
      <Reveal>
        <Section className="bg-white py-12 md:py-28">
          <Container>
            <div className="bg-primary-dark rounded-[32px] md:rounded-[64px] p-6 md:p-20 lg:p-24 relative overflow-hidden">
              <div className="absolute top-0 right-0 w-1/2 h-full bg-accent/5 -skew-x-12 translate-x-1/4" />
              <div className="relative z-10 flex flex-col lg:flex-row items-center justify-between gap-6 md:gap-12">
                <div className="max-w-2xl text-center lg:text-left">
                  <h2 className="text-2xl md:text-4xl font-bold text-white mb-4 md:mb-8 tracking-tight">
                    {t('cta.title')}
                  </h2>
                  <p className="text-base md:text-xl text-white/70 leading-relaxed">
                    {t('cta.description')}
                  </p>
                </div>
                <Button
                  href={`/${locale}/${contactSlug}`}
                  variant="accent"
                  size="lg"
                  className="group whitespace-nowrap w-full md:w-auto md:h-16 px-6 md:px-10 text-sm md:text-xl"
                >
                  {t('cta.button')}
                  <span className="ml-2 md:ml-4 transition-transform group-hover:translate-x-2">
                    &rarr;
                  </span>
                </Button>
              </div>
            </div>
          </Container>
        </Section>
      </Reveal>
    </div>
  );
}