---
import { getCollection } from 'astro:content';
import { getLocale } from '@/lib/locale';
import general from '../content/settings/general.json';
import seo from '../content/settings/seo.json';
import Layout from '@/layouts/base.astro';
import Hero from '@/components/ui/hero';
import Services from '@/components/sections/services';
import WhyChooseUs from '@/components/sections/why-choose-us';
import CTABanner from '@/components/ui/cta-banner';
import Testimonials from '@/components/sections/testimonials';

const locale = getLocale(Astro);

const [heroEntry] = await getCollection('hero', (e) => e.id === `${locale}/main`);
const [navEntry] = await getCollection('navigation', (e) => e.id === `${locale}/main`);
const [ctaEntry] = await getCollection('cta', (e) => e.id === `${locale}/main`);
const [pourquoiEntry] = await getCollection('pourquoi', (e) => e.id === `${locale}/main`);
const [testimonialsEntry] = await getCollection('testimonials', (e) => e.id === `${locale}/main`);

if (!heroEntry || !navEntry || !ctaEntry || !pourquoiEntry || !testimonialsEntry) {
  throw new Error(`Missing content collections for locale: ${locale}`);
}

const heroData = heroEntry.data;
const nav = navEntry.data;
const ctaData = ctaEntry.data;
const pourquoiData = pourquoiEntry.data;
const testimonialsData = testimonialsEntry.data;

const ctaImage = 
{
  src: '/images/landing-cta.webp',
  alt: 'Peintres décorateurs au travail',
};

const allServices = await getCollection('services', (s) => s.id.startsWith(`${locale}/`));
const services = allServices.sort((a, b) => a.data.order - b.data.order);

const serviceImages: Record<string, { src: string; alt: string }> = {
  interior: {
    src: '/images/services-1.webp',
    alt: 'Salon avec peinture intérieure soignée',
  },
  exterior: {
    src: '/images/services-2.webp',
    alt: 'Maison avec peinture extérieure',
  },
  commercial: {
    src: '/images/services-3.webp',
    alt: 'Espace commercial peint',
  },
  decoration: {
    src: '/images/services-4.webp',
    alt: 'Décoration intérieure et murale',
  },
  renovation: {
    src: '/images/services-5.webp',
    alt: 'Rénovation et finitions',
  },
};

const features = services.map((service) => {
  const icon = service.data.icon ?? 'interior';
  const img = serviceImages[icon] ?? serviceImages.interior;
  return {
    name: service.data.title,
    description: service.data.description,
    imageSrc: img.src ,
    imageAlt: img.alt,
  };
});

const heroContent = {
  title: heroData.title,
  title2: heroData.title2,
  subtitle: heroData.subtitle,
  cta: heroData.cta,
  ctaHref: heroData.ctaHref,
};
---

<Layout
  title={seo.defaultTitle}
  description={`${general.siteName} — Peintres décorateurs professionnels à Laval et sur la Rive-Nord. Peinture résidentielle et commerciale, décoration intérieure et extérieure. Soumission gratuite.`}
  canonical="/"
>
  <Hero client:load content={heroContent} />
  <Services
    id="services"
    client:load
    features={features}
    title={nav.servicesSection.title}
    subtitle={nav.servicesSection.subtitle}
  />
  <Testimonials
    client:load
    sectionLabel={testimonialsData.sectionLabel}
    title={testimonialsData.title}
    items={testimonialsData.items}
  />

  <WhyChooseUs
    client:load
    title={pourquoiData.title}
    subtitle={pourquoiData.subtitle}
    cards={pourquoiData.cards}
    images={{
      main: '/images/why-us-1.webp',
      mainAlt: 'Peintres décorateurs au travail',
      detail2: '/images/why-us-2.webp',
      detail2Alt: 'Peintres décorateurs au travail',
      detail1: '/images/why-us-3.webp',
      detail1Alt: 'Peintres décorateurs au travail',
    }}
  />
  <CTABanner
    client:load
    title={ctaData.title}
    subtitle={ctaData.subtitle}
    buttonText={ctaData.button}
    buttonHref={ctaData.buttonHref}
    imageSrc={ctaImage.src}
    imageAlt={ctaData.imageAlt}
  />

</Layout>
