"use client";

import { Fragment, useMemo, useState } from 'react';
import {
  AlertTriangle,
  ArrowRight,
  BadgeEuro,
  Building2,
  Calculator,
  CheckCircle2,
  ClipboardCheck,
  Download,
  Euro,
  FileCheck2,
  HelpCircle,
  MapPinned,
  ShieldCheck,
  Sparkles,
  ThermometerSun,
  type LucideIcon,
} from 'lucide-react';
import Navbar from '@/components/Navbar';
import Footer from '@/components/Footer';
import ScrollReveal from '@/components/ScrollReveal';
import StickyMobileCTA from '@/components/StickyMobileCTA';
import WpImage from '@/components/ui/WpImage';
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion';
import { Badge } from '@/components/ui/badge';

const OFFICIAL_BAT_EN_112_URL =
  'https://www.ecologie.gouv.fr/sites/default/files/documents/BAT-EN-112%20v%20A38-1%20%C3%A0%20compter%20du%2031-07-2021.pdf';

export type ZoneKey = 'H1' | 'H2' | 'H3';

export type CeeZone = {
  zone: ZoneKey;
  regions: string;
  kwh: number;
  note: string;
};

export type EligibilityCondition = {
  icon: LucideIcon;
  text: string;
};

export type CeeExample = {
  zone: string;
  calc: string;
  amount: string;
  perM2: string;
};

export type CeeProcessStep = {
  num: string;
  title: string;
  text: string;
};

export type CeeFaqItem = {
  q: string;
  a: string;
};

export type CeeSeoBloc = {
  titre: string;
  texte: string;
};

export type CeeSeoSource = {
  label: string;
  url: string;
};

export interface PrimeCEECoolRoofProps {
  heroEyebrow?: string;
  heroTitre?: string;
  heroIntro?: string;
  heroImage?: string;
  heroImageAlt?: string;
  heroCtaLabel?: string;
  heroCtaHref?: string;
  heroSecondaireLabel?: string;
  heroSecondaireHref?: string;
  estimTitre?: string;
  dispositifBadge?: string;
  dispositifTitre?: string;
  dispositifIntro?: string;
  dispositifCards?: [string, string][];
  zones?: CeeZone[];
  baremeBadge?: string;
  baremeTitre?: string;
  baremeIntro?: string;
  formuleTexte?: string;
  exemplesIntro?: string;
  examples?: CeeExample[];
  sudTitre?: string;
  sudTexte?: string;
  sudNote?: string;
  sudCtaLabel?: string;
  sudCtaHref?: string;
  eligBadge?: string;
  eligTitre?: string;
  eligIntro?: string;
  eligConditions?: EligibilityCondition[];
  eligCtaLabel?: string;
  eligCtaHref?: string;
  produitsBadge?: string;
  produitsTitre?: string;
  produitsIntro?: string;
  productTypes?: string[];
  produitsNote?: string;
  covaLabel?: string;
  covaFigures?: [string, string][];
  covaTexte?: string;
  covaCtaLabel?: string;
  covaCtaHref?: string;
  processBadge?: string;
  processTitre?: string;
  processSteps?: CeeProcessStep[];
  processAlerte?: string;
  faqBadge?: string;
  faqTitre?: string;
  faqs?: CeeFaqItem[];
  faqCtaLabel?: string;
  faqCtaHref?: string;
  ctaTitre?: string;
  ctaTexte?: string;
  ctaLabel?: string;
  ctaHref?: string;
  ctaSecondaireLabel?: string;
  ctaSecondaireHref?: string;
  ctaReassurances?: string[];
  seoTitre?: string;
  seoIntroTexte?: string;
  seoBlocs?: CeeSeoBloc[];
  seoSources?: CeeSeoSource[];
}

const CEE_COURSE = 8;

const defaultZones: CeeZone[] = [
  {
    zone: 'H1',
    regions: 'Nord, Est, centre (climat continental)',
    kwh: 160,
    note: 'Zone la moins valorisée pour cette fiche.',
  },
  {
    zone: 'H2',
    regions: 'Façade atlantique, Sud-Ouest',
    kwh: 170,
    note: 'Barème intermédiaire.',
  },
  {
    zone: 'H3',
    regions: 'Pourtour méditerranéen et Corse',
    kwh: 270,
    note: 'Prime la plus élevée.',
  },
];

const defaultExamples: CeeExample[] = [
  { zone: 'H1', calc: '160 × 5 000 = 800 MWh cumac × 8 €', amount: '~6 400 €', perM2: '~1,3 €/m²' },
  { zone: 'H2', calc: '170 × 5 000 = 850 MWh cumac × 8 €', amount: '~6 800 €', perM2: '~1,4 €/m²' },
  { zone: 'H3', calc: '270 × 5 000 = 1 350 MWh cumac × 8 €', amount: '~10 800 €', perM2: '~2,2 €/m²' },
];

const defaultEligibilityConditions: EligibilityCondition[] = [
  { icon: Building2, text: 'Bâtiment du secteur tertiaire à usage commercial.' },
  { icon: ThermometerSun, text: 'Production de chaud et de froid assurée par un dispositif de type pompe à chaleur.' },
  { icon: ShieldCheck, text: 'Toiture dépourvue de revêtement réflectif avant l’opération.' },
  { icon: FileCheck2, text: 'Pose réalisée par un professionnel.' },
  { icon: Building2, text: 'Revêtement appliqué au droit d’un volume fermé et climatisé.' },
  {
    icon: Sparkles,
    text: 'Produit avec un SRI supérieur à 100 à l’état neuf et supérieur à 90 à l’état vieilli.',
  },
  { icon: ClipboardCheck, text: 'Durée de vie conventionnelle : 20 ans.' },
  { icon: AlertTriangle, text: 'Non cumulable avec la fiche BAT-EN-109.' },
];

const defaultProductTypes = [
  'Peinture réflective blanche',
  'Membrane bitumineuse blanche',
  'Membrane PVC blanche',
  'Membrane EPDM blanche',
];

const defaultProcessSteps: CeeProcessStep[] = [
  {
    num: '01',
    title: 'Vérification d’éligibilité',
    text: 'On vérifie que votre bâtiment et votre projet remplissent les conditions de la fiche.',
  },
  {
    num: '02',
    title: 'Devis et engagement',
    text: 'La prime doit être actée avant le début des travaux. La date d’acceptation du devis marque le point de départ du dossier.',
  },
  {
    num: '03',
    title: 'Réalisation',
    text: 'Application du revêtement réflectif par un professionnel.',
  },
  {
    num: '04',
    title: 'Constitution du dossier',
    text: 'Attestation sur l’honneur, facture et preuves de réalisation.',
  },
  {
    num: '05',
    title: 'Versement de la prime',
    text: 'Valorisation des CEE auprès d’un obligé.',
  },
];

const defaultFaqs: CeeFaqItem[] = [
  {
    q: 'Mon bâtiment est-il éligible ?',
    a: "La BAT-EN-112 vise les bâtiments tertiaires à usage commercial, comme les magasins et galeries marchandes, climatisés par pompe à chaleur, dont la toiture n’a pas encore de revêtement réflectif. Les sites industriels, les bureaux, les collectivités et le résidentiel ne sont pas éligibles.",
  },
  {
    q: 'Combien vais-je toucher ?',
    a: 'Cela dépend de votre zone climatique (160 à 270 kWh cumac/m²), de votre surface et du cours du CEE. Pour une toiture de 5 000 m², la prime se situe en général entre quelques milliers d’euros en zone H1 et plus de 10 000 € en zone H3. Le calcul précis se fait au devis.',
  },
  {
    q: 'Pourquoi le Sud rapporte-t-il plus ?',
    a: "Parce que le cool roof fait économiser de la climatisation, et c’est dans le Sud que ces économies sont les plus importantes. Le barème valorise donc davantage la zone H3.",
  },
  {
    q: 'La prime est-elle cumulable ?',
    a: "La BAT-EN-112 n’est pas cumulable avec la fiche BAT-EN-109. Elle peut en revanche s’inscrire dans une trajectoire décret tertiaire.",
  },
  {
    q: 'Quel produit choisir pour rester éligible ?',
    a: 'Un revêtement qui conserve un SRI supérieur à 90 après vieillissement sur 20 ans. C’est le cas de CovaTherm (SRI 118 vieilli), là où beaucoup d’acryliques perdent leur blancheur en quelques années.',
  },
  {
    q: 'Qui s’occupe du dossier ?',
    a: 'Nous vous accompagnons dans la démarche, de la vérification d’éligibilité à la constitution du dossier. Le niveau exact de prise en charge est confirmé au moment du projet.',
  },
];

const fmtEuro = (value: number) =>
  new Intl.NumberFormat('fr-FR', { maximumFractionDigits: 0, style: 'currency', currency: 'EUR' }).format(value);

const fmtNumber = (value: number) => new Intl.NumberFormat('fr-FR', { maximumFractionDigits: 0 }).format(value);

const PrimaryCTA = ({ href, children }: { href: string; children: string }) => (
  <a
    href={href}
    className="group inline-flex items-center justify-center gap-2 rounded-full cta-gradient py-2.5 pl-6 pr-2 font-semibold text-white"
  >
    <span className="text-sm">{children}</span>
    <span className="flex h-8 w-8 items-center justify-center rounded-full bg-white/20 transition-transform duration-500 group-hover:translate-x-0.5">
      <ArrowRight className="h-3.5 w-3.5" />
    </span>
  </a>
);

const SecondaryCTA = ({ href, children, light = false }: { href: string; children: string; light?: boolean }) => (
  <a
    href={href}
    className={`group inline-flex items-center justify-center gap-2 rounded-full border py-2.5 pl-6 pr-2 font-semibold transition-colors ${
      light
        ? 'border-white/25 bg-white/5 text-white hover:bg-white/10'
        : 'border-primary/25 bg-white text-primary hover:bg-primary/5'
    }`}
  >
    <span className="text-sm">{children}</span>
    <span className={`flex h-8 w-8 items-center justify-center rounded-full transition-transform duration-500 group-hover:translate-x-0.5 ${light ? 'bg-white/12' : 'bg-primary/10'}`}>
      <ArrowRight className="h-3.5 w-3.5" />
    </span>
  </a>
);

const PrimeEstimator = ({ zones = defaultZones }: { zones?: CeeZone[] } = {}) => {
  const [zone, setZone] = useState<ZoneKey>('H3');
  const [surface, setSurface] = useState('5000');
  const selectedZone = zones.find((item) => item.zone === zone) ?? zones[2];

  const result = useMemo(() => {
    const surfaceValue = Math.max(Number(surface) || 0, 0);
    const mwh = (selectedZone.kwh * surfaceValue) / 1000;
    const amount = mwh * CEE_COURSE;
    const perM2 = surfaceValue > 0 ? amount / surfaceValue : 0;
    return { surfaceValue, mwh, amount, perM2 };
  }, [selectedZone, surface]);

  return (
    <div id="estimation-prime" className="rounded-lg border border-white/10 bg-white/[0.055] p-5 backdrop-blur lg:p-6">
      <div className="mb-5 flex items-center gap-3">
        <span className="flex h-11 w-11 items-center justify-center rounded-lg bg-teal-vivid/16 text-teal-vivid">
          <Calculator className="h-5 w-5" strokeWidth={1.8} />
        </span>
        <div>
          <h2 className="font-satoshi text-xl font-bold text-white">Estimation indicative</h2>
          <p className="font-body text-xs text-white/48">Cours CEE indicatif : {CEE_COURSE} €/MWh cumac</p>
        </div>
      </div>

      <div className="grid gap-3">
        <label className="grid gap-1.5">
          <span className="font-body text-xs font-semibold uppercase tracking-[0.14em] text-white/45">
            Zone climatique
          </span>
          <select
            value={zone}
            onChange={(event) => setZone(event.target.value as ZoneKey)}
            className="w-full rounded-lg border border-white/12 bg-white/10 px-4 py-3 font-body text-sm text-white outline-none focus:border-teal-vivid/50 focus:ring-2 focus:ring-teal-vivid/20"
          >
            {zones.map((item) => (
              <option key={item.zone} value={item.zone} className="bg-navy text-white">
                {item.zone} - {item.regions}
              </option>
            ))}
          </select>
        </label>
        <label className="grid gap-1.5">
          <span className="font-body text-xs font-semibold uppercase tracking-[0.14em] text-white/45">
            Surface traitée
          </span>
          <input
            type="number"
            min="0"
            value={surface}
            onChange={(event) => setSurface(event.target.value)}
            className="w-full rounded-lg border border-white/12 bg-white/10 px-4 py-3 font-body text-sm text-white outline-none placeholder:text-white/35 focus:border-teal-vivid/50 focus:ring-2 focus:ring-teal-vivid/20"
            placeholder="Surface en m²"
          />
        </label>
      </div>

      <div className="mt-5 rounded-lg bg-white p-5 text-foreground">
        <p className="font-body text-[11px] font-bold uppercase tracking-[0.18em] text-primary/60">
          Prime estimée
        </p>
        <p className="mt-2 font-satoshi text-4xl font-black text-foreground">{fmtEuro(result.amount)}</p>
        <div className="mt-4 grid gap-3 border-t border-border pt-4 text-sm sm:grid-cols-2">
          <p className="font-body text-foreground/62">
            <strong className="text-foreground">{fmtNumber(result.mwh)}</strong> MWh cumac
          </p>
          <p className="font-body text-foreground/62">
            <strong className="text-foreground">{result.perM2.toFixed(1).replace('.', ',')} €/m²</strong> environ
          </p>
        </div>
      </div>

      <p className="mt-4 font-body text-xs leading-relaxed text-white/46">
        Simulation non contractuelle. Le montant final dépend du cours CEE et du dossier validé avant engagement des travaux.
      </p>
    </div>
  );
};

const defaultDispositifCards: [string, string][] = [
  ['Prime versée', 'en échange de la pose d’un revêtement réflectif éligible.'],
  ['kWh cumac', 'montant calculé selon votre zone climatique et votre surface.'],
  ['Bâtiments précis', 'réservée au tertiaire commercial climatisé par PAC.'],
];

const defaultCovaFigures: [string, string][] = [
  ['119', 'SRI neuf'],
  ['118', 'SRI vieilli'],
  ['20 ans', 'durée de vie'],
];

const defaultCtaReassurances = ['Réponse sous 48h', 'Calcul selon votre zone climatique', 'Sans engagement'];

const defaultSeoBlocs: CeeSeoBloc[] = [
  {
    titre: "Qu'est-ce que la prime CEE cool roof",
    texte: "Le dispositif des Certificats d'Économies d'Énergie oblige les fournisseurs d'énergie à financer des travaux d'économie d'énergie chez les particuliers et les professionnels. Pour le cool roof, c'est la fiche d'opération standardisée BAT-EN-112 qui ouvre droit à une prime.",
  },
  {
    titre: 'Le barème de la BAT-EN-112 par zone climatique',
    texte: "Le montant de la prime se calcule à partir d'un barème officiel exprimé en kWh cumac par mètre carré de toiture traitée : 160 en zone H1, 170 en zone H2 et 270 en zone H3. Ce total est divisé par mille pour obtenir des MWh cumac, puis multiplié par le cours du CEE sur le marché.",
  },
  {
    titre: "Les conditions d'éligibilité à la prime CEE cool roof",
    texte: 'La BAT-EN-112 est réservée aux bâtiments du secteur tertiaire à usage commercial, magasins et galeries marchandes, dont la production de chaud et de froid est assurée par une pompe à chaleur et dont la toiture est dépourvue de revêtement réflectif avant les travaux.',
  },
  {
    titre: 'Le critère décisif : le SRI vieilli',
    texte: "Le produit doit afficher un SRI supérieur à 100 à l'état neuf, mais aussi supérieur à 90 après vieillissement. C'est ce second seuil qui élimine la plupart des peintures acryliques bas de gamme.",
  },
  {
    titre: 'Comment toucher la prime CEE pour votre cool roof',
    texte: "La règle d'or du dispositif CEE est d'initier la démarche avant d'engager les travaux. Une opération déjà lancée n'est plus éligible. Le parcours passe ensuite par la réalisation des travaux, la constitution du dossier et la valorisation des certificats auprès d'un obligé.",
  },
];

const defaultSeoSources: CeeSeoSource[] = [
  {
    label: "Fiche d'opération standardisée BAT-EN-112, Ministère de la Transition écologique.",
    url: OFFICIAL_BAT_EN_112_URL,
  },
  {
    label: "Opérations standardisées d'économies d'énergie, Ministère de la Transition écologique.",
    url: 'https://www.ecologie.gouv.fr/politiques-publiques/operations-standardisees-deconomies-denergie',
  },
  {
    label: "ADEME, dispositif des Certificats d'Économies d'Énergie.",
    url: 'https://www.ademe.fr',
  },
];

const PrimeCEECoolRoof = ({
  heroEyebrow = 'Prime CEE · BAT-EN-112',
  heroTitre = 'Prime CEE cool roof : financez votre toiture réflective',
  heroIntro = "La fiche BAT-EN-112 permet de financer une partie de votre revêtement réflectif grâce aux Certificats d'Économies d'Énergie. Voici qui est éligible, et combien vous pouvez toucher.",
  heroImage = '/images/prime-cee/revetement-reflectif-toiture.jpg',
  heroImageAlt = 'Revêtement réflectif cool roof sur toiture commerciale',
  heroCtaLabel = 'Estimer ma prime CEE',
  heroCtaHref = '#estimation-prime',
  heroSecondaireLabel = 'Vérifier mon éligibilité',
  heroSecondaireHref = '#eligibilite',
  estimTitre = 'Estimez votre prime selon votre zone et votre surface.',
  dispositifBadge = 'Le dispositif',
  dispositifTitre = "Une aide de l'État pour les toitures réflectives.",
  dispositifIntro = "Les Certificats d'Économies d'Énergie obligent les fournisseurs d'énergie à financer des travaux qui réduisent la consommation. En échange des travaux, vous touchez une prime. La fiche BAT-EN-112, « mise en place d'un revêtement réflectif en toiture pour la réduction des apports solaires », encadre précisément le cool roof.",
  dispositifCards = defaultDispositifCards,
  zones = defaultZones,
  baremeBadge = 'Le montant',
  baremeTitre = 'Un barème selon votre zone climatique.',
  baremeIntro = "Le montant se calcule à partir d'un barème officiel, exprimé en kWh cumac par m² de toiture traitée, multiplié par votre surface, puis valorisé au cours du marché des CEE.",
  formuleTexte = '(kWh cumac/m² × surface en m²) ÷ 1000 × cours du CEE',
  exemplesIntro = 'Exemple pour une toiture de 5 000 m² avec un cours indicatif de 8 €/MWh cumac.',
  examples = defaultExamples,
  sudTitre = 'Dans le Sud, la prime est la plus élevée.',
  sudTexte = "C'est l'inverse des aides au chauffage : un revêtement réflectif fait surtout économiser de la climatisation, et c'est en zone H3 que ces économies sont les plus fortes.",
  sudNote = 'Montants donnés à titre indicatif. Le cours du CEE varie selon le marché et le barème peut évoluer. Votre estimation précise est calculée au moment du devis.',
  sudCtaLabel = 'Estimer ma prime selon ma zone',
  sudCtaHref = '#estimation-prime',
  eligBadge = 'Éligibilité',
  eligTitre = 'Une fiche réservée aux bâtiments tertiaires à usage commercial.',
  eligIntro = 'La BAT-EN-112 cible exclusivement les bâtiments tertiaires à usage commercial, magasins et galeries marchandes, généralement très consommateurs de climatisation.',
  eligConditions = defaultEligibilityConditions,
  eligCtaLabel = 'Télécharger la fiche officielle BAT-EN-112',
  eligCtaHref = OFFICIAL_BAT_EN_112_URL,
  produitsBadge = 'Produits',
  produitsTitre = "L'éligibilité se joue sur le SRI vieilli.",
  produitsIntro = "Les conditions sont strictes et peu de produits passent le seuil dans la durée. Sont potentiellement éligibles, à condition d'un SRI supérieur à 100 à l'état neuf et supérieur à 90 à l'état vieilli :",
  productTypes = defaultProductTypes,
  produitsNote = 'une peinture acrylique sans finition de protection perd sa blancheur en 3 à 8 ans. Son SRI vieilli chute alors sous le seuil exigé sur 20 ans.',
  covaLabel = 'CovaTherm est éligible',
  covaFigures = defaultCovaFigures,
  covaTexte = "SRI à l'état vieilli selon ISO 16474-3:2020 après 4 000 heures, avec finition CovaTherm 20 top coat. La blancheur et les performances réflectives sont maintenues jusqu'à 20 ans.",
  covaCtaLabel = 'Découvrir CovaTherm',
  covaCtaHref = '/peinture-reflective-covatherm',
  processBadge = 'Le process',
  processTitre = "On vous accompagne, de l'éligibilité au versement.",
  processSteps = defaultProcessSteps,
  processAlerte = "Ne signez jamais le devis des travaux avant d'avoir initié la démarche CEE. Une opération déjà engagée n'est plus éligible.",
  faqBadge = 'FAQ',
  faqTitre = 'Vos questions sur la prime CEE cool roof.',
  faqs = defaultFaqs,
  faqCtaLabel = 'Une question sur votre éligibilité ? Parlons-en',
  faqCtaHref = '/diagnostic',
  ctaTitre = 'Estimez votre prime CEE cool roof.',
  ctaTexte = 'On vérifie votre éligibilité à la BAT-EN-112 et on chiffre votre prime selon votre zone et votre surface.',
  ctaLabel = 'Estimer ma prime',
  ctaHref = '#estimation-prime',
  ctaSecondaireLabel = 'Demander un devis',
  ctaSecondaireHref = '/diagnostic',
  ctaReassurances = defaultCtaReassurances,
  seoTitre = 'Prime CEE cool roof et fiche BAT-EN-112',
  seoIntroTexte = "La prime CEE est l'un des principaux leviers pour financer un revêtement réflectif en toiture. Encadrée par la fiche BAT-EN-112, elle s'adresse à un type de bâtiment précis et obéit à des conditions strictes. Voici tout ce qu'il faut comprendre avant de lancer un projet de cool roof.",
  seoBlocs = defaultSeoBlocs,
  seoSources = defaultSeoSources,
}: PrimeCEECoolRoofProps = {}) => {
  return (
    <>
      <Navbar />
      <main>
        <section className="relative isolate overflow-hidden bg-navy pt-28 text-white lg:pt-36">
          <picture className="absolute inset-0 -z-10">
            <WpImage
              image={{ sourceUrl: heroImage, altText: heroImageAlt, width: null, height: null }}
              fill
              priority
              className="h-full w-full object-cover opacity-34"
            />
          </picture>
          <div className="absolute inset-0 -z-10 bg-gradient-to-r from-navy via-navy/90 to-navy/36" aria-hidden="true" />
          <div className="absolute inset-x-0 bottom-0 -z-10 h-28 bg-gradient-to-t from-navy to-transparent" aria-hidden="true" />

          <div className="container mx-auto px-4 pb-16 lg:px-8 lg:pb-24">
            <div className="max-w-3xl">
              <div className="mb-6 flex flex-wrap items-center gap-3">
                <span className="h-px w-9 bg-teal-vivid" aria-hidden="true" />
                <span className="font-body text-[11px] font-semibold uppercase tracking-[0.22em] text-teal-vivid">
                  {heroEyebrow}
                </span>
              </div>
              <h1 className="max-w-3xl font-satoshi text-4xl font-black leading-[1.04] text-white sm:text-5xl lg:text-6xl">
                {heroTitre}
              </h1>
              <p className="mt-6 max-w-2xl font-body text-base leading-relaxed text-white/70 lg:text-xl">
                {heroIntro}
              </p>
              <div className="mt-9 flex flex-col gap-3 sm:flex-row">
                <PrimaryCTA href={heroCtaHref}>{heroCtaLabel}</PrimaryCTA>
                <SecondaryCTA href={heroSecondaireHref} light>
                  {heroSecondaireLabel}
                </SecondaryCTA>
              </div>
            </div>
          </div>
        </section>

        <section className="bg-[#192A3A] py-12 text-white lg:py-16">
          <div className="container mx-auto px-4 lg:px-8">
            <div className="grid items-center gap-8 lg:grid-cols-[0.82fr_1.18fr] lg:gap-12">
              <ScrollReveal>
                <div>
                  <p className="mb-4 font-body text-[10px] font-semibold uppercase tracking-[0.24em] text-teal-vivid">
                    Calcul rapide
                  </p>
                  <h2 className="font-satoshi text-3xl font-black leading-tight text-white lg:text-4xl">
                    {estimTitre}
                  </h2>
                  <p className="mt-4 max-w-xl font-body text-base leading-relaxed text-white/60">
                    Cette simulation reprend le barème officiel BAT-EN-112 et un cours CEE indicatif.
                    Le chiffrage contractuel est confirmé au devis.
                  </p>
                </div>
              </ScrollReveal>
              <ScrollReveal>
                <PrimeEstimator zones={zones} />
              </ScrollReveal>
            </div>
          </div>
        </section>

        <section className="bg-white py-16 lg:py-28">
          <div className="container mx-auto px-4 lg:px-8">
            <div className="grid gap-10 lg:grid-cols-[42fr_58fr] lg:gap-16">
              <ScrollReveal>
                <div className="lg:sticky lg:top-28">
                  <Badge className="mb-5 border-primary/15 bg-primary/10 text-primary hover:bg-primary/10">
                    {dispositifBadge}
                  </Badge>
                  <h2 className="font-satoshi text-3xl font-black leading-tight text-foreground sm:text-4xl lg:text-5xl">
                    {dispositifTitre}
                  </h2>
                </div>
              </ScrollReveal>
              <div>
                <ScrollReveal>
                  <p className="font-body text-lg leading-relaxed text-foreground/72 lg:text-xl">
                    {dispositifIntro}
                  </p>
                </ScrollReveal>
                <ScrollReveal stagger>
                  <div className="mt-8 grid gap-4 md:grid-cols-3">
                    {dispositifCards.map(([title, text]) => (
                      <div key={title} className="rounded-lg border border-border bg-cream p-6">
                        <BadgeEuro className="mb-5 h-5 w-5 text-primary" strokeWidth={1.8} />
                        <h3 className="mb-2 font-satoshi text-lg font-bold text-foreground">{title}</h3>
                        <p className="font-body text-sm leading-relaxed text-foreground/64">{text}</p>
                      </div>
                    ))}
                  </div>
                </ScrollReveal>
              </div>
            </div>
          </div>
        </section>

        <section className="bg-cream py-16 lg:py-28">
          <div className="container mx-auto px-4 lg:px-8">
            <ScrollReveal>
              <div className="mx-auto mb-12 max-w-4xl text-center">
                <Badge className="mb-5 border-primary/15 bg-primary/10 text-primary hover:bg-primary/10">
                  {baremeBadge}
                </Badge>
                <h2 className="font-satoshi text-3xl font-black leading-tight text-foreground sm:text-4xl lg:text-5xl">
                  {baremeTitre}
                </h2>
                <p className="mx-auto mt-5 max-w-2xl font-body text-base leading-relaxed text-foreground/64">
                  {baremeIntro}
                </p>
              </div>
            </ScrollReveal>

            <div className="grid gap-6 lg:grid-cols-[0.9fr_1.1fr]">
              <ScrollReveal>
                <div className="overflow-hidden rounded-lg border border-border bg-white shadow-sm">
                  <div className="bg-foreground px-6 py-5 text-white">
                    <p className="font-body text-[11px] font-bold uppercase tracking-[0.18em] text-teal-vivid">
                      Barème officiel BAT-EN-112
                    </p>
                  </div>
                  <div className="divide-y divide-border">
                    {zones.map((item) => (
                      <div key={item.zone} className="grid gap-3 px-5 py-5 sm:grid-cols-[64px_1fr_110px] sm:items-center">
                        <span className="font-satoshi text-3xl font-black text-primary">{item.zone}</span>
                        <div>
                          <p className="font-body text-sm font-semibold text-foreground">{item.regions}</p>
                          <p className="mt-1 font-body text-xs text-foreground/46">{item.note}</p>
                        </div>
                        <span className="font-satoshi text-2xl font-black text-foreground">{item.kwh}</span>
                      </div>
                    ))}
                  </div>
                </div>
              </ScrollReveal>

              <ScrollReveal>
                <div className="rounded-lg border border-border bg-white p-6 shadow-sm lg:p-8">
                  <p className="mb-3 font-body text-[10px] font-semibold uppercase tracking-[0.22em] text-primary/60">
                    La formule
                  </p>
                  <div className="rounded-lg bg-cream p-5 font-satoshi text-xl font-black leading-snug text-foreground">
                    {formuleTexte}
                  </div>
                  <p className="mt-5 font-body text-sm leading-relaxed text-foreground/62">
                    {exemplesIntro}
                  </p>
                  <div className="mt-5 overflow-hidden rounded-lg border border-border">
                    {examples.map((example) => (
                      <div key={example.zone} className="grid gap-2 border-b border-border px-4 py-4 last:border-b-0 md:grid-cols-[48px_1fr_92px_88px] md:items-center">
                        <span className="font-satoshi text-xl font-black text-primary">{example.zone}</span>
                        <span className="font-body text-sm text-foreground/62">{example.calc}</span>
                        <span className="font-body text-sm font-bold text-foreground">{example.amount}</span>
                        <span className="font-body text-sm text-foreground/58">{example.perM2}</span>
                      </div>
                    ))}
                  </div>
                </div>
              </ScrollReveal>
            </div>

            <ScrollReveal>
              <div className="mt-8 rounded-lg border border-primary/15 bg-white p-6 lg:p-7">
                <div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
                  <div>
                    <h3 className="font-satoshi text-2xl font-black text-foreground">
                      {sudTitre}
                    </h3>
                    <p className="mt-2 max-w-3xl font-body text-sm leading-relaxed text-foreground/64">
                      {sudTexte}
                    </p>
                    <p className="mt-3 font-body text-xs leading-relaxed text-foreground/46">
                      {sudNote}
                    </p>
                  </div>
                  <PrimaryCTA href={sudCtaHref}>{sudCtaLabel}</PrimaryCTA>
                </div>
              </div>
            </ScrollReveal>
          </div>
        </section>

        <section id="eligibilite" className="bg-white py-16 lg:py-28">
          <div className="container mx-auto px-4 lg:px-8">
            <div className="grid items-start gap-10 lg:grid-cols-[40fr_60fr] lg:gap-16">
              <ScrollReveal>
                <div className="lg:sticky lg:top-28">
                  <Badge className="mb-5 border-primary/15 bg-primary/10 text-primary hover:bg-primary/10">
                    {eligBadge}
                  </Badge>
                  <h2 className="font-satoshi text-3xl font-black leading-tight text-foreground sm:text-4xl lg:text-5xl">
                    {eligTitre}
                  </h2>
                  <p className="mt-5 font-body text-base leading-relaxed text-foreground/64">
                    {eligIntro}
                  </p>
                  <a
                    href={eligCtaHref}
                    target="_blank"
                    rel="noreferrer"
                    className="mt-6 inline-flex items-center gap-2 font-body text-sm font-semibold text-primary transition-all hover:gap-3"
                  >
                    {eligCtaLabel} <Download className="h-4 w-4" />
                  </a>
                </div>
              </ScrollReveal>

              <ScrollReveal stagger>
                <div className="grid gap-3 sm:grid-cols-2">
                  {eligConditions.map((condition) => {
                    const Icon = condition.icon;
                    return (
                      <div key={condition.text} className="flex items-start gap-4 rounded-lg border border-border bg-cream p-5">
                        <span className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-primary/10">
                          <Icon className="h-5 w-5 text-primary" strokeWidth={1.8} />
                        </span>
                        <p className="font-body text-sm leading-relaxed text-foreground/68">{condition.text}</p>
                      </div>
                    );
                  })}
                </div>
              </ScrollReveal>
            </div>
          </div>
        </section>

        <section className="relative overflow-hidden bg-[#192A3A] py-16 text-white lg:py-28">
          <img
            src="/images/applicateur-blobs.svg"
            alt=""
            aria-hidden="true"
            className="pointer-events-none absolute -right-[18%] -top-[28%] w-[58%] select-none opacity-16"
          />
          <div className="container relative mx-auto px-4 lg:px-8">
            <div className="grid items-center gap-10 lg:grid-cols-[1fr_0.95fr] lg:gap-16">
              <ScrollReveal>
                <div>
                  <Badge className="mb-5 border-white/15 bg-white/10 text-white hover:bg-white/10">{produitsBadge}</Badge>
                  <h2 className="font-satoshi text-3xl font-black leading-tight text-white sm:text-4xl lg:text-5xl">
                    {produitsTitre}
                  </h2>
                  <p className="mt-5 font-body text-base leading-relaxed text-white/64">
                    {produitsIntro}
                  </p>
                  <div className="mt-7 grid gap-3 sm:grid-cols-2">
                    {productTypes.map((item) => (
                      <div key={item} className="flex items-center gap-3 rounded-lg border border-white/10 bg-white/[0.045] px-4 py-3">
                        <CheckCircle2 className="h-5 w-5 shrink-0 text-teal-vivid" strokeWidth={1.8} />
                        <span className="font-body text-sm text-white/72">{item}</span>
                      </div>
                    ))}
                  </div>
                  <div className="mt-6 rounded-lg border border-amber-300/20 bg-amber-300/10 p-5">
                    <p className="font-body text-sm leading-relaxed text-white/72">
                      <strong className="text-white">Attention :</strong> {produitsNote}
                    </p>
                  </div>
                </div>
              </ScrollReveal>

              <ScrollReveal>
                <div className="rounded-lg border border-white/10 bg-white p-6 text-foreground shadow-[0_24px_80px_rgba(0,0,0,0.20)] lg:p-8">
                  <p className="mb-3 font-body text-[10px] font-semibold uppercase tracking-[0.22em] text-primary/60">
                    {covaLabel}
                  </p>
                  <div className="grid gap-4 sm:grid-cols-3">
                    {covaFigures.map(([value, label]) => (
                      <div key={label} className="rounded-lg bg-cream p-5">
                        <p className="font-satoshi text-3xl font-black text-primary">{value}</p>
                        <p className="mt-2 font-body text-xs font-semibold uppercase tracking-[0.14em] text-foreground/45">
                          {label}
                        </p>
                      </div>
                    ))}
                  </div>
                  <p className="mt-6 font-body text-sm leading-relaxed text-foreground/64">
                    {covaTexte}
                  </p>
                  <div className="mt-7">
                    <SecondaryCTA href={covaCtaHref}>{covaCtaLabel}</SecondaryCTA>
                  </div>
                </div>
              </ScrollReveal>
            </div>
          </div>
        </section>

        <section className="bg-cream py-16 lg:py-28">
          <div className="container mx-auto px-4 lg:px-8">
            <div className="grid gap-12 lg:grid-cols-[38fr_62fr] lg:gap-20">
              <ScrollReveal>
                <div className="lg:sticky lg:top-28">
                  <Badge className="mb-5 border-primary/15 bg-primary/10 text-primary hover:bg-primary/10">
                    {processBadge}
                  </Badge>
                  <h2 className="font-satoshi text-3xl font-black leading-tight text-foreground sm:text-4xl lg:text-5xl">
                    {processTitre}
                  </h2>
                  <div className="mt-6 rounded-lg border border-destructive/20 bg-white p-5">
                    <AlertTriangle className="mb-3 h-5 w-5 text-destructive" strokeWidth={1.8} />
                    <p className="font-body text-sm leading-relaxed text-foreground/68">
                      {processAlerte}
                    </p>
                  </div>
                </div>
              </ScrollReveal>
              <div className="relative">
                <div className="absolute left-5 top-4 bottom-4 w-px bg-gradient-to-b from-primary/25 via-primary/10 to-transparent lg:left-6" />
                {processSteps.map((step, index) => (
                  <ScrollReveal key={step.num}>
                    <div className="relative flex items-start gap-5 py-7 lg:gap-7 lg:py-9">
                      <div className="relative z-10 flex h-10 w-10 shrink-0 items-center justify-center rounded-full border border-primary/20 bg-white lg:h-12 lg:w-12">
                        <span className="font-body text-xs font-black text-primary">{step.num}</span>
                      </div>
                      <div className="pt-1">
                        <h3 className="mb-2 font-satoshi text-xl font-bold text-foreground lg:text-2xl">
                          {step.title}
                        </h3>
                        <p className="max-w-xl font-body text-sm leading-relaxed text-foreground/64 lg:text-[15px]">
                          {step.text}
                        </p>
                      </div>
                    </div>
                    {index < processSteps.length - 1 && <div className="ml-5 h-px bg-foreground/10 lg:ml-6" />}
                  </ScrollReveal>
                ))}
              </div>
            </div>
          </div>
        </section>

        <section className="bg-white py-16 lg:py-28">
          <div className="container mx-auto px-4 lg:px-8">
            <ScrollReveal>
              <div className="grid gap-12 lg:grid-cols-5 lg:gap-16">
                <div className="lg:col-span-2 lg:sticky lg:top-28 lg:self-start">
                  <p className="mb-5 font-body text-[10px] font-semibold uppercase tracking-[0.25em] text-primary/60">
                    {faqBadge}
                  </p>
                  <h2 className="font-satoshi text-3xl font-black leading-tight text-foreground sm:text-4xl">
                    {faqTitre}
                  </h2>
                  <a
                    href={faqCtaHref}
                    className="mt-6 inline-flex items-center gap-2 font-body text-sm font-semibold text-primary transition-all hover:gap-3"
                  >
                    {faqCtaLabel} <ArrowRight className="h-4 w-4" />
                  </a>
                </div>
                <div className="lg:col-span-3">
                  <Accordion type="single" collapsible className="space-y-3">
                    {faqs.map((faq, index) => (
                      <AccordionItem key={faq.q} value={`faq-${index}`} className="rounded-lg border border-border bg-card px-5">
                        <AccordionTrigger className="py-5 text-left font-semibold text-foreground hover:no-underline">
                          {faq.q}
                        </AccordionTrigger>
                        <AccordionContent className="pb-5 font-body text-sm leading-relaxed text-foreground/68">
                          {faq.a}
                        </AccordionContent>
                      </AccordionItem>
                    ))}
                  </Accordion>
                </div>
              </div>
            </ScrollReveal>
          </div>
        </section>

        <section className="relative overflow-hidden bg-teal py-16 text-white lg:py-24">
          <img
            src="/images/applicateur-blobs.svg"
            alt=""
            aria-hidden="true"
            className="pointer-events-none absolute -right-[12%] -top-[54%] w-[54%] select-none opacity-18"
          />
          <div className="container relative mx-auto px-4 text-center lg:px-8">
            <ScrollReveal>
              <h2 className="mx-auto max-w-3xl font-satoshi text-3xl font-black leading-tight text-white sm:text-4xl lg:text-5xl">
                {ctaTitre}
              </h2>
              <p className="mx-auto mt-4 max-w-2xl font-body text-base text-white/72 lg:text-lg">
                {ctaTexte}
              </p>
              <div className="mt-8 flex flex-col items-stretch justify-center gap-3 sm:flex-row sm:items-center">
                <PrimaryCTA href={ctaHref}>{ctaLabel}</PrimaryCTA>
                <SecondaryCTA href={ctaSecondaireHref} light>
                  {ctaSecondaireLabel}
                </SecondaryCTA>
              </div>
              <ul className="mx-auto mt-9 flex max-w-3xl flex-col items-center justify-center gap-3 font-body text-sm text-white/72 sm:flex-row">
                {ctaReassurances.map((item, index) => (
                  <Fragment key={item}>
                    <li>{item}</li>
                    {index < ctaReassurances.length - 1 && (
                      <li className="hidden h-1 w-1 rounded-full bg-white/35 sm:block" />
                    )}
                  </Fragment>
                ))}
              </ul>
            </ScrollReveal>
          </div>
        </section>

        <section className="bg-white py-16 lg:py-24">
          <div className="container mx-auto px-4 lg:px-8">
            <ScrollReveal>
              <article className="prose prose-slate mx-auto max-w-4xl rounded-lg bg-cream/70 p-6 ring-1 ring-border lg:p-10 prose-headings:font-satoshi prose-h2:text-3xl prose-h2:font-black prose-h2:leading-tight prose-h2:text-foreground prose-h3:text-xl prose-h3:font-bold prose-h3:text-foreground prose-p:font-body prose-p:text-base prose-p:leading-relaxed prose-p:text-foreground/68 prose-strong:font-bold prose-strong:text-foreground prose-li:font-body prose-li:text-foreground/68 prose-a:text-primary">
                <h2>{seoTitre}</h2>
                <p>{seoIntroTexte}</p>
                {seoBlocs.map((bloc) => (
                  <Fragment key={bloc.titre}>
                    <h3>{bloc.titre}</h3>
                    <p>{bloc.texte}</p>
                  </Fragment>
                ))}
                <h3>Sources</h3>
                <ul>
                  {seoSources.map((source) => (
                    <li key={source.url}>
                      <a href={source.url} target="_blank" rel="noreferrer">
                        {source.label}
                      </a>
                    </li>
                  ))}
                </ul>
              </article>
            </ScrollReveal>
          </div>
        </section>
      </main>
      <Footer />
      <StickyMobileCTA label="Estimer ma prime" href="#estimation-prime" />
    </>
  );
};

export default PrimeCEECoolRoof;
