import { getTranslations } from 'next-intl/server';
import { Hero } from '@/components/sections/hero';
import { Section } from '@/components/sections/section';
import { Process, type ProcessStep } from '@/components/sections/process';
import { CtaBanner } from '@/components/sections/cta-banner';
import { Testimonials } from '@/components/sections/testimonials';
import { ServiceCard } from '@/components/cards/service-card';
import { ProductCard } from '@/components/cards/product-card';
import { BlogCard } from '@/components/cards/blog-card';
import { ProjectCard } from '@/components/cards/project-card';
import {
  getPublishedServices,
  getPublishedProducts,
  getPublishedPosts,
  getPublishedProjects,
  getPublishedTestimonials
} from '@/lib/queries';
import { buildMetadata } from '@/lib/seo';
import { JsonLd, organizationSchema } from '@/lib/schema-org';
import { siteConfig } from '@/data/site-config';
import type { Locale } from '@/i18n/config';

export async function generateMetadata({ params: { locale } }: { params: { locale: Locale } }) {
  return buildMetadata({
    locale,
    path: '/',
    title: siteConfig.companyName,
    description:
      locale === 'ar' ? siteConfig.seo.defaultDescriptionAr : siteConfig.seo.defaultDescriptionFr
  });
}

// The five-step process below mirrors a standard solar-project workflow
// (consultation → assessment → design → installation → monitoring).
// It's UI scaffolding, not a company claim — edit freely in this file
// or move it into SiteSetting once real process copy is provided.
const processSteps: Record<Locale, ProcessStep[]> = {
  fr: [
    { title: 'Consultation', description: 'Échange initial pour comprendre votre besoin.' },
    { title: 'Étude technique', description: 'Analyse de votre site et de votre consommation.' },
    { title: 'Conception', description: 'Dimensionnement du système solaire adapté.' },
    { title: 'Installation', description: 'Mise en place par nos équipes.' },
    { title: 'Suivi', description: 'Monitoring et maintenance dans la durée.' }
  ],
  ar: [
    { title: 'استشارة', description: 'لقاء أولي لفهم احتياجكم.' },
    { title: 'دراسة تقنية', description: 'تحليل الموقع والاستهلاك.' },
    { title: 'التصميم', description: 'تحديد أبعاد النظام الشمسي المناسب.' },
    { title: 'التركيب', description: 'التنفيذ من قبل فرقنا.' },
    { title: 'المتابعة', description: 'مراقبة وصيانة على المدى الطويل.' }
  ]
};

export default async function HomePage({ params: { locale } }: { params: { locale: Locale } }) {
  const t = await getTranslations({ locale, namespace: 'sections' });
  const isAr = locale === 'ar';

  const [services, products, posts, projects, testimonials] = await Promise.all([
    getPublishedServices(locale, 3),
    getPublishedProducts(locale, 4),
    getPublishedPosts(locale, 3),
    getPublishedProjects(locale, 3),
    getPublishedTestimonials(locale)
  ]);

  return (
    <>
      <JsonLd data={organizationSchema()} />

      <Hero
        locale={locale}
        headline={
          locale === 'ar'
            ? 'حوّلوا أشعة الشمس إلى استقلالية طاقية'
            : "Transformez le soleil en indépendance énergétique"
        }
        subtext={
          locale === 'ar' ? siteConfig.seo.defaultDescriptionAr : siteConfig.seo.defaultDescriptionFr
        }
      />

      {services.length > 0 && (
        <Section
          title={t('services')}
          eyebrow={isAr ? 'خدماتنا' : 'Nos services'}
          viewAllHref={`/${locale}/services`}
          locale={locale}
          tone="tint"
        >
          <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
            {services.map((s, i) => (
              <ServiceCard key={s.slug} service={s} locale={locale} delay={i * 90} index={i + 1} />
            ))}
          </div>
        </Section>
      )}

      <Section title={t('howItWorks')} eyebrow={isAr ? 'طريقتنا' : 'Notre méthode'}>
        <Process steps={processSteps[locale]} />
      </Section>

      {projects.length > 0 && (
        <Section
          title={t('projects')}
          eyebrow={isAr ? 'إنجازاتنا' : 'Réalisations'}
          viewAllHref={`/${locale}/projects`}
          locale={locale}
          tone="dark"
        >
          <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
            {projects.map((p, i) => (
              <ProjectCard key={p.slug} project={p} locale={locale} delay={i * 90} />
            ))}
          </div>
        </Section>
      )}

      {products.length > 0 && (
        <Section
          title={t('products')}
          eyebrow={isAr ? 'متجرنا' : 'Boutique'}
          viewAllHref={`/${locale}/products`}
          locale={locale}
        >
          <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
            {products.map((p, i) => (
              <ProductCard key={p.id} product={p} locale={locale} delay={i * 90} />
            ))}
          </div>
        </Section>
      )}

      {testimonials.length > 0 && (
        <Section title={t('testimonials')} eyebrow={isAr ? 'آراء عملائنا' : 'Ils nous font confiance'} tone="tint">
          <Testimonials items={testimonials} />
        </Section>
      )}

      {posts.length > 0 && (
        <Section
          title={t('blog')}
          eyebrow={isAr ? 'المدونة' : 'Le blog'}
          viewAllHref={`/${locale}/blog`}
          locale={locale}
        >
          <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
            {posts.map((p, i) => (
              <BlogCard key={p.slug} post={p} locale={locale} delay={i * 90} />
            ))}
          </div>
        </Section>
      )}

      <CtaBanner
        locale={locale}
        title={locale === 'ar' ? 'جاهزون للانتقال إلى الطاقة الشمسية؟' : 'Prêt à passer au solaire ?'}
        subtitle={
          locale === 'ar'
            ? 'احصلوا على عرض سعر مخصص لمشروعكم.'
            : 'Obtenez un devis personnalisé pour votre projet.'
        }
        ctaLabel={locale === 'ar' ? 'اطلب عرض سعر' : 'Demander un devis'}
      />
    </>
  );
}