"use client";

import { Fragment } from 'react';
import {
  ArrowRight,
  BadgeCheck,
  BriefcaseBusiness,
  CheckCircle2,
  ClipboardCheck,
  ExternalLink,
  GraduationCap,
  MapPin,
  PackageCheck,
  Settings,
  ShieldCheck,
  SprayCan,
  Store,
  Wrench,
  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 { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion';
import { Badge } from '@/components/ui/badge';
import { ApplicateurScreener } from '@/components/applicateur/ApplicateurScreener';
import { ApplicateurForm } from '@/components/applicateur/ApplicateurForm';
import WpImage from '@/components/ui/WpImage';
import { parseAccent } from '@/lib/wp/mappers';
import type { HubspotFormConfig } from '@/lib/hubspot';

const MEETING_URL = 'https://meetings.hubspot.com/maxime-bourassin/tel-partenaire';

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

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

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

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

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

export interface DevenirApplicateurProps {
  heroEyebrow?: string;
  heroBadge?: string;
  heroTitre?: string;
  heroIntro?: string;
  heroImage?: string;
  heroImageAlt?: string;
  heroCtaLabel?: string;
  heroCtaHref?: string;
  heroSecondaireLabel?: string;
  heroSecondaireHref?: string;
  videoTitre?: string;
  videoUrl?: string;
  pourquoiBadge?: string;
  pourquoiTitre?: string;
  pourquoiIntro?: string;
  pourquoiCards?: PourquoiCard[];
  partBadge?: string;
  /** Convention `*accent*` (parseAccent) ; sans valeur, le markup original est rendu. */
  partTitre?: string;
  partIntro?: string;
  partnerOffers?: PartnerOffer[];
  screenerTitre?: string;
  formTitre?: string;
  formId?: string;
  hubspotForm?: HubspotFormConfig;
  parcoursBadge?: string;
  parcoursTitre?: string;
  journeySteps?: JourneyStep[];
  implTitre?: string;
  implTexte?: string;
  implantations?: string[];
  implImage?: string;
  implImageAlt?: string;
  temTitre?: string;
  temIntro?: string;
  temVideoUrl?: string;
  temLabel?: string;
  temItems?: string[];
  faqBadge?: string;
  faqTitre?: string;
  faqs?: ApplicateurFaqItem[];
  ctaTitre?: string;
  ctaTexte?: string;
  ctaLabel?: string;
  ctaHref?: string;
  seoTitre?: string;
  seoBlocs?: ApplicateurSeoBloc[];
}

const defaultPartnerOffers: PartnerOffer[] = [
  {
    title: 'Revêtements Cool Roof',
    text: 'Une large gamme de revêtements liquides réfléchissants.',
    image: '/images/devenir-applicateur/revetements-cool-roof.jpg',
    icon: SprayCan,
  },
  {
    title: "Matériel d'application",
    text: 'Vente et maintenance de pompes Airless configurées sur-mesure.',
    image: '/images/devenir-applicateur/materiel-application.jpg',
    icon: Wrench,
  },
  {
    title: 'Formation au cool roof',
    text: 'Maîtriser la vente des revêtements Covalba et les protocoles de pose.',
    image: '/images/devenir-applicateur/formation.jpg',
    icon: GraduationCap,
  },
  {
    title: 'Assistance chantier',
    text: 'Des experts à votre écoute pour la réussite de vos chantiers.',
    image: '/images/devenir-applicateur/assistance-chantier.jpg',
    icon: Settings,
  },
  {
    title: 'Espace partenaire applicateurs',
    text: 'Achetez en ligne et faites-vous livrer directement sur chantier.',
    image: '/images/devenir-applicateur/applicateur-site2.png',
    icon: Store,
  },
  {
    title: 'Notoriété',
    text: 'Appuyez-vous sur une marque solide et très bien accueillie chez les clients.',
    image: '/images/devenir-applicateur/notoriete.jpg',
    icon: BadgeCheck,
  },
];

const defaultPourquoiCards: PourquoiCard[] = [
  {
    icon: ShieldCheck,
    title: 'Un produit durable',
    text: 'Les revêtements polyuréthane et vernis de Covalba sont conçus pour tenir 8 à 10 ans, là où les résines acryliques bas de gamme tiennent 2 à 5 ans.',
  },
  {
    icon: BriefcaseBusiness,
    title: 'Un fabricant spécialisé',
    text: "Covalba est un fabricant français pionnier du cool roof depuis 2018, qui forme et accompagne son réseau d'applicateurs.",
  },
];

const defaultJourneySteps: JourneyStep[] = [
  {
    num: '01',
    icon: ClipboardCheck,
    title: 'Candidature',
    text: 'Vous remplissez le formulaire ou réservez un RDV téléphonique.',
  },
  {
    num: '02',
    icon: GraduationCap,
    title: 'Formation de 2 jours',
    text: 'Vous maîtrisez la vente des revêtements et les protocoles de pose.',
  },
  {
    num: '03',
    icon: Wrench,
    title: 'Matériel',
    text: 'Vous vous équipez en pompes Airless configurées sur-mesure, que Covalba vend et entretient.',
  },
  {
    num: '04',
    icon: PackageCheck,
    title: 'Chantiers',
    text: 'Vous bénéficiez de l’assistance chantier et commandez vos produits via l’espace partenaire, livrés sur chantier.',
  },
];

const defaultImplantations = ['France métropolitaine', 'DROM COM', 'Europe', 'Afrique', 'Moyen-Orient'];

const defaultTemItems = [
  'une formation technique de 2 jours',
  "la vente du matériel d'application",
  'la préconisation des produits sur ses chantiers',
];

const defaultSeoBlocs: ApplicateurSeoBloc[] = [
  {
    titre: 'Pourquoi devenir applicateur cool roof',
    texte: "Pour une entreprise d'étanchéité, d'isolation ou de peinture industrielle, devenir applicateur cool roof permet d'élargir son offre sur des clients et des toitures qu'elle traite déjà.",
  },
  {
    titre: 'Ce que le réseau met à disposition',
    texte: 'Revêtements liquides réfléchissants, matériel configuré sur-mesure, formation technique de 2 jours, assistance chantier et espace de commande en ligne.',
  },
  {
    titre: 'Qui peut devenir applicateur',
    texte: "Le réseau s'adresse aux entreprises spécialistes de l'étanchéité, de l'isolation ou de la peinture industrielle, créées depuis plus de deux ans et travaillant principalement en B2B.",
  },
];

/**
 * Reconstruit le markup de titre de l'original depuis la convention `*accent*` :
 * segments accent rendus dans le <span className="text-teal-vivid"> exact de
 * l'original, espace précédente absorbée dans le span (comme dans le JSX d'origine).
 */
const renderAccentTitre = (titre: string) => {
  const segments = parseAccent(titre);
  return segments.map((segment, i) => {
    if (segment.accent) {
      const prev = segments[i - 1];
      const lead = prev && !prev.accent && /\s$/.test(prev.text) ? ' ' : '';
      return (
        <span key={i} className="text-teal-vivid">
          {lead + segment.text}
        </span>
      );
    }
    const next = segments[i + 1];
    const text = next?.accent ? segment.text.replace(/\s+$/, '') : segment.text;
    return <Fragment key={i}>{text}</Fragment>;
  });
};

const defaultFaqs: ApplicateurFaqItem[] = [
  {
    q: 'Faut-il déjà être une entreprise du bâtiment ?',
    a: 'Oui. Le réseau s’adresse aux entreprises spécialistes de l’étanchéité, de l’isolation ou de la peinture industrielle, créées depuis plus de 2 ans et à clientèle principalement B2B.',
  },
  {
    q: 'Quelle formation est prévue ?',
    a: 'Une formation technique de 2 jours, qui couvre la vente des revêtements et les protocoles de pose.',
  },
  {
    q: 'Quel matériel faut-il ?',
    a: 'Des pompes Airless configurées sur-mesure, que Covalba vend et entretient.',
  },
  {
    q: 'Comment je me fournis ensuite ?',
    a: 'Via l’espace partenaire applicateurs : vous commandez en ligne et vous êtes livré directement sur le chantier.',
  },
  {
    q: 'Quel accompagnement sur les chantiers ?',
    a: 'Les experts Covalba sont à votre écoute pour la réussite de vos chantiers, avec assistance chantier et préconisation produit.',
  },
];

const VideoEmbed = ({ title, src }: { title: string; src: string }) => (
  <div className="overflow-hidden rounded-lg border border-white/10 bg-navy shadow-[0_18px_70px_rgba(25,42,58,0.18)]">
    <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 MeetingCTA = ({ children, href = MEETING_URL }: { children: string; href?: string }) => (
  <a
    href={href}
    target="_blank"
    rel="noreferrer"
    className="group inline-flex items-center justify-center gap-2 rounded-full border border-white/25 bg-white/5 py-2.5 pl-6 pr-2 font-semibold text-white transition-colors hover:bg-white/10"
  >
    <span className="text-sm">{children}</span>
    <span className="flex h-8 w-8 items-center justify-center rounded-full bg-white/12 transition-transform duration-500 group-hover:translate-x-0.5">
      <ExternalLink className="h-3.5 w-3.5" />
    </span>
  </a>
);

const ApplicateurFormSection = ({
  screenerTitre = 'Devenez partenaire applicateur Covalba',
  formTitre = 'Déposez votre dossier en quelques minutes.',
  hubspotForm,
}: {
  screenerTitre?: string;
  formTitre?: string;
  hubspotForm?: HubspotFormConfig;
} = {}) => (
  <section id="candidature" className="bg-cream py-16 lg:py-28">
    <div className="container mx-auto px-4 lg:px-8">
      <ScrollReveal>
        <div className="max-w-3xl">
          <Badge className="mb-5 border-primary/15 bg-primary/10 text-primary hover:bg-primary/10">
            1er réseau d'applicateurs cool roof en France
          </Badge>
          <h2 className="font-satoshi text-3xl font-black leading-tight text-foreground sm:text-4xl lg:text-5xl">
            {screenerTitre}
          </h2>
          <p className="mt-5 font-body text-base leading-relaxed text-foreground/64">
            Le réseau s'adresse aux entreprises du bâtiment déjà structurées pour intervenir sur des clients
            professionnels. Vérifiez en 30 secondes si votre profil correspond.
          </p>
        </div>
      </ScrollReveal>

      <ScrollReveal>
        <div className="mt-10">
          <ApplicateurScreener />
        </div>
      </ScrollReveal>

      <div className="mt-12 grid gap-10 lg:grid-cols-[40fr_60fr] lg:gap-14">
        <ScrollReveal>
          <div className="lg:sticky lg:top-28">
            <p className="font-body text-[10px] font-semibold uppercase tracking-[0.22em] text-primary/60">
              Votre candidature
            </p>
            <h3 className="mt-2 font-satoshi text-2xl font-black leading-tight text-foreground">
              {formTitre}
            </h3>
            <p className="mt-4 font-body text-base leading-relaxed text-foreground/64">
              Une fois le formulaire envoyé, l'équipe Covalba revient vers vous pour qualifier le partenariat et
              organiser la formation applicateur.
            </p>
            <a
              href={MEETING_URL}
              target="_blank"
              rel="noreferrer"
              className="mt-6 inline-flex items-center gap-2 font-body text-sm font-semibold text-primary transition-all hover:gap-3"
            >
              Prendre un RDV téléphonique avec Maxime <ExternalLink className="h-4 w-4" />
            </a>
          </div>
        </ScrollReveal>
        <ScrollReveal>
          <ApplicateurForm hubspotForm={hubspotForm} />
        </ScrollReveal>
      </div>
    </div>
  </section>
);

const DevenirApplicateur = ({
  heroEyebrow = 'Rejoignez-nous',
  heroBadge = "1er réseau d'applicateurs cool roof en France",
  heroTitre = 'Devenir applicateur cool roof',
  heroIntro = "Mettez à votre disposition des revêtements cool roof durables et l'accompagnement d'un fabricant spécialisé, pour enrichir votre offre et vos commandes.",
  heroImage = '/images/devenir-applicateur/covalba-accompagnement-applicateur.jpg',
  heroImageAlt = 'Applicateurs Covalba accompagnés sur chantier cool roof',
  heroCtaLabel = 'Je rejoins le réseau',
  heroCtaHref = '#candidature',
  heroSecondaireLabel = 'Prendre un RDV téléphonique',
  heroSecondaireHref = MEETING_URL,
  videoTitre = 'Covalba, devenir applicateur agréé',
  videoUrl = 'https://www.youtube.com/embed/tEckbKKBeOM',
  pourquoiBadge = 'Pourquoi le cool roof',
  pourquoiTitre = "Le cool roof s'ajoute à votre métier, sur les toitures que vous connaissez déjà.",
  pourquoiIntro = "Si vous êtes spécialiste de l'étanchéité, de l'isolation ou de la peinture industrielle, vos clients ont déjà les toitures que nous traitons. Le cool roof vous permet de leur proposer une solution de plus, sur le même bâtiment, et d'enrichir vos commandes.",
  pourquoiCards = defaultPourquoiCards,
  partBadge = 'Partenariat Covalba',
  partTitre,
  partIntro = 'Produits, matériel, formation, assistance chantier : Covalba met à disposition les briques utiles pour développer une activité cool roof sérieuse.',
  partnerOffers = defaultPartnerOffers,
  screenerTitre,
  formTitre,
  hubspotForm,
  parcoursBadge = 'Le parcours',
  parcoursTitre = 'De votre candidature à vos chantiers, on vous accompagne.',
  journeySteps = defaultJourneySteps,
  implTitre = "Des opportunités d'implantation dans toute la France et à l'international.",
  implTexte = "Le contexte environnemental mondial exige une adaptation rapide et durable aux conséquences du changement climatique. La présence de sociétés capables de fournir localement des solutions avec une véritable expertise est cruciale. Tout un marché reste à conquérir, qui n'attend que votre participation.",
  implantations = defaultImplantations,
  implImage = '/images/devenir-applicateur/covalba-accompagnement-applicateur.jpg',
  implImageAlt = 'Accompagnement applicateur Covalba sur un chantier de toiture',
  temTitre = 'La parole est à nos partenaires.',
  temIntro = "Anthony Minost, gérant de l'entreprise d'étanchéité TOPROOF (78), explique pourquoi il a choisi de travailler avec les revêtements cool roof et le matériel Covalba.",
  temVideoUrl = 'https://www.youtube.com/embed/Sy7I06cZK5w?si=9DBk2ed751HRHQeU',
  temLabel = "L'équipe Covalba l'a accompagné pour",
  temItems = defaultTemItems,
  faqBadge = 'FAQ applicateur',
  faqTitre = 'Vos questions avant de rejoindre le réseau.',
  faqs = defaultFaqs,
  ctaTitre = 'Faites le choix du cool roof Covalba.',
  ctaTexte = 'Et développez votre activité durablement.',
  ctaLabel = 'Je rejoins le réseau',
  ctaHref = '#candidature',
  seoTitre = 'Devenir applicateur cool roof avec Covalba',
  seoBlocs = defaultSeoBlocs,
}: DevenirApplicateurProps = {}) => {
  return (
    <>
      <a href="#candidature" className="skip-link">
        Aller au formulaire de candidature
      </a>
      <Navbar />
      <main>
        <section className="relative isolate overflow-hidden bg-navy pt-28 text-white lg:pt-36">
          <WpImage
            image={{ sourceUrl: heroImage, altText: heroImageAlt, width: null, height: null }}
            alt={heroImageAlt}
            fill
            priority
            className="-z-10 h-full w-full object-cover opacity-32"
          />
          <div className="absolute inset-0 -z-10 bg-gradient-to-r from-navy via-navy/88 to-navy/42" aria-hidden="true" />
          <div className="absolute inset-x-0 bottom-0 -z-10 h-32 bg-gradient-to-t from-navy to-transparent" aria-hidden="true" />

          <div className="container mx-auto px-4 pb-16 lg:px-8 lg:pb-24">
            <div className="max-w-3xl">
              <div className="mb-6 flex flex-wrap items-center gap-3">
                <span className="h-px w-9 bg-teal-vivid" aria-hidden="true" />
                <span className="font-body text-[11px] font-semibold uppercase tracking-[0.22em] text-teal-vivid">
                  {heroEyebrow}
                </span>
                <Badge className="border-white/15 bg-white/10 text-white hover:bg-white/10">
                  {heroBadge}
                </Badge>
              </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/68 lg:text-xl">
                {heroIntro}
              </p>

              <div className="mt-9 flex flex-col gap-3 sm:flex-row">
                <PrimaryCTA href={heroCtaHref}>{heroCtaLabel}</PrimaryCTA>
                <MeetingCTA href={heroSecondaireHref}>{heroSecondaireLabel}</MeetingCTA>
              </div>
            </div>
          </div>
        </section>

        <section className="bg-white px-4 py-14 lg:px-8 lg:py-20">
          <div className="container mx-auto">
            <ScrollReveal>
              <VideoEmbed
                title={videoTitre}
                src={videoUrl}
              />
            </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 gap-10 lg:grid-cols-[42fr_58fr] lg:gap-16">
              <ScrollReveal>
                <div className="lg:sticky lg:top-28">
                  <p className="mb-5 font-body text-[10px] font-semibold uppercase tracking-[0.25em] text-primary/60">
                    {pourquoiBadge}
                  </p>
                  <h2 className="font-satoshi text-3xl font-black leading-tight text-foreground sm:text-4xl lg:text-5xl">
                    {pourquoiTitre}
                  </h2>
                </div>
              </ScrollReveal>

              <div>
                <ScrollReveal>
                  <p className="max-w-2xl font-body text-base leading-relaxed text-foreground/68 lg:text-lg">
                    {pourquoiIntro}
                  </p>
                </ScrollReveal>

                <div className="mt-8 grid gap-4 md:grid-cols-2">
                  {pourquoiCards.map((item) => {
                    const Icon = item.icon;
                    return (
                      <ScrollReveal key={item.title}>
                        <div className="h-full 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-2 font-satoshi text-xl font-bold text-foreground">{item.title}</h3>
                          <p className="font-body text-sm leading-relaxed text-foreground/64">{item.text}</p>
                        </div>
                      </ScrollReveal>
                    );
                  })}
                </div>
              </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 lg:mb-14">
                <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">
                    {partBadge}
                  </span>
                </div>
                <div className="grid items-end gap-6 lg:grid-cols-[1.1fr_0.9fr]">
                  <h2 className="font-satoshi text-3xl font-black leading-tight text-white sm:text-4xl lg:text-5xl">
                    {partTitre !== undefined ? (
                      renderAccentTitre(partTitre)
                    ) : (
                      <>
                        Plus que des clients, les applicateurs qui nous rejoignent sont avant tout{' '}
                        <span className="text-teal-vivid">nos partenaires.</span>
                      </>
                    )}
                  </h2>
                  <p className="max-w-xl font-body text-base leading-relaxed text-white/58 lg:pb-1">
                    {partIntro}
                  </p>
                </div>
              </div>
            </ScrollReveal>

            <ScrollReveal stagger>
              <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
                {partnerOffers.map((offer) => {
                  const Icon = offer.icon;
                  return (
                    <article
                      key={offer.title}
                      className="group overflow-hidden rounded-lg border border-white/10 bg-white/[0.045] p-2 transition-colors duration-300 hover:border-teal-vivid/35 hover:bg-white/[0.07]"
                    >
                      <div className="relative aspect-[3/2] overflow-hidden rounded-md bg-white/5">
                        <WpImage
                          image={{ sourceUrl: offer.image, altText: offer.title, width: null, height: null }}
                          alt={offer.title}
                          fill
                          className="h-full w-full object-cover transition-transform duration-700 group-hover:scale-[1.035]"
                        />
                      </div>
                      <div className="p-5 lg:p-6">
                        <div className="mb-3 flex items-center gap-3">
                          <span className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-teal-vivid/14">
                            <Icon className="h-5 w-5 text-teal-vivid" strokeWidth={1.7} />
                          </span>
                          <h3 className="font-satoshi text-lg font-bold leading-tight text-white">{offer.title}</h3>
                        </div>
                        <p className="font-body text-sm leading-relaxed text-white/62">{offer.text}</p>
                      </div>
                    </article>
                  );
                })}
              </div>
            </ScrollReveal>

            <div className="mt-10 flex justify-center">
              <PrimaryCTA href="#candidature">Je rejoins le réseau</PrimaryCTA>
            </div>
          </div>
        </section>

        <ApplicateurFormSection
          screenerTitre={screenerTitre}
          formTitre={formTitre}
          hubspotForm={hubspotForm}
        />

        <section className="bg-cream py-16 lg:py-28">
          <div className="container mx-auto px-4 lg:px-8">
            <div className="grid gap-12 lg:grid-cols-[38fr_62fr] lg:gap-20">
              <ScrollReveal>
                <div className="lg:sticky lg:top-28">
                  <p className="mb-5 font-body text-[10px] font-semibold uppercase tracking-[0.25em] text-primary/60">
                    {parcoursBadge}
                  </p>
                  <h2 className="font-satoshi text-3xl font-black leading-tight text-foreground sm:text-4xl lg:text-5xl">
                    {parcoursTitre}
                  </h2>
                  <div className="mt-8">
                    <a
                      href={MEETING_URL}
                      target="_blank"
                      rel="noreferrer"
                      className="group inline-flex items-center gap-2 rounded-full border border-primary/25 py-2.5 pl-6 pr-2 font-semibold text-primary transition-colors hover:bg-primary/5"
                    >
                      <span className="text-sm">Prendre un RDV téléphonique</span>
                      <span className="flex h-8 w-8 items-center justify-center rounded-full bg-primary/10 transition-transform duration-500 group-hover:translate-x-0.5">
                        <ExternalLink className="h-3.5 w-3.5" />
                      </span>
                    </a>
                  </div>
                </div>
              </ScrollReveal>

              <div className="relative">
                <div className="absolute left-5 top-4 bottom-4 w-px bg-gradient-to-b from-primary/25 via-primary/10 to-transparent lg:left-6" />
                {journeySteps.map((step, index) => {
                  const Icon = step.icon;
                  return (
                    <ScrollReveal key={step.num}>
                      <div className="relative flex items-start gap-5 py-7 lg:gap-7 lg:py-9">
                        <div className="relative z-10 flex h-10 w-10 shrink-0 items-center justify-center rounded-full border border-primary/20 bg-white lg:h-12 lg:w-12">
                          <Icon className="h-4 w-4 text-primary lg:h-5 lg:w-5" strokeWidth={1.8} />
                        </div>
                        <div className="pt-1">
                          <span className="mb-2 block font-body text-xs font-bold uppercase tracking-widest text-primary/58">
                            Étape {step.num}
                          </span>
                          <h3 className="mb-2 font-satoshi text-xl font-bold text-foreground lg:text-2xl">
                            {step.title}
                          </h3>
                          <p className="max-w-xl font-body text-sm leading-relaxed text-foreground/64 lg:text-[15px]">
                            {step.text}
                          </p>
                        </div>
                      </div>
                      {index < journeySteps.length - 1 && <div className="ml-5 h-px bg-foreground/10 lg:ml-6" />}
                    </ScrollReveal>
                  );
                })}
              </div>
            </div>
          </div>
        </section>

        <section className="bg-white py-16 lg:py-28">
          <div className="container mx-auto px-4 lg:px-8">
            <div className="grid items-center gap-10 lg:grid-cols-2 lg:gap-16">
              <ScrollReveal>
                <div>
                  <h2 className="font-satoshi text-3xl font-black leading-tight text-foreground sm:text-4xl lg:text-5xl">
                    {implTitre}
                  </h2>
                  <p className="mt-6 font-body text-base leading-relaxed text-foreground/66 lg:text-lg">
                    {implTexte}
                  </p>
                  <ul className="mt-8 grid gap-3 sm:grid-cols-2">
                    {implantations.map((zone) => (
                      <li key={zone} className="flex items-center gap-3 rounded-lg border border-border bg-cream px-4 py-3">
                        <MapPin className="h-4 w-4 shrink-0 text-primary" strokeWidth={1.8} />
                        <span className="font-body text-sm font-semibold text-foreground/76">{zone}</span>
                      </li>
                    ))}
                  </ul>
                </div>
              </ScrollReveal>
              <ScrollReveal>
                <div className="relative min-h-[340px] overflow-hidden rounded-lg">
                  <WpImage
                    image={{ sourceUrl: implImage, altText: implImageAlt, width: null, height: null }}
                    alt={implImageAlt}
                    fill
                    className="h-full min-h-[340px] w-full object-cover"
                  />
                </div>
              </ScrollReveal>
            </div>
          </div>
        </section>

        <section className="bg-cream py-16 lg:py-28">
          <div className="container mx-auto px-4 lg:px-8">
            <ScrollReveal>
              <div className="mx-auto mb-10 max-w-3xl text-center">
                <h2 className="font-satoshi text-3xl font-black leading-tight text-foreground sm:text-4xl lg:text-5xl">
                  {temTitre}
                </h2>
                <p className="mt-4 font-body text-base leading-relaxed text-foreground/62">
                  {temIntro}
                </p>
              </div>
            </ScrollReveal>
            <div className="grid items-start gap-8 lg:grid-cols-[58fr_42fr] lg:gap-12">
              <ScrollReveal>
                <VideoEmbed
                  title="Témoignage Anthony de TOPROOF"
                  src={temVideoUrl}
                />
              </ScrollReveal>
              <ScrollReveal>
                <div className="rounded-lg border border-border bg-card p-6 lg:p-8">
                  <p className="mb-5 font-body text-[10px] font-semibold uppercase tracking-[0.22em] text-primary/60">
                    {temLabel}
                  </p>
                  <ul className="space-y-4">
                    {temItems.map((item) => (
                      <li key={item} className="flex items-start gap-3">
                        <CheckCircle2 className="mt-0.5 h-5 w-5 shrink-0 text-primary" strokeWidth={1.8} />
                        <span className="font-body text-sm leading-relaxed text-foreground/68">{item}</span>
                      </li>
                    ))}
                  </ul>
                </div>
              </ScrollReveal>
            </div>
          </div>
        </section>

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

        <section className="relative overflow-hidden bg-teal py-16 text-white lg:py-24">
          <img
            src="/images/applicateur-blobs.svg"
            alt=""
            aria-hidden="true"
            className="pointer-events-none absolute -right-[12%] -top-[54%] w-[54%] select-none opacity-18"
          />
          <div className="container relative mx-auto px-4 text-center lg:px-8">
            <ScrollReveal>
              <h2 className="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-xl font-body text-base text-white/72 lg:text-lg">
                {ctaTexte}
              </p>
              <div className="mt-8">
                <PrimaryCTA href={ctaHref}>{ctaLabel}</PrimaryCTA>
              </div>
            </ScrollReveal>
          </div>
        </section>

        <section className="bg-white py-16 lg:py-24">
          <div className="container mx-auto px-4 lg:px-8">
            <ScrollReveal>
              <div className="mx-auto max-w-4xl">
                <h2 className="font-satoshi text-2xl font-black leading-tight text-foreground sm:text-3xl">
                  {seoTitre}
                </h2>
                <div className="mt-6 grid gap-6 font-body text-sm leading-relaxed text-foreground/66 md:grid-cols-3">
                  {seoBlocs.map((bloc) => (
                    <div key={bloc.titre}>
                      <h3 className="mb-2 font-satoshi text-lg font-bold text-foreground">
                        {bloc.titre}
                      </h3>
                      <p>
                        {bloc.texte}
                      </p>
                    </div>
                  ))}
                </div>
              </div>
            </ScrollReveal>
          </div>
        </section>
      </main>
      <Footer />
      <StickyMobileCTA label="Je rejoins le réseau" href="#candidature" phoneHref={MEETING_URL} />
    </>
  );
};

export default DevenirApplicateur;