"use client";

import {
  ArrowRight,
  BadgeCheck,
  Building2,
  Factory,
  HeartHandshake,
  Lightbulb,
  Medal,
  ShieldCheck,
  Sparkles,
  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 {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from '@/components/ui/carousel';

export type Stat = {
  value: string;
  label: string;
};

export type Difference = {
  icon: LucideIcon;
  title: string;
  text: string;
};

export type ValueCard = {
  icon: LucideIcon;
  title: string;
  text: string;
};

export type BehindScene = {
  eyebrow: string;
  title: string;
  text: string;
  image: string;
  imageAlt: string;
};

export type CompanyGalleryItem = {
  title: string;
  image: string;
  imageAlt: string;
};

export type PressLogo = {
  name: string;
  src: string;
};

export type TimelineItem = {
  year: string;
  title: string;
  text: string;
  image: string;
  imageAlt: string;
};

export type VideoItem = {
  title: string;
  src: string;
};

export interface QuiSommesNousProps {
  heroEyebrow?: string;
  heroTitre?: string;
  heroIntro?: string;
  heroImage?: string;
  heroImageAlt?: string;
  heroCtaLabel?: string;
  heroCtaHref?: string;
  heroSecondaireLabel?: string;
  heroSecondaireHref?: string;
  missionBadge?: string;
  missionTitre?: string;
  missionTexte?: string;
  missionImage?: string;
  missionImageAlt?: string;
  stats?: Stat[];
  pressLabel?: string;
  pressLogos?: PressLogo[];
  aventureBadge?: string;
  aventureTitre?: string;
  aventureParagraphes?: string[];
  aventureImage?: string;
  aventureImageAlt?: string;
  aventureLegende?: string;
  aventureBadgeDate?: string;
  aventureCtaLabel?: string;
  aventureCtaHref?: string;
  coulissesBadge?: string;
  coulissesTitre?: string;
  behindScenes?: BehindScene[];
  galerieBadge?: string;
  galerieTitre?: string;
  companyGallery?: CompanyGalleryItem[];
  videosBadge?: string;
  videosTitre?: string;
  videos?: VideoItem[];
  timelineBadge?: string;
  timelineTitre?: string;
  timeline?: TimelineItem[];
  pourquoiBadge?: string;
  pourquoiTitre?: string;
  pourquoiIntro?: string;
  differences?: Difference[];
  valeursTitre?: string;
  valeursIntro?: string;
  values?: ValueCard[];
  ctaTitre?: string;
  ctaTexte?: string;
  ctaLabel?: string;
  ctaHref?: string;
  ctaSecondaireLabel?: string;
  ctaSecondaireHref?: string;
}

const defaultStats: Stat[] = [
  { value: '14', label: "années d'expertise" },
  { value: '10', label: 'collaborateurs engagés' },
  { value: '90', label: 'clients grands comptes' },
];

const defaultPressLogos: PressLogo[] = [
  { name: 'Capital', src: '/logos-press/qui-sommes-nous/capital.svg' },
  { name: 'Le Figaro Immobilier', src: '/logos-press/qui-sommes-nous/figaro-immobilier.svg' },
  { name: 'Le Parisien', src: '/logos-press/qui-sommes-nous/le-parisien.svg' },
  { name: 'Zepros', src: '/logos-press/qui-sommes-nous/zepros.svg' },
  { name: 'France Bleu', src: '/logos-press/qui-sommes-nous/france-bleu.svg' },
];

const defaultTimeline: TimelineItem[] = [
  {
    year: '2011',
    title: 'Création de la société',
    text: "Dès l'origine, l'activité vise à protéger les bâtiments de la chaleur estivale.",
    image: '/images/qui-sommes-nous/timeline-equipe.png',
    imageAlt: 'Première équipe Covalba',
  },
  {
    year: '2018',
    title: 'Lancement de la marque Covalba',
    text: 'Début de la commercialisation de notre peinture réfléchissante.',
    image: '/images/qui-sommes-nous/timeline-peinture-reflective.png',
    imageAlt: 'Seau de peinture réfléchissante Covalba',
  },
  {
    year: '2019-2021',
    title: 'Des chantiers expérimentaux aux grandes surfaces',
    text: 'Réalisation de chantiers de grande ampleur et récolte de données concrètes sur les apports de la solution.',
    image: '/images/qui-sommes-nous/timeline-peinture-toiture.png',
    imageAlt: 'Peinture cool roof appliquée sur toiture',
  },
  {
    year: '2022',
    title: "Déploiement du réseau d'applicateurs",
    text: "Face au succès et au référencement auprès de grands acteurs économiques, structuration d'un réseau national d'applicateurs agréés.",
    image: '/images/qui-sommes-nous/timeline-applicateur.png',
    imageAlt: 'Applicateur cool roof',
  },
];

const defaultDifferences: Difference[] = [
  {
    icon: Factory,
    title: 'Fabricant français',
    text: 'Nous concevons et fabriquons nos propres revêtements. Cette maîtrise, de la formulation au chantier, garantit la qualité et la constance de nos produits.',
  },
  {
    icon: Medal,
    title: 'Le produit le plus durable',
    text: "Nos systèmes en polyuréthane avec vernis de finition sont conçus pour tenir 8 à 10 ans, là où les résines acryliques courantes perdent leurs performances en 2 à 5 ans. Notre priorité, c'est la durée de vie réelle, pas le prix au litre.",
  },
  {
    icon: Building2,
    title: 'Une vraie expertise de la toiture',
    text: 'Nous abordons chaque toiture en techniciens, pas en peintres. Diagnostic du support, préparation, points singuliers : la performance dépend autant de la méthode que du produit.',
  },
  {
    icon: ShieldCheck,
    title: 'Une application en sécurité',
    text: "Nos applicateurs interviennent depuis le sol : les machines restent au pied du bâtiment, seuls les flexibles montent en toiture. Zéro charge sur l'étanchéité, zéro risque pour la structure.",
  },
];

const defaultValues: ValueCard[] = [
  {
    icon: BadgeCheck,
    title: 'Bien faire ou ne pas faire.',
    text: "Un savoir-faire fiable et durable, qui conserve une longueur d'avance.",
  },
  {
    icon: Lightbulb,
    title: 'Innover pour préserver les bâtiments et les personnes.',
    text: 'Une inventivité sans cesse renouvelée, pour explorer de nouveaux terrains.',
  },
  {
    icon: Sparkles,
    title: 'Agir avec responsabilité.',
    text: 'Envers nos clients et au regard des enjeux de la transition énergétique.',
  },
  {
    icon: HeartHandshake,
    title: "Mettre l'humain au centre.",
    text: 'Un partage de connaissances et de compétences, pour réussir collectivement.',
  },
];

const defaultBehindScenes: BehindScene[] = [
  {
    eyebrow: 'Les fondateurs',
    title: 'Maxime et Bertrand, toujours sur le terrain',
    text: "Nos fondateurs montent encore sur les toitures. C'est là, au contact du support, que se prennent les vraies décisions techniques.",
    image: '/images/qui-sommes-nous/fondateurs-terrain.webp',
    imageAlt: 'Maxime et Bertrand, fondateurs de Covalba, sur une toiture en intervention',
  },
  {
    eyebrow: 'Le diagnostic',
    title: 'On lit la toiture avant d\'agir',
    text: 'Support, adhérence, points singuliers, zones humides : chaque chantier démarre par une lecture technique fine, pas par un seau de peinture.',
    image: '/images/qui-sommes-nous/equipe-terrain-conseil.webp',
    imageAlt: 'Équipe Covalba diagnostiquant une toiture en situation de conseil sur chantier',
  },
  {
    eyebrow: "L'application en sécurité",
    title: 'Les machines restent au sol',
    text: "Seuls les flexibles montent. Aucune charge sur l'étanchéité, aucun risque pour la structure : c'est notre règle de pose, sur chaque chantier.",
    image: '/images/qui-sommes-nous/coulisses-intervention.webp',
    imageAlt: 'Coulisses d’une intervention Covalba, machines d’application restées au sol',
  },
];

const defaultCompanyGallery: CompanyGalleryItem[] = [
  {
    title: 'Conseil sur site',
    image: '/images/qui-sommes-nous/equipe-terrain-conseil.webp',
    imageAlt: 'Équipe Covalba en situation de conseil sur chantier',
  },
  {
    title: 'Coulisses intervention',
    image: '/images/qui-sommes-nous/coulisses-intervention.webp',
    imageAlt: 'Coulisses d’une intervention Covalba',
  },
  {
    title: 'Équipe en situation',
    image: '/images/qui-sommes-nous/equipe-situation-chantier.webp',
    imageAlt: 'Équipe Covalba en situation sur chantier',
  },
  {
    title: 'Équipe sur toiture',
    image: '/images/qui-sommes-nous/equipe-toiture-covalba.webp',
    imageAlt: 'Équipe Covalba sur une toiture blanche après application',
  },
  {
    title: 'Pulvérisation cool roof',
    image: '/images/qui-sommes-nous/hero-pulverisation.jpg',
    imageAlt: 'Application par pulvérisation d’un revêtement cool roof Covalba',
  },
  {
    title: 'Diagnostic toiture',
    image: '/images/qui-sommes-nous/brief-technique-toiture.webp',
    imageAlt: 'Diagnostic technique Covalba sur une toiture',
  },
  {
    title: 'Produits et matériel',
    image: '/images/qui-sommes-nous/stock-produits-airless.webp',
    imageAlt: 'Produits Covalba et machine airless préparés pour chantier',
  },
  {
    title: 'Les fondateurs sur le terrain',
    image: '/images/qui-sommes-nous/equipe-duo-terrain.webp',
    imageAlt: 'Maxime et Bertrand, fondateurs de Covalba, sur une toiture',
  },
];

const VideoEmbed = ({ title, src }: { title: string; src: string }) => (
  <div className="overflow-hidden rounded-lg border border-border bg-navy shadow-[0_18px_70px_rgba(25,42,58,0.14)]">
    <div className="aspect-video">
      <iframe
        title={title}
        src={src}
        className="h-full w-full"
        loading="lazy"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
        referrerPolicy="strict-origin-when-cross-origin"
        allowFullScreen
      />
    </div>
  </div>
);

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 defaultAventureParagraphes = [
  "Covalba est née d'une aventure humaine : celle de deux associés décidés à mettre leurs compétences au service d'une évolution positive de la société. Cette conviction s'est traduite par le développement d'une peinture réfléchissante premium, fruit de nombreuses années de recherche et développement.",
  "Notre projet est ambitieux : permettre aux bâtiments de répondre aux enjeux d'aujourd'hui comme aux défis de demain. La résilience face aux vagues de chaleur et la réduction des factures d'énergie sont les deux boussoles qui guident le progrès de la technologie Covalba.",
  "Notre approche évolue en continu et nos procédés s'adaptent aux problématiques réelles des gestionnaires de bâtiments. Nos applicateurs partenaires sont formés pour préconiser la solution optimale, en toute sécurité.",
];

const defaultVideos: VideoItem[] = [
  { title: 'Portrait fondateur Covalba', src: 'https://www.youtube.com/embed/QIrqe-60SJg?controls=0' },
  { title: 'Portrait fondateur Covalba 2', src: 'https://www.youtube.com/embed/oW5ZFr5nYCA?controls=0' },
];

const QuiSommesNous = ({
  heroEyebrow = 'Qui sommes-nous',
  heroTitre = "Fabricant français du cool roof, depuis l'origine",
  heroIntro = 'Nous concevons et fabriquons les revêtements réfléchissants les plus durables du marché, pour protéger les bâtiments de la chaleur.',
  heroImage = '/images/qui-sommes-nous/hero-pulverisation.jpg',
  heroImageAlt = "Application d'un revêtement cool roof Covalba sur une toiture professionnelle",
  heroCtaLabel = 'Obtenir un devis',
  heroCtaHref = '/diagnostic',
  heroSecondaireLabel = 'Découvrir CovaTherm',
  heroSecondaireHref = '/peinture-reflective-covatherm',
  missionBadge = 'Partenaire des entreprises et des territoires',
  missionTitre = 'Rendre les bâtiments résilients face à la chaleur.',
  missionTexte = "Pionniers français du cool roof, nous fabriquons depuis 2018 des revêtements réfléchissants éprouvés sur le terrain, et nous abordons chaque toiture en techniciens du bâtiment, pas en peintres. Du laboratoire au chantier, nous maîtrisons toute la chaîne : formulation des résines, diagnostic du support, application en sécurité depuis le sol. C'est ce qui nous permet de garantir des performances qui durent 8 à 10 ans, là où la plupart des revêtements du marché faiblissent en 2 à 5 ans.",
  missionImage = '/images/qui-sommes-nous/equipe-toiture-covalba.webp',
  missionImageAlt = 'Équipe Covalba sur une toiture blanche après application',
  stats = defaultStats,
  pressLabel = 'Ils parlent de nous',
  pressLogos = defaultPressLogos,
  aventureBadge = "L'aventure Covalba",
  aventureTitre = 'Tout a commencé avec deux associés et une conviction.',
  aventureParagraphes = defaultAventureParagraphes,
  aventureImage = '/images/qui-sommes-nous/portrait-maxime-bertrand.jpg',
  aventureImageAlt = 'Portrait de Maxime et Bertrand, fondateurs de Covalba',
  aventureLegende = 'Maxime et Bertrand, les fondateurs de Covalba.',
  aventureBadgeDate = 'Depuis 2011',
  aventureCtaLabel = 'Devenir applicateur agréé',
  aventureCtaHref = '/devenir-applicateur',
  coulissesBadge = 'Dans les coulisses',
  coulissesTitre = 'Nos bureaux, ce sont vos toitures.',
  behindScenes = defaultBehindScenes,
  galerieBadge = 'La vie chez Covalba',
  galerieTitre = 'Une équipe qui vit sur les toits.',
  companyGallery = defaultCompanyGallery,
  videosBadge = 'Portraits en vidéo',
  videosTitre = "Deux regards sur l'histoire Covalba.",
  videos = defaultVideos,
  timelineBadge = 'Frise chronologique',
  timelineTitre = 'Découvrez comment tout a commencé, et où nous en sommes aujourd\'hui.',
  timeline = defaultTimeline,
  pourquoiBadge = 'Pourquoi Covalba',
  pourquoiTitre = 'Un fabricant, pas un revendeur. Des experts de la toiture, pas des peintres.',
  pourquoiIntro = "Notre différence tient autant à la formulation du produit qu'à la méthode d'application sur toiture.",
  differences = defaultDifferences,
  valeursTitre = 'Nos valeurs.',
  valeursIntro = "Elles guident notre manière de concevoir, de fabriquer et d'accompagner les projets sur le terrain.",
  values = defaultValues,
  ctaTitre = "Ensemble, nous pouvons changer l'histoire. Vous êtes partant ?",
  ctaTexte = 'Que vous soyez gestionnaire de bâtiment ou professionnel de la toiture, parlons de votre projet.',
  ctaLabel = 'Obtenir un devis',
  ctaHref = '/diagnostic',
  ctaSecondaireLabel = 'Devenir applicateur agréé',
  ctaSecondaireHref = '/devenir-applicateur',
}: QuiSommesNousProps = {}) => {
  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-42"
            />
          </picture>
          <div className="absolute inset-0 -z-10 bg-gradient-to-r from-navy via-navy/84 to-navy/35" 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 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="relative overflow-hidden 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-[0.95fr_1.05fr] lg:gap-16 lg:items-center">
              <ScrollReveal>
                <div>
                  <div className="mb-5 flex items-center gap-3">
                    <span className="h-px w-9 bg-primary/55" aria-hidden="true" />
                    <span className="font-body text-[10px] font-semibold uppercase tracking-[0.25em] text-primary/60">
                      {missionBadge}
                    </span>
                  </div>
                  <h2 className="font-satoshi text-3xl font-black leading-tight text-foreground sm:text-4xl lg:text-5xl">
                    {missionTitre}
                  </h2>
                  <p className="mt-6 max-w-xl font-body text-lg leading-relaxed text-foreground/66">
                    {missionTexte}
                  </p>
                  <div className="mt-8 grid gap-3 sm:grid-cols-3">
                    {stats.map((stat) => (
                      <div key={stat.label} className="rounded-lg border border-border bg-[#F6FAFB] p-5">
                        <p className="font-satoshi text-4xl font-black leading-none text-primary lg:text-5xl">
                          {stat.value}
                        </p>
                        <p className="mt-3 font-body text-sm font-semibold leading-snug text-foreground/66">
                          {stat.label}
                        </p>
                      </div>
                    ))}
                  </div>
                </div>
              </ScrollReveal>

              <ScrollReveal>
                <div className="grid gap-3 sm:grid-cols-[1.2fr_0.8fr]">
                  <figure className="relative aspect-[4/5] overflow-hidden rounded-lg border border-border bg-cream shadow-[0_18px_70px_rgba(25,42,58,0.12)]">
                    <WpImage
                      image={{ sourceUrl: missionImage, altText: missionImageAlt, width: null, height: null }}
                      fill
                      className="h-full w-full object-cover"
                    />
                  </figure>
                  <div className="grid gap-3 sm:grid-rows-2">
                    <figure className="relative aspect-[4/3] overflow-hidden rounded-lg border border-border bg-cream sm:aspect-auto sm:min-h-0">
                      <WpImage
                        image={{
                          sourceUrl: '/images/qui-sommes-nous/brief-technique-toiture.webp',
                          altText: 'Diagnostic technique Covalba sur une toiture',
                          width: null,
                          height: null,
                        }}
                        fill
                        className="h-full w-full object-cover"
                      />
                    </figure>
                    <figure className="relative aspect-[4/3] overflow-hidden rounded-lg border border-border bg-cream sm:aspect-auto sm:min-h-0">
                      <WpImage
                        image={{
                          sourceUrl: '/images/qui-sommes-nous/stock-produits-airless.webp',
                          altText: 'Produits Covalba et machine airless préparés pour chantier',
                          width: null,
                          height: null,
                        }}
                        fill
                        className="h-full w-full object-cover"
                      />
                    </figure>
                  </div>
                </div>
              </ScrollReveal>
            </div>
          </div>
        </section>

        <section className="border-y border-border bg-[#F6FAFB] py-10">
          <div className="container mx-auto px-4 lg:px-8">
            <ScrollReveal>
              <div className="flex flex-col gap-8 lg:flex-row lg:items-center lg:justify-between">
                <div className="shrink-0">
                  <p className="font-body text-[10px] font-semibold uppercase tracking-[0.24em] text-primary/60">
                    {pressLabel}
                  </p>
                </div>
                <div className="grid flex-1 grid-cols-2 items-center gap-3 sm:grid-cols-3 lg:grid-cols-5">
                  {pressLogos.map((logo) => (
                    <div
                      key={logo.name}
                      className="flex h-18 min-h-16 items-center justify-center rounded-lg border border-border bg-white px-5 shadow-sm transition-transform duration-300 hover:-translate-y-0.5"
                    >
                      <img src={logo.src} alt={logo.name} className="max-h-10 max-w-full opacity-75" loading="lazy" />
                    </div>
                  ))}
                </div>
              </div>
            </ScrollReveal>
          </div>
        </section>

        <section 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-[48fr_52fr] lg:gap-16">
              <ScrollReveal>
                <div className="rounded-lg border border-border bg-cream/70 p-6 lg:p-8">
                  <p className="mb-5 font-body text-[10px] font-semibold uppercase tracking-[0.25em] text-primary/60">
                    {aventureBadge}
                  </p>
                  <h2 className="font-satoshi text-3xl font-black leading-tight text-foreground sm:text-4xl lg:text-5xl">
                    {aventureTitre}
                  </h2>
                  <div className="mt-6 space-y-5 font-body text-base leading-relaxed text-foreground/66">
                    {aventureParagraphes.map((paragraphe) => (
                      <p key={paragraphe}>
                        {paragraphe}
                      </p>
                    ))}
                  </div>
                  <div className="mt-8">
                    <SecondaryCTA href={aventureCtaHref}>{aventureCtaLabel}</SecondaryCTA>
                  </div>
                </div>
              </ScrollReveal>

              <ScrollReveal className="flex h-full items-center">
                <div className="relative w-full">
                  <div className="absolute -right-4 -top-4 h-28 w-28 rounded-full bg-teal-vivid/12 blur-2xl" aria-hidden="true" />
                  <figure className="relative overflow-hidden rounded-lg border border-border bg-cream shadow-[0_18px_70px_rgba(25,42,58,0.12)]">
                    <div className="relative aspect-[11/8] w-full">
                      <WpImage
                        image={{ sourceUrl: aventureImage, altText: aventureImageAlt, width: null, height: null }}
                        fill
                        className="object-cover"
                      />
                    </div>
                    <figcaption className="flex items-center justify-between gap-4 px-5 py-4 font-body text-sm text-foreground/58">
                      <span>{aventureLegende}</span>
                      <span className="hidden rounded-full bg-primary/10 px-3 py-1 text-xs font-semibold text-primary sm:inline-flex">
                        {aventureBadgeDate}
                      </span>
                    </figcaption>
                  </figure>
                </div>
              </ScrollReveal>
            </div>

            <ScrollReveal>
              <div className="mt-14 lg:mt-20">
                <div className="mb-8 max-w-3xl">
                  <p className="mb-4 font-body text-[10px] font-semibold uppercase tracking-[0.25em] text-primary/60">
                    {coulissesBadge}
                  </p>
                  <h3 className="font-satoshi text-2xl font-black leading-tight text-foreground sm:text-3xl lg:text-4xl">
                    {coulissesTitre}
                  </h3>
                </div>
                <div className="grid items-stretch gap-4 md:grid-cols-3">
                  {behindScenes.map((item) => (
                    <article
                      key={item.title}
                      className="flex h-full flex-col overflow-hidden rounded-lg border border-border bg-white shadow-sm"
                    >
                      <div className="relative aspect-[7/5] w-full overflow-hidden">
                        <WpImage
                          image={{ sourceUrl: item.image, altText: item.imageAlt, width: null, height: null }}
                          fill
                          className="h-full w-full object-cover"
                        />
                      </div>
                      <div className="flex flex-1 flex-col p-5">
                        <p className="mb-3 font-body text-[10px] font-bold uppercase tracking-[0.22em] text-primary/58">
                          {item.eyebrow}
                        </p>
                        <h4 className="font-satoshi text-xl font-bold leading-tight text-foreground">
                          {item.title}
                        </h4>
                        <p className="mt-3 font-body text-sm leading-relaxed text-foreground/62">
                          {item.text}
                        </p>
                      </div>
                    </article>
                  ))}
                </div>
              </div>
            </ScrollReveal>

            <ScrollReveal>
              <div className="mt-12 lg:mt-16">
                <Carousel opts={{ align: 'start', loop: true }}>
                  <div className="mb-6 flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
                    <div>
                      <p className="mb-3 font-body text-[10px] font-semibold uppercase tracking-[0.25em] text-primary/60">
                        {galerieBadge}
                      </p>
                      <h3 className="font-satoshi text-2xl font-black leading-tight text-foreground sm:text-3xl">
                        {galerieTitre}
                      </h3>
                    </div>
                    <div className="flex shrink-0 items-center gap-2">
                      <CarouselPrevious className="static translate-y-0 border-border bg-white text-primary hover:bg-primary/5" />
                      <CarouselNext className="static translate-y-0 border-border bg-white text-primary hover:bg-primary/5" />
                    </div>
                  </div>
                  <CarouselContent className="-ml-3">
                    {companyGallery.map((item) => (
                      <CarouselItem key={item.title} className="basis-1/2 pl-3 lg:basis-1/3">
                        <figure className="group relative aspect-[4/3] overflow-hidden rounded-lg border border-border bg-cream">
                          <WpImage
                            image={{ sourceUrl: item.image, altText: item.imageAlt, width: null, height: null }}
                            fill
                            className="h-full w-full object-cover transition-transform duration-700 group-hover:scale-105"
                          />
                          <figcaption className="absolute inset-x-0 bottom-0 bg-gradient-to-t from-navy via-navy/65 to-transparent p-3 pt-10 font-body text-[13px] font-bold leading-snug text-white drop-shadow-[0_1px_2px_rgba(0,0,0,0.55)]">
                            {item.title}
                          </figcaption>
                        </figure>
                      </CarouselItem>
                    ))}
                  </CarouselContent>
                </Carousel>
              </div>
            </ScrollReveal>

            <ScrollReveal>
              <div className="mt-14 rounded-lg border border-border bg-[#F6FAFB] p-5 lg:mt-20 lg:p-8">
                <div className="mb-6 flex flex-col gap-2 sm:flex-row sm:items-end sm:justify-between">
                  <div>
                    <p className="font-body text-[10px] font-semibold uppercase tracking-[0.24em] text-primary/60">
                      {videosBadge}
                    </p>
                    <h3 className="mt-2 font-satoshi text-2xl font-black text-foreground">
                      {videosTitre}
                    </h3>
                  </div>
                </div>
                <div className="grid gap-5 lg:grid-cols-2">
                  {videos.map((video) => (
                    <VideoEmbed key={video.src} title={video.title} src={video.src} />
                  ))}
                </div>
              </div>
            </ScrollReveal>
          </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-14 max-w-4xl text-center">
                <p className="mb-5 font-body text-[10px] font-semibold uppercase tracking-[0.25em] text-primary/60">
                  {timelineBadge}
                </p>
                <h2 className="font-satoshi text-3xl font-black leading-tight text-foreground sm:text-4xl lg:text-5xl">
                  {timelineTitre}
                </h2>
              </div>
            </ScrollReveal>
            <div className="relative mx-auto max-w-5xl">
              <div className="absolute left-8 top-8 bottom-8 w-px bg-gradient-to-b from-primary/30 via-primary/15 to-transparent lg:left-1/2 lg:-translate-x-1/2" />
              <div className="space-y-7 lg:space-y-10">
                {timeline.map((item, index) => (
                  <ScrollReveal key={item.year}>
                    <article
                      className="relative grid gap-5 pl-20 lg:grid-cols-2 lg:gap-14 lg:pl-0"
                    >
                      <span className="absolute left-3 top-8 z-10 flex h-10 w-10 items-center justify-center rounded-full border border-primary/25 bg-white shadow-sm lg:left-1/2 lg:-translate-x-1/2">
                        <span className="h-3 w-3 rounded-full bg-primary" />
                      </span>
                      <div
                        className={`group overflow-hidden rounded-lg border border-border bg-white p-2 shadow-sm transition-shadow duration-300 hover:shadow-[0_18px_60px_rgba(25,42,58,0.10)] ${
                          index % 2 === 1 ? 'lg:col-start-2' : ''
                        }`}
                      >
                        <div className="grid overflow-hidden rounded-md bg-cream sm:grid-cols-[148px_1fr]">
                          <div className="flex min-h-36 items-center justify-center bg-gradient-to-br from-teal-light to-white p-5">
                            <img
                              src={item.image}
                              alt={item.imageAlt}
                              className="max-h-28 max-w-28 object-contain transition-transform duration-500 group-hover:scale-105"
                              loading="lazy"
                              decoding="async"
                            />
                          </div>
                          <div className="p-5 lg:p-6">
                            <div className="mb-3 flex items-center gap-3">
                              <span className="rounded-full bg-primary/10 px-3 py-1 font-body text-[11px] font-black text-primary">
                                {item.year}
                              </span>
                              <span className="font-body text-[10px] font-bold uppercase tracking-[0.18em] text-foreground/30">
                                Étape {index + 1}
                              </span>
                            </div>
                            <h3 className="mb-2 font-satoshi text-xl font-bold leading-tight text-foreground">
                              {item.title}
                            </h3>
                            <p className="font-body text-sm leading-relaxed text-foreground/64">{item.text}</p>
                          </div>
                        </div>
                      </div>
                      <div className="hidden lg:block" aria-hidden="true">
                        <div
                          className={`flex h-full items-center ${
                            index % 2 === 1 ? 'justify-end pr-8' : 'justify-start pl-8'
                          }`}
                        >
                          <span className="font-satoshi text-7xl font-black leading-none text-primary/[0.07]">
                            {index + 1}
                          </span>
                        </div>
                      </div>
                    </article>
                  </ScrollReveal>
                ))}
              </div>
            </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">
            <ScrollReveal>
              <div className="mx-auto mb-12 max-w-5xl">
                <div className="mb-6 inline-flex items-center gap-3 rounded-full border border-white/10 bg-white/[0.04] px-4 py-2">
                  <span className="h-px w-7 bg-teal-vivid/80" aria-hidden="true" />
                  <span className="font-body text-[11px] font-bold uppercase tracking-[0.22em] text-teal-vivid">
                    {pourquoiBadge}
                  </span>
                </div>
                <div className="grid items-end gap-6 lg:grid-cols-[1.05fr_0.95fr]">
                  <h2 className="font-satoshi text-3xl font-black leading-tight text-white sm:text-4xl lg:text-5xl">
                    {pourquoiTitre}
                  </h2>
                  <p className="max-w-xl font-body text-base leading-relaxed text-white/58 lg:pb-1">
                    {pourquoiIntro}
                  </p>
                </div>
              </div>
            </ScrollReveal>
            <ScrollReveal stagger>
              <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
                {differences.map((item) => {
                  const Icon = item.icon;
                  return (
                    <article key={item.title} className="rounded-lg border border-white/10 bg-white/[0.045] p-6 transition-colors hover:border-teal-vivid/35 hover:bg-white/[0.07]">
                      <div className="mb-5 flex h-11 w-11 items-center justify-center rounded-lg bg-teal-vivid/14">
                        <Icon className="h-5 w-5 text-teal-vivid" strokeWidth={1.7} />
                      </div>
                      <h3 className="mb-3 font-satoshi text-lg font-bold leading-tight text-white">{item.title}</h3>
                      <p className="font-body text-sm leading-relaxed text-white/62">{item.text}</p>
                    </article>
                  );
                })}
              </div>
            </ScrollReveal>
          </div>
        </section>

        <section className="bg-white py-16 lg:py-28">
          <div className="container mx-auto px-4 lg:px-8">
            <ScrollReveal>
              <div className="mb-10 flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
                <h2 className="font-satoshi text-3xl font-black leading-tight text-foreground sm:text-4xl lg:text-5xl">
                  {valeursTitre}
                </h2>
                <p className="max-w-xl font-body text-base leading-relaxed text-foreground/60">
                  {valeursIntro}
                </p>
              </div>
            </ScrollReveal>
            <ScrollReveal stagger>
              <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
                {values.map((value) => {
                  const Icon = value.icon;
                  return (
                    <article key={value.title} className="rounded-lg border border-border bg-cream p-6">
                      <div className="mb-5 flex h-11 w-11 items-center justify-center rounded-lg bg-primary/10">
                        <Icon className="h-5 w-5 text-primary" strokeWidth={1.8} />
                      </div>
                      <h3 className="mb-3 font-satoshi text-lg font-bold leading-tight text-foreground">{value.title}</h3>
                      <p className="font-body text-sm leading-relaxed text-foreground/64">{value.text}</p>
                    </article>
                  );
                })}
              </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>
                <a
                  href="/diagnostic"
                  className="inline-flex items-center justify-center gap-2 rounded-full px-6 py-2.5 font-body text-sm font-semibold text-white/86 transition-colors hover:bg-white/10"
                >
                  Nous contacter <ArrowRight className="h-3.5 w-3.5" />
                </a>
              </div>
            </ScrollReveal>
          </div>
        </section>
      </main>
      <Footer />
      <StickyMobileCTA label="Obtenir un devis" href="/diagnostic" />
    </>
  );
};

export default QuiSommesNous;