"use client";

import { useState } from 'react';
import {
  ArrowRight,
  BadgeCheck,
  Building2,
  CalendarCheck,
  CalendarClock,
  Check,
  CheckCircle2,
  ClipboardCheck,
  HelpCircle,
  Play,
  Shield,
  Thermometer,
  TrendingDown,
  UsersRound,
  X,
  type LucideIcon,
} from 'lucide-react';
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion';
import { Dialog, DialogContent } from '@/components/ui/dialog';
import ScrollReveal from '@/components/ScrollReveal';
import SectorReferenceHighlights from '@/components/SectorReferenceHighlights';
import WpImage from '@/components/ui/WpImage';
import type { ReferenceSector, ReferenceSectorSlug } from '@/data/references';
import classicRoofImage from '@/assets/industrie/logistique-solution-classic.webp';
import coolRoofImage from '@/assets/industrie/logistique-solution-coolroof.webp';

// config.*.image sont des URL string (public /images via toSectorConfig, ou
// .src d'un import webp local en fallback). On les enveloppe en objet WpImage
// (dimensions inconnues -> mode fill, déjà utilisé pour ces fonds object-cover).
const toFillImage = (src: string, alt = '') => ({
  sourceUrl: src,
  altText: alt,
  width: null,
  height: null,
});

type Logo = {
  name: string;
  url?: string;
};

type HeroStat = {
  icon: LucideIcon;
  value: string;
  label: string;
};

type Problem = {
  icon: LucideIcon;
  title: string;
  desc: string;
  image: string;
  alt: string;
};

type Benefit = {
  icon: LucideIcon;
  title: string;
  desc: string;
};

type Application = {
  icon: LucideIcon;
  label: string;
  title: string;
  desc: string;
  image: string;
};

type Figure = {
  icon: LucideIcon;
  value: string;
  label: string;
};

type CaseProof = {
  name: string;
  desc: string;
};

const referenceFilterBySectorSlug: Partial<Record<string, ReferenceSector>> = {
  industrie: 'Industrie',
  distribution: 'Distribution',
  logistique: 'Logistique',
  tertiaire: 'Tertiaire',
  collectivites: 'Collectivites',
  agricole: 'Agricole',
  erp: 'ERP',
};

type Faq = {
  q: string;
  a: string;
};

type SeoSection = {
  title: string;
  body: string;
};

type SpecialSection =
  | {
      kind: 'decret';
      eyebrow: string;
      title: string;
      intro: string;
      milestones: Array<{ value: string; label: string }>;
      points: string[];
      note: string;
      cta: string;
    }
  | {
      kind: 'funding';
      eyebrow: string;
      title: string;
      intro: string;
      points: Array<{ value: string; label: string }>;
      note: string;
      cta: string;
    };

export type SectorPageConfig = {
  slug: string;
  title: string;
  description: string;
  canonicalPath: string;
  serviceName: string;
  serviceDescription: string;
  audience: string;
  reassurance?: string[];
  hero: {
    eyebrow: string;
    h1: string;
    sub: string;
    image: string;
    imageAlt: string;
    stats: HeroStat[];
    formTitle: string;
    formSubtitle: string;
    formFields: {
      typeLabel: string;
      typeOptions: string[];
      climateLabel: string;
      climateOptions: string[];
      yearLabel: string;
      microcopy: string;
      cta: string;
    };
  };
  logos: {
    title: string;
    items: Logo[];
  };
  problem: {
    eyebrow: string;
    title: string;
    mutedTitle: string;
    intro: string;
    transition: string;
    cards: Problem[];
  };
  solution: {
    eyebrow: string;
    title: string;
    mutedTitle: string;
    intro: string;
    points: string[];
    transition: string;
    beforeImage?: string;
    afterImage?: string;
  };
  durability: {
    title: string;
    mutedTitle?: string;
    intro: string;
    note: string;
    covalbaLabel: string;
  };
  special: SpecialSection;
  benefits: {
    eyebrow: string;
    title: string;
    desc: string;
    metric: string;
    metricLabel: string;
    image: string;
    imageAlt: string;
    cards: Benefit[];
    transition: string;
  };
  applications: {
    eyebrow: string;
    title: string;
    intro: string;
    cards: Application[];
    transition: string;
  };
  method: {
    eyebrow: string;
    title: string;
    mutedTitle: string;
    intro: string;
    steps: Array<{ title: string; text: string }>;
    duration: string;
  };
  proof: {
    eyebrow: string;
    title: string;
    mutedTitle: string;
    intro: string;
    figures: Figure[];
    cases?: CaseProof[];
    logos: Logo[];
    transition: string;
  };
  faq: {
    intro: string;
    items: Faq[];
  };
  finalCta: {
    eyebrow: string;
    title: string;
    desc: string;
    reassurances: string[];
  };
  seo: {
    eyebrow: string;
    title: string;
    intro: string;
    sections: SeoSection[];
    sources: string[];
  };
};

const ReassuranceBand = ({ items }: { items?: string[] }) => {
  if (!items?.length) return null;

  return (
    <section className="border-y border-foreground/[0.06] bg-white py-4">
      <div className="container mx-auto px-4 lg:px-8">
        <ul className="flex flex-col items-start justify-center gap-3 font-body text-sm font-semibold text-foreground/62 sm:flex-row sm:flex-wrap sm:items-center sm:gap-x-6 sm:gap-y-2">
          {items.map((item) => (
            <li key={item} className="flex items-center gap-2.5">
              <CheckCircle2 className="h-4 w-4 shrink-0 text-teal-vivid" strokeWidth={1.8} />
              <span>{item}</span>
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
};

const inputClass =
  'w-full rounded-xl border border-white/[0.12] bg-white/[0.07] px-4 py-3 font-body text-sm text-white placeholder:text-white/40 transition-all duration-300 focus:border-white/25 focus:outline-none focus:ring-2 focus:ring-primary/50';

const selectClass =
  'w-full appearance-none rounded-xl border border-white/[0.12] bg-white/[0.07] px-4 py-3 font-body text-sm text-white transition-all duration-300 focus:border-white/25 focus:outline-none focus:ring-2 focus:ring-primary/50';

const lightFieldClass =
  'w-full rounded-xl border border-foreground/10 bg-white px-4 py-3 font-body text-sm text-foreground outline-none transition-all focus:border-teal-vivid/40 focus:ring-2 focus:ring-teal-vivid/15';

const SectorHero = ({ config }: { config: SectorPageConfig }) => {
  const [form, setForm] = useState({ type: '', climate: '', surface: '', year: '', email: '' });
  const [submitted, setSubmitted] = useState(false);
  const surfaceNum = parseFloat(form.surface) || 0;
  const estimMin = surfaceNum * 18;
  const estimMax = surfaceNum * 25;
  const fmt = (n: number) => new Intl.NumberFormat('fr-FR').format(n);

  return (
    <section
      aria-labelledby={`${config.slug}-hero-title`}
      className="relative isolate flex min-h-[100svh] flex-col overflow-hidden bg-navy text-cream"
    >
      <WpImage
        image={toFillImage(config.hero.image, config.hero.imageAlt)}
        fill
        priority
        sizes="100vw"
        className="absolute inset-0 -z-10 size-full scale-[1.02] object-cover"
      />
      <div
        aria-hidden="true"
        className="absolute inset-0 -z-10 hidden bg-gradient-to-r from-navy/[0.92] via-navy/55 to-navy/25 lg:block"
      />
      <div
        aria-hidden="true"
        className="absolute inset-0 -z-10 bg-gradient-to-b from-navy/80 via-navy/22 to-navy/95 lg:hidden"
      />
      <div
        aria-hidden="true"
        className="absolute inset-x-0 bottom-0 -z-10 h-[28%] bg-gradient-to-t from-navy via-navy/85 to-transparent"
      />

      <div className="container relative z-10 mx-auto flex flex-1 items-center px-6 pb-10 pt-24 lg:px-12 lg:pb-16 lg:pt-28">
        <div className="grid w-full grid-cols-1 items-center gap-10 lg:grid-cols-[55fr_45fr] lg:gap-12">
          <div className="max-w-2xl space-y-6 lg:space-y-8">
            {config.hero.eyebrow && (
              <div className="flex 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">
                  {config.hero.eyebrow}
                </span>
              </div>
            )}

            <h1
              id={`${config.slug}-hero-title`}
              className="font-satoshi font-bold leading-[1.02] text-white"
              style={{ fontSize: 'clamp(2.25rem, 4.6vw, 4rem)', letterSpacing: '-0.03em' }}
            >
              {config.hero.h1}
            </h1>

            <p
              className="max-w-xl font-satoshi font-medium leading-[1.3] text-cream/65"
              style={{ fontSize: 'clamp(1rem, 1.5vw, 1.375rem)', letterSpacing: '-0.005em' }}
            >
              {config.hero.sub}
            </p>

            <ul className="hidden gap-4 pt-1 sm:flex sm:flex-wrap lg:gap-6" aria-label="Bénéfices clés">
              {config.hero.stats.map((stat, index) => {
                const Icon = stat.icon;
                return (
                  <li
                    key={stat.label}
                    className={`flex items-start gap-3 ${
                      index !== 0 ? 'sm:border-l sm:border-white/10 sm:pl-6' : ''
                    }`}
                  >
                    <Icon className="mt-0.5 h-[18px] w-[18px] shrink-0 text-teal-vivid" strokeWidth={1.5} />
                    <div className="leading-tight">
                      <p className="font-satoshi text-[15px] font-bold text-white lg:text-base">{stat.value}</p>
                      <p className="mt-1 font-body text-[12.5px] text-cream/55 lg:text-[13px]">{stat.label}</p>
                    </div>
                  </li>
                );
              })}
            </ul>
          </div>

          <div className="animate-hero-stats">
            <div className="rounded-[1.5rem] border border-white/[0.08] bg-white/[0.04] p-1.5 backdrop-blur-sm">
              <div className="rounded-[calc(1.5rem-6px)] border border-white/[0.06] bg-[#0b1a2b]/80 p-4 shadow-[inset_0_1px_1px_rgba(255,255,255,0.06)] backdrop-blur-xl lg:p-7">
                {!submitted ? (
                  <>
                    <h2 className="mb-1 text-center font-satoshi text-xl font-bold text-white lg:text-2xl">
                      {config.hero.formTitle}
                    </h2>
                    <p className="mb-4 text-center font-body text-[12px] text-white/50">
                      {config.hero.formSubtitle}
                    </p>
                    <form
                      onSubmit={(event) => {
                        event.preventDefault();
                        setSubmitted(true);
                      }}
                      className="space-y-2.5 lg:space-y-3"
                    >
                      <select
                        required
                        value={form.type}
                        onChange={(e) => setForm({ ...form, type: e.target.value })}
                        className={selectClass}
                      >
                        <option value="" disabled className="bg-card text-foreground">
                          {config.hero.formFields.typeLabel}
                        </option>
                        {config.hero.formFields.typeOptions.map((option) => (
                          <option key={option} value={option} className="bg-card text-foreground">
                            {option}
                          </option>
                        ))}
                      </select>
                      <select
                        required
                        value={form.climate}
                        onChange={(e) => setForm({ ...form, climate: e.target.value })}
                        className={selectClass}
                      >
                        <option value="" disabled className="bg-card text-foreground">
                          {config.hero.formFields.climateLabel}
                        </option>
                        {config.hero.formFields.climateOptions.map((option) => (
                          <option key={option} value={option} className="bg-card text-foreground">
                            {option}
                          </option>
                        ))}
                      </select>
                      <input
                        type="number"
                        placeholder="Surface toiture (m²)"
                        required
                        min="1"
                        value={form.surface}
                        onChange={(e) => setForm({ ...form, surface: e.target.value })}
                        className={inputClass}
                      />
                      <input
                        type="number"
                        placeholder={config.hero.formFields.yearLabel}
                        required
                        min="1900"
                        value={form.year}
                        onChange={(e) => setForm({ ...form, year: e.target.value })}
                        className={inputClass}
                      />
                      <input
                        type="email"
                        placeholder="Email professionnel"
                        required
                        value={form.email}
                        onChange={(e) => setForm({ ...form, email: e.target.value })}
                        className={inputClass}
                      />

                      <button
                        type="submit"
                        className="group mt-1 flex w-full items-center justify-center gap-3 rounded-full cta-gradient py-3 font-semibold text-white active:scale-[0.98]"
                      >
                        <span className="text-[15px]">{config.hero.formFields.cta}</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-4 w-4" />
                        </span>
                      </button>
                    </form>

                    <p className="mt-3 text-center font-body text-[11px] text-white/35">
                      {config.hero.formFields.microcopy}
                    </p>
                  </>
                ) : (
                  <div className="py-4 text-center">
                    <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-primary/20">
                      <Shield className="h-6 w-6 text-primary" />
                    </div>
                    <p className="mb-1 font-body text-sm text-white/60">Budget indicatif pour {fmt(surfaceNum)} m²</p>
                    <p className="mb-4 font-satoshi text-2xl font-bold text-white">
                      {fmt(estimMin)}€ - {fmt(estimMax)}€
                    </p>
                    <p className="mb-4 font-body text-[13px] text-white/50">
                      Un conseiller vous contacte sous 24h avec un chiffrage détaillé.
                    </p>
                    <button
                      onClick={() => setSubmitted(false)}
                      className="font-body text-sm font-semibold text-primary hover:underline"
                    >
                      Modifier ma demande
                    </button>
                  </div>
                )}
              </div>
            </div>
          </div>
        </div>
      </div>

      <div className="relative z-10 mt-auto hidden lg:block">
        <div className="border-t border-white/10 bg-navy/78 py-5 backdrop-blur-md">
          <p className="mb-3 text-center font-body text-[10px] font-semibold uppercase tracking-[0.2em] text-white/35">
            {config.logos.title}
          </p>
          <div className="mx-auto flex max-w-6xl flex-nowrap items-center justify-center gap-x-8 px-8 xl:gap-x-12">
            {config.logos.items.map((logo) =>
              logo.url ? (
                <span key={logo.name} className="flex h-8 w-28 items-center justify-center">
                  <img
                    src={logo.url}
                    alt={logo.name}
                    className="max-h-7 max-w-full object-contain opacity-45 transition-opacity duration-300 hover:opacity-75"
                    style={{ filter: 'brightness(0) invert(1)' }}
                    loading="lazy"
                    decoding="async"
                  />
                </span>
              ) : (
                <span key={logo.name} className="flex h-8 w-28 items-center justify-center whitespace-nowrap font-satoshi text-base font-bold text-white/50 xl:text-lg">
                  {logo.name}
                </span>
              )
            )}
          </div>
        </div>
      </div>
    </section>
  );
};

const ProblemSection = ({ config }: { config: SectorPageConfig }) => (
  <section className="relative overflow-hidden bg-cream py-20 lg:py-32">
    <div className="container mx-auto px-4 lg:px-8">
      <div className="mb-10 grid grid-cols-1 items-end gap-8 lg:mb-16 lg:grid-cols-[1.05fr_0.95fr] lg:gap-20">
        <div className="space-y-6 lg:space-y-9">
          <ScrollReveal>
            <div className="flex items-center gap-3">
              <span className="h-px w-9 bg-terracotta/70" aria-hidden="true" />
              <span className="font-body text-[11px] font-bold uppercase tracking-[0.22em] text-terracotta-dark">
                {config.problem.eyebrow}
              </span>
            </div>
          </ScrollReveal>
          <ScrollReveal>
            <h2
              className="font-satoshi font-bold text-foreground !leading-[1.05]"
              style={{ fontSize: 'clamp(1.875rem, 3.6vw, 2.875rem)', letterSpacing: '-0.025em' }}
            >
              {config.problem.title}
              <br />
              <span className="text-foreground/40">{config.problem.mutedTitle}</span>
            </h2>
          </ScrollReveal>
        </div>
        <ScrollReveal>
          <p className="max-w-[560px] font-body text-base leading-relaxed text-foreground/65 lg:ml-auto lg:text-[16px]">
            {config.problem.intro}
          </p>
        </ScrollReveal>
      </div>

      <ScrollReveal stagger>
        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4 lg:gap-5 xl:gap-6">
          {config.problem.cards.map((problem) => {
            const Icon = problem.icon;
            return (
              <article
                key={problem.title}
                className="group overflow-hidden rounded-2xl bg-white shadow-[0_18px_45px_-34px_hsl(var(--navy)/0.28)] ring-1 ring-foreground/[0.05]"
              >
                <div className="relative aspect-[4/3] overflow-hidden bg-foreground/[0.04]">
                  <WpImage
                    image={toFillImage(problem.image, problem.alt)}
                    fill
                    sizes="(min-width: 1024px) 25vw, (min-width: 640px) 50vw, 100vw"
                    className="size-full object-cover"
                  />
                  <div aria-hidden="true" className="absolute inset-x-0 bottom-0 h-1/2 bg-gradient-to-t from-navy/45 to-transparent" />
                  <span className="absolute left-4 top-4 flex h-10 w-10 items-center justify-center rounded-full bg-cream/90 text-terracotta-dark shadow-sm">
                    <Icon className="h-5 w-5" strokeWidth={1.7} />
                  </span>
                </div>
                <div className="px-6 py-7 lg:px-6 lg:py-8">
                  <h3 className="mb-3 font-satoshi text-[18px] font-bold !leading-tight text-foreground lg:text-[19px]">
                    {problem.title}
                  </h3>
                  <p className="font-body text-[14px] leading-relaxed text-foreground/62 lg:text-[14.5px]">
                    {problem.desc}
                  </p>
                </div>
              </article>
            );
          })}
        </div>
      </ScrollReveal>

      <ScrollReveal>
        {config.problem.transition && (
          <p className="mx-auto mt-10 max-w-3xl border-t border-foreground/10 pt-6 text-center font-body text-sm leading-relaxed text-foreground/58 lg:mt-14 lg:text-base">
            {config.problem.transition}
          </p>
        )}
      </ScrollReveal>
    </div>
  </section>
);

const SolutionSection = ({ config }: { config: SectorPageConfig }) => (
  <section className="relative overflow-hidden bg-[#142333] py-20 text-white lg:py-32">
    <div
      aria-hidden="true"
      className="absolute inset-0 opacity-[0.55]"
      style={{ backgroundImage: 'linear-gradient(115deg, rgba(255,255,255,0.055) 0 1px, transparent 1px 120px)' }}
    />
    <div className="container relative mx-auto px-4 lg:px-8">
      <ScrollReveal>
        <div className="mx-auto mb-12 grid max-w-6xl grid-cols-1 items-end gap-8 lg:mb-16 lg:grid-cols-[0.88fr_1.12fr] lg:gap-16">
          <div>
            <div className="mb-6 inline-flex items-center gap-3">
              <span className="h-px w-8 bg-teal-vivid/70" aria-hidden="true" />
              <span className="font-body text-[11px] font-bold uppercase tracking-[0.22em] text-teal-vivid">
                {config.solution.eyebrow}
              </span>
            </div>
            <h2
              className="font-satoshi font-bold !leading-[1.04] text-white"
              style={{ fontSize: 'clamp(2rem, 3.4vw, 3rem)', letterSpacing: '-0.03em' }}
            >
              {config.solution.title}
              <br />
              <span className="text-white/45">{config.solution.mutedTitle}</span>
            </h2>
          </div>
          <p className="max-w-2xl font-body text-base leading-relaxed text-white/74 lg:text-[17px]">
            {config.solution.intro}
          </p>
        </div>
      </ScrollReveal>

      <div className="grid grid-cols-1 gap-5 md:grid-cols-2 lg:gap-6">
        {[
          {
            title: 'Toiture classique',
            image: config.solution.beforeImage ?? classicRoofImage.src,
            metric: "jusqu'à 80°C",
            metricLabel: 'en surface',
            points: ['Surface sombre', 'Absorbe la chaleur', 'Alourdit la climatisation'],
            cool: false,
          },
          {
            title: 'Toiture cool roof',
            image: config.solution.afterImage ?? coolRoofImage.src,
            metric: "jusqu'à 90%",
            metricLabel: 'du rayonnement réfléchi',
            points: ['Surface claire', 'Reste plus fraîche', 'Réduit la charge thermique'],
            cool: true,
          },
        ].map((item) => (
          <article key={item.title} className="overflow-hidden rounded-2xl border border-white/10 bg-white/[0.045]">
            <div className="relative aspect-[1.1] overflow-hidden bg-[#0f1d2a] md:aspect-[1.18]">
              <WpImage
                image={toFillImage(item.image, item.title)}
                fill
                sizes="(min-width: 768px) 50vw, 100vw"
                className="size-full object-cover"
              />
              <div aria-hidden="true" className="absolute inset-x-0 bottom-0 h-2/3 bg-gradient-to-t from-[#142333] via-[#142333]/20 to-transparent" />
            </div>
            <div className="p-5 lg:p-7">
              <div className="mb-6 flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
                <h3 className="font-satoshi text-xl font-bold !leading-tight text-white lg:text-2xl">
                  {item.title}
                </h3>
                <div className={`shrink-0 rounded-xl border px-4 py-3 ${item.cool ? 'border-teal-vivid/18 bg-teal-vivid/10 text-teal-vivid' : 'border-terracotta/18 bg-terracotta/12 text-[#f0a084]'}`}>
                  <span className="block font-satoshi text-2xl font-bold leading-none lg:text-3xl">{item.metric}</span>
                  <span className="mt-1 block font-body text-[10px] font-bold uppercase tracking-[0.14em] opacity-75">
                    {item.metricLabel}
                  </span>
                </div>
              </div>
              <ul className="grid gap-2.5">
                {item.points.map((point) => (
                  <li key={point} className="flex items-start gap-2.5">
                    <CheckCircle2 className={`mt-0.5 h-4 w-4 shrink-0 ${item.cool ? 'text-teal-vivid' : 'text-[#f0a084]'}`} strokeWidth={2} />
                    <span className="font-body text-sm leading-relaxed text-white/66">{point}</span>
                  </li>
                ))}
              </ul>
            </div>
          </article>
        ))}
      </div>

      {(config.solution.points.length > 0 || config.solution.transition) && (
        <ScrollReveal>
          <div className="mx-auto mt-10 max-w-6xl lg:mt-14">
            {config.solution.points.length > 0 && (
              <ul className="grid grid-cols-1 gap-3 md:grid-cols-4">
                {config.solution.points.map((point) => (
                  <li key={point} className="flex items-center gap-3 rounded-xl border border-white/10 bg-white/[0.055] px-5 py-4">
                    <span className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-teal-vivid/12">
                      <Check className="h-4 w-4 text-teal-vivid" strokeWidth={1.8} />
                    </span>
                    <span className="font-body text-sm font-semibold leading-snug text-white/78">{point}</span>
                  </li>
                ))}
              </ul>
            )}
            {config.solution.transition && (
              <p className="mx-auto mt-8 max-w-2xl text-center font-body text-sm leading-relaxed text-white/52">
                {config.solution.transition}
              </p>
            )}
          </div>
        </ScrollReveal>
      )}
    </div>
  </section>
);

const DurabilitySection = ({ config }: { config: SectorPageConfig }) => (
  <section className="relative overflow-hidden bg-[#F6FAFB] py-16 lg:py-28">
    <div className="container mx-auto px-4 lg:px-8">
      <ScrollReveal>
        <div className="mx-auto mb-12 max-w-2xl text-center lg:mb-16">
          <p className="mb-5 font-body text-[10px] font-semibold uppercase tracking-[0.25em] text-primary/55">
            Durabilité
          </p>
          <h2
            className="mb-5 font-satoshi font-bold text-foreground !leading-[1.05]"
            style={{ fontSize: 'clamp(2rem, 3.2vw, 2.85rem)', letterSpacing: '-0.03em' }}
          >
            {config.durability.title}
            {config.durability.mutedTitle && (
              <>
                <br />
                <span className="text-foreground/35">{config.durability.mutedTitle}</span>
              </>
            )}
          </h2>
          <p className="font-body text-base leading-relaxed text-foreground/62 lg:text-[17px]">
            {config.durability.intro}
          </p>
        </div>
      </ScrollReveal>

      <ScrollReveal>
        <div className="mx-auto grid max-w-5xl grid-cols-1 items-stretch gap-5 lg:grid-cols-2 lg:gap-0">
          {[
            {
              title: 'Revêtement acrylique standard',
              subtitle: 'Prix bas à la pose',
              price: '~10 €',
              life: '2-5 ans',
              realCost: '25-30 €',
              covalba: false,
              points: ['Réflectivité qui baisse vite', 'Farinage et jaunissement', 'Réapplication plus fréquente'],
            },
            {
              title: 'Système polyuréthane Covalba',
              subtitle: config.durability.covalbaLabel,
              price: '18-20 €',
              life: '8-10 ans',
              realCost: '18-20 €',
              covalba: true,
              points: ['Résine polyuréthane durable', 'Vernis de finition anti-UV', 'Réflectivité conservée plus longtemps'],
            },
          ].map((option) => (
            <article
              key={option.title}
              className={`relative rounded-2xl px-7 py-9 shadow-[0_20px_60px_rgba(26,42,58,0.08)] lg:px-10 lg:py-12 ${
                option.covalba ? 'z-10 bg-foreground text-white lg:-ml-5 lg:scale-[1.03]' : 'bg-white text-foreground lg:scale-[0.97] lg:opacity-90'
              }`}
            >
              {option.covalba && (
                <span className="absolute -top-4 left-1/2 inline-flex -translate-x-1/2 items-center rounded-full bg-teal-vivid px-4 py-2 font-body text-[11px] font-bold uppercase tracking-[0.15em] text-white">
                  Le choix durable
                </span>
              )}
              <h3 className="mb-2 font-satoshi text-2xl font-bold leading-tight lg:text-[1.7rem]">{option.title}</h3>
              <p className={`mb-8 font-body text-sm ${option.covalba ? 'text-white/52' : 'text-foreground/50'}`}>
                {option.subtitle}
              </p>
              <div className="mb-8 grid grid-cols-3 gap-4">
                {[
                  ['Prix au m²', option.price],
                  ['Tenue', option.life],
                  ['10 ans', option.realCost],
                ].map(([label, value]) => (
                  <div key={label}>
                    <p className={`mb-1 font-body text-[10px] uppercase tracking-widest ${option.covalba ? 'text-white/42' : 'text-foreground/38'}`}>
                      {label}
                    </p>
                    <p className={`font-satoshi text-2xl font-bold leading-none lg:text-3xl ${label === '10 ans' ? (option.covalba ? 'text-teal-vivid' : 'text-terracotta') : ''}`}>
                      {value}
                    </p>
                  </div>
                ))}
              </div>
              <ul className="space-y-3 border-t border-current/10 pt-7">
                {option.points.map((point) => {
                  const Icon = option.covalba ? Check : X;
                  return (
                    <li key={point} className="flex items-start gap-2.5">
                      <Icon className={`mt-0.5 h-4 w-4 shrink-0 ${option.covalba ? 'text-teal-vivid' : 'text-terracotta/70'}`} />
                      <span className={`font-body text-sm leading-relaxed ${option.covalba ? 'text-white/70' : 'text-foreground/60'}`}>
                        {point}
                      </span>
                    </li>
                  );
                })}
              </ul>
            </article>
          ))}
        </div>
      </ScrollReveal>

      <ScrollReveal>
        <p className="mx-auto mt-10 max-w-3xl text-center font-body text-sm leading-relaxed text-foreground/55 lg:text-[15px]">
          {config.durability.note}
        </p>
      </ScrollReveal>
    </div>
  </section>
);

const SpecialSection = ({ config }: { config: SectorPageConfig }) => {
  const [submitted, setSubmitted] = useState(false);
  const isFunding = config.special.kind === 'funding';

  return (
    <section className="relative overflow-hidden bg-white py-16 lg:py-28">
      <div className="container mx-auto px-4 lg:px-8">
        <ScrollReveal>
          <div className="mx-auto mb-10 grid max-w-6xl grid-cols-1 items-end gap-7 lg:mb-14 lg:grid-cols-[0.9fr_1.1fr] lg:gap-16">
            <div>
              <div className="mb-5 flex items-center gap-3">
                <span className="h-px w-10 bg-teal-vivid" aria-hidden="true" />
                <span className="font-body text-[11px] font-bold uppercase tracking-[0.22em] text-teal-vivid">
                  {config.special.eyebrow}
                </span>
              </div>
              <h2
                className="font-satoshi font-bold !leading-[1.04] text-foreground"
                style={{ fontSize: 'clamp(1.95rem, 3vw, 2.75rem)', letterSpacing: '-0.03em' }}
              >
                {config.special.title}
              </h2>
            </div>
            <p className="max-w-2xl font-body text-base leading-relaxed text-foreground/68 lg:text-[16px]">
              {config.special.intro}
            </p>
          </div>
        </ScrollReveal>

        <div className="mx-auto grid max-w-6xl grid-cols-1 gap-5 lg:grid-cols-[0.82fr_1.18fr] lg:gap-7">
          <ScrollReveal>
            <div className="h-full rounded-2xl bg-cream/70 p-6 ring-1 ring-foreground/[0.06] lg:p-7">
              {!submitted ? (
                <>
                  <h3 className="mb-5 font-satoshi text-xl font-bold leading-tight text-foreground">
                    {isFunding ? 'Vérifier mon éligibilité' : 'Estimer mon gain'}
                  </h3>
                  <form
                    className="grid gap-3"
                    onSubmit={(event) => {
                      event.preventDefault();
                      setSubmitted(true);
                    }}
                  >
                    <select required className={lightFieldClass} defaultValue="">
                      <option value="" disabled>
                        Type de bâtiment
                      </option>
                      {config.hero.formFields.typeOptions.map((option) => (
                        <option key={option}>{option}</option>
                      ))}
                    </select>
                    <input required min="1" type="number" className={lightFieldClass} placeholder="Surface toiture (m²)" />
                    <input required type="email" className={lightFieldClass} placeholder="Email professionnel" />
                    <button className="group mt-1 inline-flex items-center justify-center gap-2 rounded-full bg-teal-vivid py-2.5 pl-6 pr-2 font-semibold text-white">
                      <span className="text-sm">{config.special.cta}</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>
                    </button>
                  </form>
                </>
              ) : (
                <div className="flex min-h-[260px] flex-col items-center justify-center text-center">
                  <CheckCircle2 className="mb-4 h-12 w-12 text-teal-vivid" strokeWidth={1.7} />
                  <h3 className="mb-3 font-satoshi text-2xl font-bold text-foreground">Demande reçue.</h3>
                  <p className="max-w-sm font-body text-sm leading-relaxed text-foreground/62">
                    Covalba revient vers vous avec une réponse personnalisée.
                  </p>
                </div>
              )}
            </div>
          </ScrollReveal>

          <ScrollReveal>
            <div className="rounded-2xl bg-foreground p-6 text-white lg:p-8">
              {config.special.kind === 'decret' ? (
                <div className="grid gap-4 sm:grid-cols-3">
                  {config.special.milestones.map((milestone) => (
                    <div key={milestone.value} className="rounded-xl border border-white/10 bg-white/[0.04] p-5">
                      <p className="font-satoshi text-4xl font-bold leading-none text-teal-vivid">{milestone.value}</p>
                      <p className="mt-3 font-body text-sm text-white/62">{milestone.label}</p>
                    </div>
                  ))}
                </div>
              ) : (
                <div className="grid gap-4 sm:grid-cols-2">
                  {config.special.points.map((point) => (
                    <div key={point.label} className="rounded-xl border border-white/10 bg-white/[0.04] p-5">
                      <p className="font-satoshi text-3xl font-bold leading-none text-teal-vivid">{point.value}</p>
                      <p className="mt-3 font-body text-sm text-white/62">{point.label}</p>
                    </div>
                  ))}
                </div>
              )}
              {config.special.kind === 'decret' && (
                <div className="mt-6 grid gap-3">
                  {config.special.points.map((point) => (
                    <div key={point} className="flex items-start gap-3">
                      <CheckCircle2 className="mt-0.5 h-4 w-4 shrink-0 text-teal-vivid" />
                      <span className="font-body text-sm leading-relaxed text-white/68">{point}</span>
                    </div>
                  ))}
                </div>
              )}
            </div>
            <p className="mt-5 rounded-2xl bg-cream/70 p-5 font-body text-xs leading-relaxed text-foreground/58 lg:text-[13px]">
              {config.special.note}
            </p>
          </ScrollReveal>
        </div>
      </div>
    </section>
  );
};

const BenefitsSection = ({ config }: { config: SectorPageConfig }) => (
  <>
    <section className="relative overflow-hidden bg-cream pb-12 pt-16 lg:min-h-[640px] lg:pb-8 lg:pt-20">
      <figure className="absolute right-0 top-0 hidden h-full min-h-[640px] w-[58vw] overflow-hidden lg:block">
        <WpImage
          image={toFillImage(config.benefits.image)}
          alt=""
          fill
          sizes="58vw"
          className="size-full object-cover"
        />
        <div aria-hidden="true" className="absolute inset-y-0 left-0 w-[56%] bg-gradient-to-r from-cream via-cream/88 to-transparent" />
      </figure>
      <div className="container relative z-10 mx-auto px-4 lg:px-8">
        <ScrollReveal>
          <div className="max-w-[760px]">
            <div className="mb-5 flex items-center gap-3 lg:mb-7">
              <span className="h-px w-10 bg-primary/70" aria-hidden="true" />
              <span className="font-body text-[11px] font-bold uppercase tracking-[0.22em] text-primary">
                {config.benefits.eyebrow}
              </span>
            </div>
            <h2
              className="mb-6 font-satoshi font-bold !leading-[1.04] text-foreground"
              style={{ fontSize: 'clamp(2.15rem, 3vw, 3rem)' }}
            >
              {config.benefits.title}
            </h2>
            <p className="max-w-[540px] font-body text-base leading-relaxed text-foreground/72 lg:text-[16px]">
              {config.benefits.desc}
            </p>
            <div className="relative z-10 mt-7 max-w-[540px] rounded-2xl bg-white/96 p-6 shadow-[0_22px_70px_-45px_hsl(var(--navy)/0.35)] ring-1 ring-foreground/[0.05]">
              <div className="grid grid-cols-[48px_minmax(0,1fr)] items-center gap-5">
                <Thermometer className="h-12 w-12 text-primary" strokeWidth={1.55} />
                <div>
                  <p className="mb-3 font-body text-[11px] font-bold uppercase tracking-[0.22em] text-primary">
                    Dès le premier été
                  </p>
                  <p className="font-satoshi text-[3.1rem] font-bold leading-[0.88] text-primary">{config.benefits.metric}</p>
                  <p className="mt-2 font-satoshi text-xl font-bold leading-tight text-foreground">{config.benefits.metricLabel}</p>
                </div>
              </div>
            </div>
          </div>
        </ScrollReveal>
      </div>
    </section>

    <section className="relative overflow-hidden bg-white py-14">
      <div className="container relative mx-auto px-4 lg:px-8">
        <ScrollReveal stagger>
          <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-5 lg:gap-4">
            {config.benefits.cards.map((benefit, index) => {
              const Icon = benefit.icon;
              return (
                <article key={benefit.title} className="min-h-[184px] rounded-2xl bg-cream/65 p-5 ring-1 ring-foreground/[0.05] lg:p-6">
                  <div className="mb-7 flex h-11 w-11 items-center justify-center rounded-xl bg-white text-primary">
                    <Icon className="h-5 w-5" strokeWidth={1.55} />
                  </div>
                  <span className="mb-3 block font-body text-[11px] font-bold uppercase tracking-[0.18em] text-primary/70">
                    0{index + 1}
                  </span>
                  <h3 className="font-satoshi text-lg font-bold leading-tight text-foreground lg:text-[19px]">{benefit.title}</h3>
                  <p className="mt-2 font-body text-sm leading-snug text-foreground/62">{benefit.desc}</p>
                </article>
              );
            })}
          </div>
        </ScrollReveal>
        <p className="mx-auto mt-10 max-w-2xl text-center font-body text-sm leading-relaxed text-foreground/54">
          {config.benefits.transition}
        </p>
      </div>
    </section>
  </>
);

const ApplicationsSection = ({ config }: { config: SectorPageConfig }) => (
  <section className="relative overflow-hidden bg-cream py-16 lg:py-24">
    <div className="container relative mx-auto px-4 lg:px-8">
      <ScrollReveal>
        <div className="mx-auto mb-10 grid max-w-6xl grid-cols-1 gap-6 lg:mb-12 lg:grid-cols-[0.9fr_1.1fr] lg:items-end lg:gap-16">
          <div>
            <div className="mb-5 flex items-center gap-3">
              <span className="h-px w-10 bg-primary/70" aria-hidden="true" />
              <span className="font-body text-[11px] font-bold uppercase tracking-[0.22em] text-primary">
                {config.applications.eyebrow}
              </span>
            </div>
            <h2
              className="font-satoshi font-bold !leading-[1.05] text-foreground"
              style={{ fontSize: 'clamp(2rem, 3vw, 3rem)' }}
            >
              {config.applications.title}
            </h2>
          </div>
          <p className="max-w-[540px] border-l border-primary/30 pl-6 font-body text-base leading-relaxed text-foreground/68 lg:text-[16px]">
            {config.applications.intro}
          </p>
        </div>
      </ScrollReveal>
      <ScrollReveal stagger>
        <div className="mx-auto grid max-w-6xl grid-cols-1 gap-4 lg:grid-cols-5 lg:gap-5">
          {config.applications.cards.map((card, index) => {
            const Icon = card.icon;
            return (
              <article key={card.title} className="overflow-hidden rounded-2xl bg-white shadow-[0_16px_46px_-38px_hsl(var(--navy)/0.34)] ring-1 ring-foreground/[0.06]">
                <div className="relative aspect-[4/3] overflow-hidden bg-foreground/[0.04]">
                  <WpImage
                    image={toFillImage(card.image)}
                    alt=""
                    fill
                    sizes="(min-width: 1024px) 20vw, 100vw"
                    className="size-full object-cover"
                  />
                </div>
                <div className="p-5">
                  <div className="mb-4 flex items-center justify-between gap-3">
                    <span className="inline-flex items-center gap-2 font-body text-[11px] font-bold uppercase tracking-[0.18em] text-primary">
                      <Icon className="h-5 w-5" strokeWidth={1.55} />
                      {card.label}
                    </span>
                    <span className="font-body text-xs font-bold text-foreground/22">0{index + 1}</span>
                  </div>
                  <h3 className="font-satoshi text-xl font-bold leading-tight text-foreground">{card.title}</h3>
                  <p className="mt-2 font-body text-sm leading-snug text-foreground/60">{card.desc}</p>
                </div>
              </article>
            );
          })}
        </div>
      </ScrollReveal>
      {config.applications.transition && (
        <p className="mx-auto mt-10 max-w-2xl text-center font-body text-sm leading-relaxed text-foreground/54">
          {config.applications.transition}
        </p>
      )}
    </div>
  </section>
);

const MethodSection = ({ config }: { config: SectorPageConfig }) => {
  const [videoOpen, setVideoOpen] = useState(false);
  const icons = [ClipboardCheck, CalendarClock, Shield, TrendingDown];
  return (
    <section className="bg-white py-16 lg:py-32">
      <div className="container mx-auto px-4 lg:px-8">
        <div className="flex flex-col items-start gap-12 lg:flex-row lg:gap-20">
          <div className="lg:sticky lg:top-[120px] lg:w-[40%]">
            <ScrollReveal>
              <p className="mb-6 font-body text-[10px] font-semibold uppercase tracking-[0.25em] text-primary/50">
                {config.method.eyebrow}
              </p>
              <h2
                className="mb-6 font-satoshi text-3xl font-bold text-foreground !leading-[1.05] sm:text-4xl lg:text-[3rem]"
                style={{ letterSpacing: '-0.03em' }}
              >
                {config.method.title}
                <span className="text-foreground/30"> {config.method.mutedTitle}</span>
              </h2>
              <p className="mb-8 font-body text-base leading-relaxed text-muted-foreground lg:text-lg">
                {config.method.intro}
              </p>
              <button onClick={() => setVideoOpen(true)} className="group flex items-center gap-3 text-primary">
                <div className="flex h-12 w-12 items-center justify-center rounded-full bg-primary/10">
                  <Play className="h-5 w-5" />
                </div>
                <span className="font-body text-sm font-semibold">Voir un chantier en 2 minutes</span>
              </button>
            </ScrollReveal>
          </div>
          <div className="relative lg:w-[60%]">
            <div className="absolute bottom-4 left-5 top-4 w-px bg-gradient-to-b from-primary/25 via-primary/10 to-transparent lg:left-6" />
            {config.method.steps.map((step, index) => {
              const Icon = icons[index] ?? ClipboardCheck;
              return (
                <ScrollReveal key={step.title}>
                  <div className="group relative flex items-start gap-5 py-8 lg:gap-7 lg:py-10">
                    <div className="relative z-10 flex h-10 w-10 shrink-0 items-center justify-center rounded-full border border-primary/20 bg-primary/10 lg:h-12 lg:w-12">
                      <Icon className="h-4 w-4 text-primary lg:h-5 lg:w-5" />
                    </div>
                    <div className="pt-1">
                      <span className="mb-2 block font-body text-xs font-bold uppercase tracking-widest text-primary/50">
                        Étape 0{index + 1}
                      </span>
                      <h3 className="mb-2 text-xl text-foreground lg:text-2xl">{step.title}</h3>
                      <p className="max-w-md font-body text-sm leading-relaxed text-muted-foreground lg:text-base">{step.text}</p>
                    </div>
                  </div>
                  {index < config.method.steps.length - 1 && <div className="ml-5 h-px bg-border lg:ml-6" />}
                </ScrollReveal>
              );
            })}
            <p className="ml-16 mt-4 font-body text-xs font-medium text-muted-foreground/50 lg:ml-20">
              {config.method.duration}
            </p>
          </div>
        </div>
      </div>
      <Dialog open={videoOpen} onOpenChange={setVideoOpen}>
        <DialogContent className="max-w-4xl overflow-hidden border-none bg-black p-0">
          <div className="aspect-video">
            <iframe
              src="https://www.youtube.com/embed/9HOB5OVH0Ac?autoplay=1"
              className="h-full w-full"
              allow="autoplay; encrypted-media"
              allowFullScreen
              title="Covalba Cool Roof, un chantier en 2 minutes"
            />
          </div>
        </DialogContent>
      </Dialog>
    </section>
  );
};

const ProofSection = ({ config }: { config: SectorPageConfig }) => (
  <section className="relative overflow-hidden bg-[#192A3A] py-24 lg:py-36">
    <div className="container relative mx-auto px-4 lg:px-8">
      <ScrollReveal>
        <div className="mb-9 flex items-center gap-3 lg:mb-12">
          <span className="h-px w-12 bg-teal-vivid/70" aria-hidden="true" />
          <span className="font-body text-[11px] font-bold uppercase tracking-[0.22em] text-teal-vivid">
            {config.proof.eyebrow}
          </span>
        </div>
        <div className="mb-14 grid grid-cols-1 items-start gap-8 lg:mb-20 lg:grid-cols-[3fr_2fr] lg:gap-16">
          <h2
            className="font-satoshi font-bold text-white !leading-[1.05]"
            style={{ fontSize: 'clamp(1.875rem, 3.8vw, 3rem)', letterSpacing: '-0.03em' }}
          >
            {config.proof.title}
            <br />
            <span className="text-teal-vivid">{config.proof.mutedTitle}</span>
          </h2>
          <p className="max-w-[470px] font-body text-base leading-relaxed text-white/65 lg:mt-2 lg:text-[16px]">
            {config.proof.intro}
          </p>
        </div>
      </ScrollReveal>
      <ScrollReveal stagger>
        <div className="mb-12 grid grid-cols-1 gap-4 md:grid-cols-3 lg:gap-5">
          {config.proof.figures.map((figure) => {
            const Icon = figure.icon;
            return (
              <div key={figure.label} className="rounded-2xl border border-white/10 bg-white/[0.04] p-8 lg:p-9">
                <div className="mb-6 flex h-11 w-11 items-center justify-center rounded-full bg-teal-vivid/[0.12]">
                  <Icon className="h-5 w-5 text-teal-vivid" strokeWidth={1.6} />
                </div>
                <p className="mb-3 font-satoshi text-4xl font-bold leading-none text-white">{figure.value}</p>
                <p className="font-body text-sm leading-relaxed text-white/60">{figure.label}</p>
              </div>
            );
          })}
        </div>
      </ScrollReveal>
      <ScrollReveal>
        <SectorReferenceHighlights
          sector={config.slug as ReferenceSectorSlug}
          referenceFilter={referenceFilterBySectorSlug[config.slug] ?? 'Tous'}
          title="Des cas clients pour vous projeter."
          variant="dark"
        />
      </ScrollReveal>
      {config.proof.cases && (
        <div className="mb-12 grid gap-4 md:grid-cols-2">
          {config.proof.cases.map((item) => (
            <div key={item.name} className="rounded-2xl border border-white/10 bg-white/[0.04] p-6">
              <h3 className="mb-2 font-satoshi text-xl font-bold text-white">{item.name}</h3>
              <p className="font-body text-sm leading-relaxed text-white/60">{item.desc}</p>
            </div>
          ))}
        </div>
      )}
      <div className="border-t border-white/10 pt-10">
        <div className="flex flex-wrap items-center justify-center gap-x-10 gap-y-7 lg:gap-x-14">
          {config.proof.logos.map((logo) =>
            logo.url ? (
              <span key={logo.name} className="flex h-8 w-28 items-center justify-center">
                <img
                  src={logo.url}
                  alt={logo.name}
                  className="max-h-7 max-w-full object-contain opacity-45"
                  style={{ filter: 'brightness(0) invert(1)' }}
                  loading="lazy"
                  decoding="async"
                />
              </span>
            ) : (
              <span key={logo.name} className="flex h-8 w-28 items-center justify-center font-satoshi text-lg font-bold text-white/50">{logo.name}</span>
            )
          )}
        </div>
        <p className="mx-auto mt-9 max-w-2xl text-center font-body text-sm leading-relaxed text-white/70">
          {config.proof.transition}
        </p>
      </div>
    </div>
  </section>
);

const FaqSection = ({ config }: { config: SectorPageConfig }) => (
  <section className="bg-cream py-20 lg:py-32">
    <div className="container mx-auto px-4 lg:px-8">
      <ScrollReveal>
        <div className="grid items-start gap-10 lg:grid-cols-[0.85fr_1.15fr] lg:gap-16">
          <div className="lg:sticky lg:top-24">
            <div className="mb-5 flex items-center gap-3">
              <span className="h-px w-10 bg-primary/70" aria-hidden="true" />
              <span className="font-body text-[11px] font-bold uppercase tracking-[0.22em] text-primary">FAQ</span>
            </div>
            <h2 className="mb-5 font-satoshi font-bold text-foreground !leading-[1.05]" style={{ fontSize: 'clamp(2rem, 3.3vw, 3rem)', letterSpacing: '-0.03em' }}>
              Vos questions,
              <br />
              <span className="text-foreground/40">nos réponses.</span>
            </h2>
            <p className="max-w-[420px] font-body text-base leading-relaxed text-foreground/65 lg:text-[15.5px]">
              {config.faq.intro}
            </p>
            <a href={`#contact-${config.slug}`} className="group mt-8 inline-flex items-center gap-2 text-sm font-semibold text-primary">
              Une autre question ? Parlons-en
              <ArrowRight className="h-4 w-4" />
            </a>
          </div>
          <Accordion type="single" collapsible className="space-y-3">
            {config.faq.items.map((faq, index) => (
              <AccordionItem key={faq.q} value={`${config.slug}-faq-${index}`} className="rounded-xl border border-foreground/[0.06] bg-white px-5 shadow-[0_12px_34px_rgba(24,42,58,0.04)] lg:px-6">
                <AccordionTrigger className="py-5 text-left font-satoshi text-base font-bold text-foreground hover:no-underline lg:text-[17px]">
                  {faq.q}
                </AccordionTrigger>
                <AccordionContent className="pb-5 font-body text-[14.5px] leading-relaxed text-foreground/67 lg:text-[15px]">
                  {faq.a}
                </AccordionContent>
              </AccordionItem>
            ))}
          </Accordion>
        </div>
      </ScrollReveal>
    </div>
  </section>
);

const FinalCta = ({ config }: { config: SectorPageConfig }) => (
  <section id={`contact-${config.slug}`} className="overflow-hidden bg-[#182A3A] py-20 lg:py-32">
    <div className="container mx-auto px-4 lg:px-8">
      <ScrollReveal>
        <div className="mx-auto max-w-4xl text-center">
          <div className="mb-6 inline-flex items-center gap-3">
            <span className="h-px w-8 bg-teal-vivid/70" aria-hidden="true" />
            <span className="font-body text-[11px] font-bold uppercase tracking-[0.22em] text-teal-vivid">
              {config.finalCta.eyebrow}
            </span>
            <span className="h-px w-8 bg-teal-vivid/70" aria-hidden="true" />
          </div>
          <h2 className="mb-6 font-satoshi font-bold text-white !leading-[1.04]" style={{ fontSize: 'clamp(2rem, 3.8vw, 3.5rem)', letterSpacing: '-0.03em' }}>
            {config.finalCta.title}
          </h2>
          <p className="mx-auto mb-9 max-w-2xl font-body text-base leading-relaxed text-white/[0.72] lg:text-[17px]">
            {config.finalCta.desc}
          </p>
          <div className="flex flex-col items-stretch justify-center gap-3 sm:flex-row sm:items-center">
            <a href="/diagnostic" 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">Demander un devis</span>
              <span className="flex h-8 w-8 items-center justify-center rounded-full bg-white/20">
                <ArrowRight className="h-3.5 w-3.5" />
              </span>
            </a>
            <a href="/diagnostic" className="group inline-flex items-center justify-center gap-2 rounded-full border border-white/[0.22] py-2.5 pl-6 pr-2 font-semibold text-white/[0.88]">
              <span className="text-sm">Parler à un expert</span>
              <span className="flex h-8 w-8 items-center justify-center rounded-full bg-white/[0.12]">
                <ArrowRight className="h-3.5 w-3.5" />
              </span>
            </a>
          </div>
        </div>
      </ScrollReveal>
      <ul className="mx-auto mt-12 grid max-w-3xl gap-3 sm:grid-cols-3">
        {config.finalCta.reassurances.map((item, index) => {
          const icons = [CalendarCheck, BadgeCheck, Shield];
          const Icon = icons[index] ?? BadgeCheck;
          return (
            <li key={item} className="flex items-center justify-center gap-2.5 rounded-lg border border-white/[0.12] bg-white/[0.045] px-4 py-3">
              <Icon className="h-4 w-4 shrink-0 text-teal-vivid" strokeWidth={1.8} />
              <span className="font-body text-sm text-white/[0.76]">{item}</span>
            </li>
          );
        })}
      </ul>
    </div>
  </section>
);

const SeoContent = ({ config }: { config: SectorPageConfig }) => (
  <section className="bg-cream py-16 lg:py-28">
    <div className="container mx-auto px-4 lg:px-8">
      <div className="mx-auto max-w-5xl">
        <p className="mb-5 font-body text-[10px] font-semibold uppercase tracking-[0.25em] text-primary/55">
          {config.seo.eyebrow}
        </p>
        <h2 className="mb-5 font-satoshi text-3xl font-bold text-foreground !leading-[1.05] lg:text-5xl">
          {config.seo.title}
        </h2>
        <p className="mb-12 max-w-3xl font-body text-base leading-relaxed text-foreground/64">
          {config.seo.intro}
        </p>
        <div className="grid gap-10 md:grid-cols-2">
          {config.seo.sections.map((section) => (
            <article key={section.title}>
              <h3 className="mb-3 font-satoshi text-xl font-bold text-foreground">{section.title}</h3>
              <p className="font-body text-sm leading-relaxed text-foreground/68">{section.body}</p>
            </article>
          ))}
        </div>
        <div className="mt-12 border-t border-foreground/10 pt-8">
          <p className="mb-4 font-body text-[11px] font-bold uppercase tracking-[0.18em] text-foreground/38">Sources</p>
          <ul className="grid gap-2 font-body text-xs leading-relaxed text-foreground/50 md:grid-cols-2">
            {config.seo.sources.map((source) => (
              <li key={source}>{source}</li>
            ))}
          </ul>
        </div>
      </div>
    </div>
  </section>
);

export const SectorPageTemplate = ({ config }: { config: SectorPageConfig }) => (
  <>
    <SectorHero config={config} />
    <ReassuranceBand items={config.reassurance} />
    <ProblemSection config={config} />
    <SolutionSection config={config} />
    <DurabilitySection config={config} />
    <SpecialSection config={config} />
    <BenefitsSection config={config} />
    <ApplicationsSection config={config} />
    <MethodSection config={config} />
    <ProofSection config={config} />
    <FaqSection config={config} />
    <FinalCta config={config} />
    <SeoContent config={config} />
  </>
);

export const defaultIcons = {
  Building2,
  HelpCircle,
  Shield,
  Thermometer,
  TrendingDown,
  UsersRound,
};