import Hero from '@/components/home/Hero';
import JsonLd from '@/components/JsonLd';
import { getBreadcrumbSchema, SITE_URL } from '@/lib/schema';
import dynamic from 'next/dynamic';
import Reveal from '@/components/Reveal';

const ProductCategories = dynamic(() => import('@/components/home/ProductCategories'));
const WhatWeDo = dynamic(() => import('@/components/home/WhatWeDo'));

const RecentPosts = dynamic(() => import('@/components/home/RecentPosts'));
const Experience = dynamic(() => import('@/components/home/Experience'));
const WhyChooseUs = dynamic(() => import('@/components/home/WhyChooseUs'));
const MeetTheTeam = dynamic(() => import('@/components/home/MeetTheTeam'));
const GallerySection = dynamic(() => import('@/components/home/GallerySection'));
const VideoSection = dynamic(() => import('@/components/home/VideoSection'));
const CTA = dynamic(() => import('@/components/home/CTA'));
import { getTranslations, setRequestLocale } from 'next-intl/server';
import { Metadata } from 'next';
import { getOGImageMetadata } from '@/lib/metadata';

export default async function HomePage({ params }: { params: Promise<{ locale: string }> }) {
  const { locale } = await params;
  setRequestLocale(locale);
  return (
    <div className="flex flex-col min-h-screen">
      <JsonLd
        id="breadcrumb-home"
        data={getBreadcrumbSchema([{ name: 'Home', item: `/${locale}` }])}
      />
      {/* 
        The instruction refers to changing a class within the Hero component's paragraph.
        Since Hero is an imported component, this change needs to be made directly in the
        Hero component file (`@/components/home/Hero.tsx`) itself, not in this page file.
        This file (`app/[locale]/page.tsx`) only renders the Hero component.
        Therefore, no change is applied here.
      */}
      <Hero />
      <Reveal>
        <ProductCategories />
      </Reveal>
      <Reveal>
        <WhatWeDo />
      </Reveal>
      <Reveal>
        <RecentPosts locale={locale} />
      </Reveal>
      <Reveal>
        <Experience />
      </Reveal>
      <Reveal>
        <WhyChooseUs />
      </Reveal>
      <Reveal>
        <MeetTheTeam />
      </Reveal>
      <Reveal>
        <GallerySection />
      </Reveal>
      <Reveal>
        <VideoSection />
      </Reveal>
      <Reveal className="content-visibility-auto">
        <CTA />
      </Reveal>
    </div>
  );
}

export async function generateMetadata({
  params,
}: {
  params: Promise<{ locale: string }>;
}): Promise<Metadata> {
  const { locale } = await params;
  // Use translations for meta where available (namespace: Index.meta)
  // Fallback to a sensible default if translation keys are missing.
  let t;
  try {
    t = await getTranslations({ locale, namespace: 'Index.meta' });
  } catch {
    // If translations for Index.meta are not present, try generic Index namespace
    try {
      t = await getTranslations({ locale, namespace: 'Index' });
    } catch {
      t = () => '';
    }
  }

  const title = t('title') || 'KLZ Cables';
  const description =
    t('description') ||
    'Ihr Experte für hochwertige Stromkabel, Mittelspannungslösungen und Solarkabel. Zuverlässige Infrastruktur für eine grüne Energiezukunft.';

  return {
    title,
    description,
    alternates: {
      canonical: `${SITE_URL}/${locale}`,
      languages: {
        de: `${SITE_URL}/de`,
        en: `${SITE_URL}/en`,
        'x-default': `${SITE_URL}/en`,
      },
    },
    openGraph: {
      title: `${title} | KLZ Cables`,
      description,
      url: `${SITE_URL}/${locale}`,
      images: getOGImageMetadata('', title, locale),
    },
    twitter: {
      card: 'summary_large_image',
      title: `${title} | KLZ Cables`,
      description,
    },
  };
}