const { useState, useEffect, useContext } = React;

/* ---------------- Helpers ---------------- */
const fmtEUR = (n) =>
new Intl.NumberFormat('fr-FR', { style: 'currency', currency: 'EUR', maximumFractionDigits: 0 }).format(n);

const smoothScrollTo = (id) => {
  const el = document.getElementById(id);
  if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
};

/* ---------------- Brand ---------------- */
const Logo = ({ dark = false, size = 'text-xl' }) => {
  const h = size === 'text-2xl' ? 'h-9' : 'h-8';
  const txt = dark ? '#ffffff' : '#14213D';
  const whiteBar = dark ? 'rgba(255,255,255,0.9)' : '#ffffff';
  return (
    <div className={`${h} flex items-center gap-2 select-none`} aria-label="France Entreprise" role="img">
      <span className="flex gap-[3px] items-center" aria-hidden="true">
        <span className="block w-[5px] h-[24px] rounded-[1px]" style={{ background: '#0055A4' }}></span>
        <span className="block w-[5px] h-[24px] rounded-[1px]" style={{ background: whiteBar, border: '1px solid rgba(20,33,61,0.12)' }}></span>
        <span className="block w-[5px] h-[24px] rounded-[1px]" style={{ background: '#EF4135' }}></span>
      </span>
      <span className="font-extrabold text-[13px] leading-[1.05] tracking-[1.6px]" style={{ color: txt }}>FRANCE<br/>ENTREPRISE</span>
    </div>
  );
};


/* Small decorative accent line used under section eyebrows */
const AccentLine = ({ tone = 'green' }) =>
<span className={`block h-[3px] w-12 rounded-full mt-4 ${tone === 'green' ? 'bg-major-green' : 'bg-major-orange'}`} aria-hidden="true"></span>;


/* ---------------- Tiny SVG icon set (feather-style, single-stroke) ---------------- */
const Icon = ({ name, className = 'w-6 h-6' }) => {
  const props = { width: 24, height: 24, viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: 1.8, strokeLinecap: 'round', strokeLinejoin: 'round', className };
  switch (name) {
    case 'trend':return <svg {...props}><polyline points="3 17 9 11 13 15 21 7"></polyline><polyline points="14 7 21 7 21 14"></polyline></svg>;
    case 'dashboard':return <svg {...props}><rect x="3" y="3" width="18" height="18" rx="2"></rect><path d="M3 9h18M9 21V9"></path></svg>;
    case 'wallet':return <svg {...props}><path d="M20 7H5a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h15a1 1 0 0 0 1-1V8a1 1 0 0 0-1-1Z"></path><path d="M16 13h2M16 4l-9 3"></path></svg>;
    case 'user-check':return <svg {...props}><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><polyline points="17 11 19 13 23 9"></polyline></svg>;
    case 'globe':return <svg {...props}><circle cx="12" cy="12" r="9"></circle><path d="M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18"></path></svg>;
    case 'check':return <svg {...props}><polyline points="20 6 9 17 4 12"></polyline></svg>;
    case 'phone':return <svg {...props}><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 13 13 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 13 13 0 0 0 2.81.7A2 2 0 0 1 22 16.92Z"></path></svg>;
    case 'arrow-right':return <svg {...props}><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>;
    case 'play':return <svg {...props}><polygon points="5 3 19 12 5 21 5 3"></polygon></svg>;
    case 'star':return <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" className={className}><polygon points="12 2 15 9 22 9 17 14 19 21 12 17 5 21 7 14 2 9 9 9"></polygon></svg>;
    case 'search':return <svg {...props}><circle cx="11" cy="11" r="7"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>;
    case 'edit':return <svg {...props}><path d="M12 20h9"></path><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"></path></svg>;
    case 'users':return <svg {...props}><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>;
    case 'bar-chart':return <svg {...props}><line x1="12" y1="20" x2="12" y2="10"></line><line x1="18" y1="20" x2="18" y2="4"></line><line x1="6" y1="20" x2="6" y2="16"></line></svg>;
    case 'scissors':return <svg {...props}><circle cx="6" cy="6" r="3"></circle><circle cx="6" cy="18" r="3"></circle><line x1="20" y1="4" x2="8.12" y2="15.88"></line><line x1="14.47" y1="14.48" x2="20" y2="20"></line><line x1="8.12" y1="8.12" x2="12" y2="12"></line></svg>;
    case 'braid':return <svg {...props}><path d="M9 3C9 7 15 7 15 11S9 15 9 21"></path><path d="M15 3C15 7 9 7 9 11S15 15 15 21"></path></svg>;
    case 'spiral':return <svg {...props}><circle cx="12" cy="12" r="9"></circle><circle cx="12" cy="12" r="5"></circle><circle cx="12" cy="12" r="1.6"></circle></svg>;
    case 'droplet':return <svg {...props}><path d="M12 2.69l5.66 5.66a8 8 0 1 1-11.31 0z"></path></svg>;
    case 'shield':return <svg {...props}><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path><polyline points="9 12 11 14 15 10"></polyline></svg>;
    case 'heart':return <svg {...props}><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 1 0-7.78 7.78L12 21.23l8.84-8.84a5.5 5.5 0 0 0 0-7.78z"></path></svg>;
    case 'chevron-down':return <svg {...props}><polyline points="6 9 12 15 18 9"></polyline></svg>;
    case 'building':return <svg {...props}><rect x="4" y="3" width="16" height="18" rx="1.5"></rect><path d="M8 7h.01M12 7h.01M16 7h.01M8 11h.01M12 11h.01M16 11h.01M10 21v-5h4v5"></path></svg>;
    default:return null;
  }
};

/* ---------------- TOP BANNER ---------------- */
function TopBanner() {
  const [visible, setVisible] = useState(true);
  if (!visible) return null;

  return (
    <div className="relative z-[55] border-b border-amber-200 bg-amber-50 text-amber-950">
      <div className="max-w-7xl mx-auto px-12 sm:px-14 lg:px-8 py-2.5 flex items-center justify-center gap-3">
        <span className="inline-flex items-center justify-center w-7 h-7 rounded-full bg-amber-500 text-white text-xs font-bold shrink-0" aria-hidden="true">!</span>
        <p className="text-xs sm:text-[13px] leading-snug">
          <strong>Attention, les budgets OPCO 2026 sont bientôt épuisés.</strong>
          <span className="hidden md:inline"> Anticipez votre demande de prise en charge.</span>
        </p>
        <a href="/financements.html" className="hidden sm:inline-flex items-center justify-center rounded-full border border-amber-400 bg-white px-3.5 py-1.5 text-xs font-semibold text-amber-900 hover:bg-amber-100 transition-colors shrink-0">
          Vérifier mon financement
        </a>
        <button
          type="button"
          aria-label="Fermer le bandeau"
          onClick={() => setVisible(false)}
          className="absolute right-3 sm:right-4 top-1/2 -translate-y-1/2 inline-flex items-center justify-center w-8 h-8 rounded-full text-amber-800 hover:bg-amber-100 transition-colors">
          <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round"><path d="M6 6l12 12M18 6L6 18" /></svg>
        </button>
      </div>
    </div>
  );
}

/* ---------------- NAVBAR ---------------- */
function Navbar() {
  const [menuOpen, setMenuOpen] = useState(false);
  const [servicesOpen, setServicesOpen] = useState(false);
  const [formationsOpen, setFormationsOpen] = useState(false);

  useEffect(() => {
    document.body.style.overflow = menuOpen ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [menuOpen]);

  const closeMenus = () => {
    setServicesOpen(false);
    setFormationsOpen(false);
  };

  const services = [
    { href: "/obligations.html", label: "Obligations de formation", icon: "check" },
    { href: "/financements.html", label: "Financements & OPCO", icon: "wallet" },
    { href: "/outils.html", label: "Outils entreprise", icon: "dashboard" },
    { href: "/espace-entreprise.html", label: "Espace entreprise", icon: "building" }
  ];

  return (
    <header className="sticky top-0 inset-x-0 z-50 bg-white border-b border-major-night/[0.06] shadow-[0_1px_12px_rgba(0,0,0,0.05)]">
      <div className="max-w-7xl mx-auto px-5 lg:px-8 h-[68px] flex items-center justify-between gap-6">
        <a href="/" aria-label="France Entreprise, accueil du site principal">
          <Logo size="text-2xl" />
        </a>

        <nav className="hidden lg:flex items-center gap-3" aria-label="Navigation principale">
          <div className="relative">
            <button
              type="button"
              onClick={() => { setServicesOpen(v => !v); setFormationsOpen(false); }}
              aria-expanded={servicesOpen}
              className="inline-flex items-center gap-1.5 rounded-lg px-4 py-2 text-[15px] font-medium text-major-night/85 hover:bg-major-bg hover:text-major-orange transition-colors">
              Services
              <Icon name="chevron-down" className={"w-4 h-4 transition-transform " + (servicesOpen ? "rotate-180" : "")} />
            </button>
            {servicesOpen && (
              <div className="absolute left-0 top-full pt-2 w-64">
                <div className="bg-white rounded-xl shadow-card border border-major-night/10 p-2">
                  {services.map((item) => (
                    <a key={item.href} href={item.href} onClick={closeMenus} className="flex items-center gap-3 px-3 py-2.5 rounded-lg hover:bg-major-bg transition-colors">
                      <span className="w-8 h-8 rounded-lg bg-major-orange/10 text-major-orange flex items-center justify-center shrink-0">
                        <Icon name={item.icon} className="w-4 h-4" />
                      </span>
                      <span className="text-sm font-medium text-major-night">{item.label}</span>
                    </a>
                  ))}
                </div>
              </div>
            )}
          </div>

          <div className="relative">
            <button
              type="button"
              onClick={() => { setFormationsOpen(v => !v); setServicesOpen(false); }}
              aria-expanded={formationsOpen}
              className="inline-flex items-center gap-1.5 rounded-lg px-4 py-2 text-[15px] font-medium text-major-night/85 hover:bg-major-bg hover:text-major-orange transition-colors">
              Formations
              <Icon name="chevron-down" className={"w-4 h-4 transition-transform " + (formationsOpen ? "rotate-180" : "")} />
            </button>
            {formationsOpen && (
              <div className="absolute left-1/2 -translate-x-1/2 top-full pt-2 w-[34rem]">
                <div className="bg-white rounded-xl shadow-card border border-major-night/10 p-3 grid grid-cols-2 gap-1">
                  <a href="#/" onClick={closeMenus} className="col-span-2 flex items-center justify-between rounded-lg bg-major-bg px-3 py-2.5 mb-1">
                    <span className="text-sm font-semibold text-major-night">Voir toutes les formations</span>
                    <Icon name="arrow-right" className="w-4 h-4 text-major-orange" />
                  </a>
                  {DOMAINS.map((d) => (
                    <a key={d.slug} href={"#/domaines/" + d.slug} onClick={closeMenus} className="flex items-center gap-2.5 px-3 py-2.5 rounded-lg hover:bg-major-bg transition-colors">
                      <span className="w-8 h-8 rounded-lg bg-major-orange/10 text-major-orange flex items-center justify-center shrink-0">
                        <Icon name={d.icon} className="w-4 h-4" />
                      </span>
                      <span className="text-sm font-medium text-major-night leading-tight">{d.name}</span>
                    </a>
                  ))}
                </div>
              </div>
            )}
          </div>
        </nav>

        <div className="formation-header-actions hidden md:flex items-center gap-4 self-stretch">
          <a href="tel:+33189480878" className="hidden lg:inline-flex items-center gap-2 h-[42px] px-4 rounded-lg border border-major-night/15 text-major-night font-semibold text-[14px] hover:border-major-orange hover:text-major-orange transition-colors">
            01 89 48 08 78
          </a>
          <a href="/#lead" className="main-header-cta inline-flex items-center justify-center h-[42px] bg-major-orange hover:bg-major-orange-dark text-white text-sm font-semibold px-5 rounded-lg transition-colors">
            Ouvrir mon dossier
          </a>
          <a className="alternance-link" href="https://www.france-alternance.net" target="_blank" rel="noopener noreferrer" aria-label="Ouvrir France Entreprise Alternance">
            <span>France Entreprise<span className="alternance-dot">.Alternance</span></span>
            <strong aria-hidden="true">›</strong>
          </a>
        </div>

        <button
          type="button"
          className="lg:hidden w-10 h-10 inline-flex items-center justify-center rounded-lg text-major-night hover:bg-major-bg"
          onClick={() => setMenuOpen(true)}
          aria-label="Ouvrir le menu"
          aria-expanded={menuOpen}>
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round"><path d="M3 6h18M3 12h18M3 18h18" /></svg>
        </button>
      </div>

      <div className={"mob-menu lg:hidden fixed inset-0 bg-major-night text-white z-[60] overflow-y-auto " + (menuOpen ? "" : "closed")} role="dialog" aria-modal="true" aria-label="Menu principal">
        <div className="h-[68px] px-5 flex items-center justify-between border-b border-white/10">
          <a href="/" onClick={() => setMenuOpen(false)}><Logo dark size="text-2xl" /></a>
          <button type="button" className="w-10 h-10 inline-flex items-center justify-center rounded-lg" onClick={() => setMenuOpen(false)} aria-label="Fermer le menu">
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round"><path d="M6 6l12 12M18 6L6 18" /></svg>
          </button>
        </div>
        <div className="px-6 py-6">
          <div className="text-[11px] uppercase text-white/45 mb-2">Services</div>
          {services.map((item) => (
            <a key={item.href} href={item.href} onClick={() => setMenuOpen(false)} className="block py-3 border-b border-white/10 font-display font-medium">{item.label}</a>
          ))}

          <div className="text-[11px] uppercase text-white/45 mt-7 mb-2">Formations</div>
          <a href="#/" onClick={() => setMenuOpen(false)} className="block py-3 border-b border-white/10 font-display font-semibold text-major-green">Voir toutes les formations</a>
          {DOMAINS.map((d) => (
            <a key={d.slug} href={"#/domaines/" + d.slug} onClick={() => setMenuOpen(false)} className="block py-3 border-b border-white/10 font-display font-medium">{d.name}</a>
          ))}

          <a href="https://www.france-alternance.net" target="_blank" rel="noopener noreferrer" className="mobile-alternance-link mt-7 flex items-center justify-between gap-3 rounded-lg border border-white/15 bg-white/10 px-5 py-4 font-semibold">
            <span>France Entreprise<span className="text-major-green font-bold">.Alternance</span></span><span aria-hidden="true">›</span>
          </a>
          <a href="tel:+33189480878" className="mt-3 flex items-center justify-center gap-2 border border-white/20 rounded-lg px-5 py-3.5 font-semibold">
            01 89 48 08 78
          </a>
          <a href="/#lead" className="mt-3 flex items-center justify-center bg-major-orange text-white font-semibold px-5 py-4 rounded-lg">Ouvrir mon dossier</a>
        </div>
      </div>
    </header>
  );
}

/* ---------------- HERO ---------------- */
const HERO_THEMES = [
{
  key: "catalogue",
  eyebrow: "Catalogue France Entreprise",
  eyebrowDot: "bg-major-green",
  eyebrowText: "text-major-green-dark",
  eyebrowBg: "bg-major-green-light",
  punch: "Des formations concrètes pour faire progresser chaque métier.",
  h1Before: "Développez les ",
  h1Highlight: "compétences dont votre entreprise a besoin",
  h1After: ", aujourd'hui et demain.",
  body: "Explorez nos formations en management, digital et IA, commerce, recouvrement, QSE, sécurité BTP et coiffure. Des parcours opérationnels, disponibles en présentiel ou à distance.",
  visual: "catalogue",
  bg1: "rgba(0,85,164,0.08)",
  bg2: "rgba(239,65,53,0.04)"
},
{
  key: "management",
  eyebrow: "Management",
  eyebrowDot: "bg-major-orange",
  eyebrowText: "text-major-orange-dark",
  eyebrowBg: "bg-major-orange/10",
  punch: "Des managers mieux outillés font avancer toute l'entreprise.",
  h1Before: "Renforcez la posture, la communication et ",
  h1Highlight: "l'efficacité de vos managers",
  h1After: ".",
  body: "Prise de poste, management au quotidien, leadership, équipes hybrides : des formations directement applicables aux situations réelles de vos responsables.",
  visual: "management",
  bg1: "rgba(20,33,61,0.08)",
  bg2: "rgba(0,85,164,0.06)"
},
{
  key: "digital",
  eyebrow: "Digital & intelligence artificielle",
  eyebrowDot: "bg-major-green",
  eyebrowText: "text-major-green-dark",
  eyebrowBg: "bg-major-green-light",
  punch: "L'IA devient utile lorsqu'elle s'intègre vraiment au travail quotidien.",
  h1Before: "Gagnez du temps et développez votre activité grâce au ",
  h1Highlight: "digital et à l'IA",
  h1After: ".",
  body: "IA générative, assistants personnalisés et réseaux sociaux : vos équipes apprennent à utiliser les bons outils avec méthode, autonomie et responsabilité.",
  visual: "digital",
  bg1: "rgba(8,207,141,0.08)",
  bg2: "rgba(0,85,164,0.07)"
},
{
  key: "commerce",
  eyebrow: "Commerce · vente · négociation",
  eyebrowDot: "bg-major-orange",
  eyebrowText: "text-major-orange-dark",
  eyebrowBg: "bg-major-orange/10",
  punch: "Une méthode commerciale claire transforme chaque échange en opportunité.",
  h1Before: "Faites progresser vos équipes en ",
  h1Highlight: "vente et négociation",
  h1After: ".",
  body: "Fondamentaux de la vente, performance commerciale et négociation : des parcours conçus pour mieux découvrir, argumenter, conclure et fidéliser.",
  visual: "commerce",
  bg1: "rgba(239,65,53,0.06)",
  bg2: "rgba(0,85,164,0.06)"
},
{
  key: "recouvrement",
  eyebrow: "Risque client & recouvrement",
  eyebrowDot: "bg-major-orange",
  eyebrowText: "text-major-orange-dark",
  eyebrowBg: "bg-major-orange/10",
  punch: "Prévenir les impayés protège directement la trésorerie.",
  h1Before: "Sécurisez vos ventes et améliorez votre ",
  h1Highlight: "recouvrement client",
  h1After: ".",
  body: "Évaluation du risque, relances, négociation et procédures : vos équipes acquièrent une méthode structurée pour accélérer les encaissements sans dégrader la relation client.",
  visual: "recouvrement",
  bg1: "rgba(245,158,11,0.08)",
  bg2: "rgba(20,33,61,0.06)"
},
{
  key: "qse",
  eyebrow: "Qualité · sécurité · environnement",
  eyebrowDot: "bg-major-green",
  eyebrowText: "text-major-green-dark",
  eyebrowBg: "bg-major-green-light",
  punch: "La conformité devient un levier lorsqu'elle est comprise par tous.",
  h1Before: "Structurez vos pratiques et développez une vraie ",
  h1Highlight: "culture QSE",
  h1After: ".",
  body: "Qualité, prévention, sécurité et environnement : des formations pour maîtriser les risques, fiabiliser les processus et engager durablement les équipes.",
  visual: "qse",
  bg1: "rgba(8,207,141,0.08)",
  bg2: "rgba(20,33,61,0.06)"
},
{
  key: "btp",
  eyebrow: "Sécurité & prévention BTP",
  eyebrowDot: "bg-major-orange",
  eyebrowText: "text-major-orange-dark",
  eyebrowBg: "bg-major-orange/10",
  punch: "Sur un chantier, les bons réflexes se forment avant l'urgence.",
  h1Before: "Prévenez les risques et renforcez la ",
  h1Highlight: "sécurité sur vos chantiers",
  h1After: ".",
  body: "Travail en hauteur, équipements, risques chimiques et culture sécurité : des formations concrètes, adaptables à vos métiers et à vos réalités terrain.",
  visual: "btp",
  bg1: "rgba(245,158,11,0.08)",
  bg2: "rgba(0,85,164,0.06)"
},
{
  key: "coiffure",
  eyebrow: "Coiffure & barber",
  eyebrowDot: "bg-major-green",
  eyebrowText: "text-major-green-dark",
  eyebrowBg: "bg-major-green-light",
  punch: "Des techniques directement applicables en salon et en barbershop.",
  h1Before: "Développez votre carte avec nos formations ",
  h1Highlight: "coiffure et barber",
  h1After: ".",
  body: "Coupes, dégradés, barbe, tresses, locks et coloration : choisissez une formation ciblée ou composez un parcours à la carte selon votre niveau.",
  visual: "coiffure",
  bg1: "rgba(0,85,164,0.07)",
  bg2: "rgba(8,207,141,0.06)"
}];

function Hero() {
  const [themeIdx, setThemeIdx] = useState(() => Math.floor(Math.random() * HERO_THEMES.length));
  const [fading, setFading] = useState(false);
  const theme = HERO_THEMES[themeIdx];
  const { open: openModal } = useModal();

  useEffect(() => {
    const id = setInterval(() => {
      setFading(true);
      setTimeout(() => {
        setThemeIdx(i => (i + 1) % HERO_THEMES.length);
        setFading(false);
      }, 500);
    }, 10000);
    return () => clearInterval(id);
  }, []);

  return (
    <section id="top" className="relative overflow-hidden bg-white">
      {/* themed background blobs */}
      <div aria-hidden="true" className="absolute -top-32 -right-24 w-[640px] h-[640px] rounded-full blur-3xl pointer-events-none transition-all duration-500" style={{ background: theme.bg1 }} />
      <div aria-hidden="true" className="absolute top-40 -left-32 w-[520px] h-[520px] rounded-full blur-3xl pointer-events-none transition-all duration-500" style={{ background: theme.bg2 }} />
      {/* faint dot pattern */}
      <div aria-hidden="true" className="absolute inset-0 pointer-events-none opacity-40" style={{
        backgroundImage: 'radial-gradient(rgba(20,33,61,0.06) 1px, transparent 1px)',
        backgroundSize: '24px 24px',
        maskImage: 'linear-gradient(to bottom, black 0%, black 60%, transparent 100%)',
        WebkitMaskImage: 'linear-gradient(to bottom, black 0%, black 60%, transparent 100%)'
      }} />

      <div className="relative max-w-7xl mx-auto px-5 lg:px-8 pt-16 lg:pt-24 pb-16 lg:pb-20 grid md:grid-cols-12 gap-10 lg:gap-12 items-center">
        {/* Left: copy */}
        <div className={"md:col-span-7 transition-opacity duration-500 " + (fading ? "opacity-0" : "opacity-100")}>
          <div className={`inline-flex items-center gap-2 text-xs font-semibold ${theme.eyebrowText} ${theme.eyebrowBg} rounded-full px-3.5 py-1.5 tracking-wide uppercase`}>
            <span className={`w-1.5 h-1.5 rounded-full ${theme.eyebrowDot} inline-block`} />
            {theme.eyebrow}
          </div>

          <p className="mt-5 font-display font-semibold text-major-orange text-lg sm:text-xl leading-snug max-w-2xl">
            {theme.punch}
          </p>

          <h1 className="mt-3 font-display font-bold text-[40px] sm:text-5xl lg:text-[60px] leading-[1.03] text-major-night">
            {theme.h1Before}<span className="text-major-orange">{theme.h1Highlight}</span>{theme.h1After}
          </h1>

          <p className="mt-6 text-lg text-major-gray max-w-2xl leading-relaxed">
            {theme.body}
          </p>

          <div className="mt-8 flex flex-col sm:flex-row gap-3 sm:gap-4">
            <button
              onClick={() => openModal('demo')}
              className="inline-flex items-center justify-center gap-2 bg-major-orange hover:bg-major-orange-dark text-white font-semibold px-7 py-4 rounded-lg transition-all hover:shadow-cta">

              Demander une démonstration
              <Icon name="arrow-right" className="w-4 h-4" />
            </button>
            <button
              onClick={() => openModal('brochure')}
              className="inline-flex items-center justify-center gap-2 border-2 border-major-night/15 hover:border-major-night text-major-night font-semibold px-7 py-4 rounded-lg transition-colors bg-white">

              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3" /></svg>
              Recevoir le programme (PDF)
            </button>
          </div>

          {/* Rating row */}
          <div className="mt-10 flex flex-wrap items-center gap-x-8 gap-y-4">
            <div className="flex items-center gap-3">
              <div className="flex text-major-orange">
                {[0, 1, 2, 3, 4].map((i) => <Icon key={i} name="star" className="w-5 h-5" />)}
              </div>
              <div>
                <div className="font-display font-bold text-major-night text-lg leading-none">9,2<span className="text-major-gray font-medium">/10</span></div>
                <div className="text-xs text-major-gray mt-1">2&nbsp;429 évaluations à chaud</div>
              </div>
            </div>

            <div className="h-10 w-px bg-major-night/10 hidden sm:block" />

            <div className="flex items-center gap-3">
              
              <div className="text-xs text-major-gray leading-relaxed max-w-[210px]">
                <strong className="text-major-night">Éligible OPCO</strong><br />
                Formation finançable via OPCO, France Travail et aides régionales.
              </div>
            </div>
          </div>
        </div>

        {/* Right: visual */}
        <div className={"md:col-span-5 transition-opacity duration-500 " + (fading ? "opacity-0" : "opacity-100")}>
          <HeroVisual variant={theme.visual} />
        </div>
      </div>
    </section>);

}

/* Dashboard mockups per Hero theme — same structural shell, swap copy & KPIs */
const HERO_VISUALS = {
  catalogue: {
    header: { label: "Catalogue de formations", title: "France Entreprise" },
    badge: { text: "7 domaines", tone: "green" },
    kpis: [
      { v: "7", l: "domaines d'expertise" },
      { v: "2", l: "modalités possibles" },
      { v: "OPCO", l: "financement étudié" }
    ],
    chartTitle: "Progression des compétences",
    chartTag: "Parcours adapté",
    legendA: "Positionnement",
    legendB: "Après formation",
    sessions: [
      { title: "Management & leadership", meta: "présentiel ou distanciel", status: "Disponible", tone: "orange" },
      { title: "Digital, IA & commerce", meta: "programme personnalisable", status: "Disponible", tone: "gray" }
    ],
    chipTop: { label: "Accompagnement", tag: "Inclus", value: "sur mesure", meta: "besoin, programme et financement", progress: 88 },
    chipBottom: { ring: "7", title: "Domaines métiers", meta: "une offre pour chaque enjeu", ringPct: 88 }
  },
  management: {
    header: { label: "Parcours management", title: "Managers & leaders" },
    badge: { text: "Tous niveaux", tone: "orange" },
    kpis: [
      { v: "N1", l: "prise de fonction" },
      { v: "N2", l: "management quotidien" },
      { v: "N3", l: "leadership" }
    ],
    chartTitle: "Posture managériale",
    chartTag: "Mise en pratique",
    legendA: "Avant",
    legendB: "Après",
    sessions: [
      { title: "Manager, les clés pour démarrer", meta: "cas pratiques et simulations", status: "Disponible", tone: "orange" },
      { title: "Manager à distance", meta: "équipes hybrides", status: "Disponible", tone: "gray" }
    ],
    chipTop: { label: "Compétence visée", tag: "Terrain", value: "mieux manager", meta: "communiquer, décider, fédérer", progress: 84 },
    chipBottom: { ring: "3", title: "Niveaux progressifs", meta: "du nouveau manager au leader", ringPct: 86 }
  },
  digital: {
    header: { label: "Digital & IA", title: "Productivité augmentée" },
    badge: { text: "Opérationnel", tone: "green" },
    kpis: [
      { v: "IA", l: "usages métier" },
      { v: "Web", l: "visibilité" },
      { v: "Auto", l: "automatisation" }
    ],
    chartTitle: "Temps gagné sur les tâches",
    chartTag: "Applications métier",
    legendA: "Méthode actuelle",
    legendB: "Avec les outils",
    sessions: [
      { title: "IA, efficacité & productivité", meta: "prompts et cas d'usage", status: "Disponible", tone: "orange" },
      { title: "Développer son activité en ligne", meta: "réseaux sociaux", status: "Disponible", tone: "gray" }
    ],
    chipTop: { label: "Résultat attendu", tag: "Concret", value: "temps gagné", meta: "outils intégrés au quotidien", progress: 82 },
    chipBottom: { ring: "IA", title: "Usages responsables", meta: "méthode, sécurité et autonomie", ringPct: 90 }
  },
  commerce: {
    header: { label: "Commerce & vente", title: "Performance commerciale" },
    badge: { text: "Progressif", tone: "orange" },
    kpis: [
      { v: "N1", l: "fondamentaux" },
      { v: "N2", l: "performance" },
      { v: "N3", l: "négociation" }
    ],
    chartTitle: "Maîtrise de l'entretien de vente",
    chartTag: "Cas pratiques",
    legendA: "Diagnostic",
    legendB: "Après parcours",
    sessions: [
      { title: "Les fondamentaux de la vente", meta: "découvrir et argumenter", status: "Disponible", tone: "orange" },
      { title: "Améliorer sa performance", meta: "conclure et fidéliser", status: "Disponible", tone: "gray" }
    ],
    chipTop: { label: "Objectif business", tag: "Vente", value: "plus d'impact", meta: "à chaque étape commerciale", progress: 86 },
    chipBottom: { ring: "3", title: "Niveaux de maîtrise", meta: "du vendeur au négociateur", ringPct: 84 }
  },
  recouvrement: {
    header: { label: "Risque client", title: "Trésorerie sécurisée" },
    badge: { text: "Pratique", tone: "orange" },
    kpis: [
      { v: "Prévenir", l: "le risque" },
      { v: "Relancer", l: "avec méthode" },
      { v: "Négocier", l: "une solution" }
    ],
    chartTitle: "Efficacité des relances",
    chartTag: "Process structuré",
    legendA: "Avant",
    legendB: "Après",
    sessions: [
      { title: "Prévenir les impayés", meta: "analyse et sécurisation", status: "Disponible", tone: "orange" },
      { title: "Recouvrer ses créances", meta: "relance et négociation", status: "Disponible", tone: "gray" }
    ],
    chipTop: { label: "Priorité", tag: "Cash", value: "encaisser mieux", meta: "sans détériorer la relation", progress: 80 },
    chipBottom: { ring: "360°", title: "Gestion du risque", meta: "prévention, relance, recours", ringPct: 88 }
  },
  qse: {
    header: { label: "Démarche QSE", title: "Qualité & prévention" },
    badge: { text: "Conforme", tone: "green" },
    kpis: [
      { v: "Q", l: "qualité" },
      { v: "S", l: "sécurité" },
      { v: "E", l: "environnement" }
    ],
    chartTitle: "Maîtrise des processus",
    chartTag: "Amélioration continue",
    legendA: "État initial",
    legendB: "Après formation",
    sessions: [
      { title: "Culture qualité & conformité", meta: "outils et indicateurs", status: "Disponible", tone: "orange" },
      { title: "Prévention des risques", meta: "situations professionnelles", status: "Disponible", tone: "gray" }
    ],
    chipTop: { label: "Démarche", tag: "QSE", value: "plus fiable", meta: "processus, équipes et conformité", progress: 87 },
    chipBottom: { ring: "QSE", title: "Culture partagée", meta: "des règles comprises et appliquées", ringPct: 92 }
  },
  btp: {
    header: { label: "Prévention BTP", title: "Sécurité chantier" },
    badge: { text: "Terrain", tone: "orange" },
    kpis: [
      { v: "EPI", l: "bons équipements" },
      { v: "Risque", l: "bien identifié" },
      { v: "Réflexe", l: "mis en pratique" }
    ],
    chartTitle: "Maîtrise des risques terrain",
    chartTag: "Prévention active",
    legendA: "Positionnement",
    legendB: "Après formation",
    sessions: [
      { title: "Travail en hauteur", meta: "prévention et équipements", status: "Disponible", tone: "orange" },
      { title: "Culture sécurité chantier", meta: "cas concrets", status: "Disponible", tone: "gray" }
    ],
    chipTop: { label: "Objectif", tag: "Sécurité", value: "agir avant", meta: "identifier, prévenir, protéger", progress: 90 },
    chipBottom: { ring: "BTP", title: "Réflexes terrain", meta: "ancrés par la mise en situation", ringPct: 93 }
  },
  coiffure: {
    header: { label: "Coiffure & barber", title: "Compétences salon" },
    badge: { text: "À la carte", tone: "green" },
    kpis: [
      { v: "Coupe", l: "femme et homme" },
      { v: "Afro", l: "tresses et locks" },
      { v: "Couleur", l: "techniques modernes" }
    ],
    chartTitle: "Maîtrise des gestes techniques",
    chartTag: "Pratique guidée",
    legendA: "Début",
    legendB: "Fin de module",
    sessions: [
      { title: "Dégradés, fades & barbe", meta: "sur modèles", status: "Disponible", tone: "orange" },
      { title: "Tresses, locks & coloration", meta: "par niveau", status: "Disponible", tone: "gray" }
    ],
    chipTop: { label: "Parcours", tag: "Flexible", value: "à la carte", meta: "modules choisis selon le niveau", progress: 85 },
    chipBottom: { ring: "Pro", title: "Gestes maîtrisés", meta: "évaluation pratique en formation", ringPct: 92 }
  }
};

function HeroVisual({ variant = 'plan' }) {
  const v = HERO_VISUALS[variant] || HERO_VISUALS.plan;
  const badgeTone = {
    green: 'text-major-green-dark bg-major-green/15',
    orange: 'text-major-orange-dark bg-major-orange/15',
    red: 'text-major-red bg-major-red/10'
  }[v.badge.tone] || 'text-major-green-dark bg-major-green/15';
  const badgeDot = {
    green: 'bg-major-green-dark',
    orange: 'bg-major-orange',
    red: 'bg-major-red'
  }[v.badge.tone] || 'bg-major-green-dark';

  // Ring percentage → dashoffset
  const ringCirc = 100.5;
  const ringOffset = ringCirc - ringCirc * v.chipBottom.ringPct / 100;

  return (
    <div className="relative w-full max-w-[520px] mx-auto aspect-[5/6]">
      {/* Main dashboard card */}
      <div className="absolute inset-0 rounded-3xl bg-white border border-major-night/10 shadow-card overflow-hidden">
        {/* Header bar */}
        <div className="px-5 pt-5 pb-4 border-b border-major-night/[0.06] flex items-center justify-between">
          <div>
            <div className="text-[11px] font-semibold text-major-gray uppercase tracking-wider">{v.header.label}</div>
            <div className="mt-1 font-display font-bold text-major-night text-lg leading-tight">{v.header.title}</div>
          </div>
          <span className={`inline-flex items-center gap-1.5 text-[11px] font-semibold rounded-full px-2.5 py-1 ${badgeTone}`}>
            <span className={`w-1.5 h-1.5 rounded-full ${badgeDot}`}></span>
            {v.badge.text}
          </span>
        </div>

        {/* KPI row */}
        <div className="grid grid-cols-3 divide-x divide-major-night/[0.06] border-b border-major-night/[0.06]">
          {v.kpis.map((k, i) =>
          <div key={i} className="px-3 py-4 text-center">
              <div className="font-display font-bold text-major-night text-xl leading-none">{k.v}</div>
              <div className="mt-1.5 text-[10px] text-major-gray leading-tight">{k.l}</div>
            </div>
          )}
        </div>

        {/* Bar chart */}
        <div className="px-5 pt-4 pb-3">
          <div className="flex items-center justify-between mb-2 gap-2">
            <div className="text-[11px] font-semibold text-major-night truncate">{v.chartTitle}</div>
            <span className="text-[10px] font-medium text-major-green-dark bg-major-green/12 rounded px-1.5 py-0.5 whitespace-nowrap">{v.chartTag}</span>
          </div>
          <div className="flex items-end gap-2 h-20">
            {[
            { p: 32, c: 48 },
            { p: 40, c: 58 },
            { p: 52, c: 72 },
            { p: 60, c: 88 }].
            map((b, i) =>
            <div key={i} className="flex-1 flex items-end gap-1 h-full">
                <div className="flex-1 rounded-t-sm bg-major-night/15" style={{ height: `${b.p}%` }} />
                <div className="flex-1 rounded-t-sm bg-major-orange" style={{ height: `${b.c}%` }} />
              </div>
            )}
          </div>
          <div className="mt-2 flex justify-between text-[10px] text-major-gray">
            <span>T1</span><span>T2</span><span>T3</span><span>T4</span>
          </div>
        </div>

        {/* Legend */}
        <div className="px-5 pb-4 flex items-center gap-4 text-[10px] text-major-gray">
          <span className="inline-flex items-center gap-1.5"><span className="w-2 h-2 rounded-sm bg-major-night/20"></span> {v.legendA}</span>
          <span className="inline-flex items-center gap-1.5"><span className="w-2 h-2 rounded-sm bg-major-orange"></span> {v.legendB}</span>
        </div>

        {/* Active sessions list */}
        <div className="border-t border-major-night/[0.06] px-5 py-4 space-y-2.5 bg-major-bg/50">
          {v.sessions.map((row, i) =>
          <div key={i} className="flex items-center justify-between gap-3">
              <div className="min-w-0">
                <div className="font-display font-semibold text-major-night text-[12px] truncate">{row.title}</div>
                <div className="text-[10px] text-major-gray mt-0.5">{row.meta}</div>
              </div>
              <span className={`text-[10px] font-semibold rounded-full px-2 py-0.5 whitespace-nowrap ${
            row.tone === 'orange' ?
            'bg-major-orange/12 text-major-orange-dark' :
            'bg-major-night/[0.08] text-major-night/70'}`
            }>{row.status}</span>
            </div>
          )}
        </div>
      </div>

      {/* Floating chip top-left */}
      <div className="absolute -top-10 -left-3 md:-left-6 w-[58%] bg-major-night text-white rounded-2xl shadow-card p-4">
        <div className="flex items-center justify-between gap-2">
          <span className="text-[10px] font-semibold text-white/55 uppercase tracking-wider truncate">{v.chipTop.label}</span>
          <span className="text-[10px] font-semibold text-major-green bg-major-green/15 rounded-full px-1.5 py-0.5 whitespace-nowrap">{v.chipTop.tag}</span>
        </div>
        <div className="mt-2 font-display font-bold text-2xl leading-none">{v.chipTop.value}</div>
        <div className="mt-1 text-[10px] text-white/55">{v.chipTop.meta}</div>
        <div className="mt-3 h-1.5 rounded-full bg-white/10 overflow-hidden">
          <div className="h-full bg-major-orange rounded-full" style={{ width: `${v.chipTop.progress}%` }} />
        </div>
      </div>

      {/* Floating chip bottom-right */}
      <div className="absolute -bottom-5 -right-3 md:-right-6 w-[58%] bg-white rounded-2xl shadow-card border border-major-night/5 p-4">
        <div className="flex items-center gap-3">
          <div className="relative w-12 h-12 flex-shrink-0">
            <svg viewBox="0 0 36 36" className="w-12 h-12">
              <circle cx="18" cy="18" r="16" fill="none" stroke="#EEEAF5" strokeWidth="3" />
              <circle cx="18" cy="18" r="16" fill="none" stroke="#EF4135" strokeWidth="3" strokeLinecap="round" strokeDasharray={ringCirc} strokeDashoffset={ringOffset} transform="rotate(-90 18 18)" />
            </svg>
            <span className="absolute inset-0 flex items-center justify-center font-display font-bold text-major-night text-[10px]">{v.chipBottom.ring}</span>
          </div>
          <div className="flex-1 min-w-0">
            <div className="font-display font-semibold text-major-night text-[13px] leading-tight">{v.chipBottom.title}</div>
            <div className="text-[10px] text-major-gray mt-0.5">{v.chipBottom.meta}</div>
          </div>
        </div>
      </div>
    </div>);

}

/* ---------------- CLIENT LOGO CLOUD ---------------- */
function ClientCloud() {
  const clients = [
  { name: 'SNCF', src: 'logos/sncf.png' },
  { name: 'Bouygues Telecom', src: 'logos/bouygues-telecom.png' },
  { name: 'Caisse d’Épargne', src: 'logos/caisse-epargne.png' },
  { name: 'Europcar', src: 'logos/europcar.png' },
  { name: 'Verisure', src: 'logos/verisure.png' },
  { name: 'Orpi', src: 'logos/orpi.png' },
  { name: 'Optic 2000', src: 'logos/optic2000.png' },
  { name: 'CM Motors', src: 'logos/cm-motors.png' },
  { name: 'Chez l’Ancien', src: 'logos/chez-lancien.png' },
  { name: 'Labagelerie', src: 'logos/labagelerie.png' }];


  return (
    <section className="bg-major-bg border-y border-major-night/[0.06] py-14 lg:py-16">
      <div className="max-w-7xl mx-auto px-5 lg:px-8">
        <div className="text-center max-w-2xl mx-auto">
          <h2 className="font-display font-bold text-2xl sm:text-3xl text-major-night">
            Ils ont structuré leur plan de formation avec <span className="text-major-green-dark">France Entreprise</span>
          </h2>
          <p className="mt-3 text-major-gray">
            Des salons et barbershops nous confient la montée en compétence de leurs équipes.
          </p>
        </div>

        <div className="mt-10 logo-marquee relative overflow-hidden">
          <div className="logo-fade-left"></div>
          <div className="logo-fade-right"></div>
          <div className="logo-track">
            {[...clients, ...clients].map((c, i) =>
            <div key={i} className="flex items-center justify-center h-14 flex-shrink-0">
                <img
                src={c.src}
                alt={c.name}
                className="max-h-12 w-auto max-w-[160px] object-contain opacity-70 hover:opacity-100 transition-opacity duration-200"
                style={{ mixBlendMode: 'normal' }} />
              
              </div>
            )}
          </div>
        </div>
      </div>
    </section>);

}

/* ---------------- WHY MAJOR (5 benefits) ---------------- */
function WhyMajor() {
  const { open: openModal } = useModal();
  const items = [
  {
    icon: 'trend',
    title: 'Des prestations qui rapportent',
    body: "On forme vos équipes sur les services les plus demandés et les plus rentables : dégradés, barbe, tresses, locks, coloration. Chaque compétence ouvre une nouvelle source de revenus.",
    cta: 'Voir les prestations',
    tone: 'purple'
  },
  {
    icon: 'check',
    title: 'Des modules à la carte',
    body: "12 modules indépendants, classés par niveau. Vous choisissez seulement ce dont votre salon a besoin, ou le parcours complet. Pas de catalogue imposé.",
    cta: 'Composer ma formation',
    tone: 'green'
  },
  {
    icon: 'users',
    title: 'Formateurs praticiens',
    body: "Des pros de la coiffure en activité, pas des théoriciens. Démonstrations, mises en pratique sur têtes d'étude et modèles réels.",
    cta: 'Rencontrer nos formateurs',
    tone: 'purple'
  },
  {
    icon: 'wallet',
    title: 'Financement pris en charge',
    body: "Formation éligible OPCO, France Travail et aides régionales. On monte et on suit le dossier de prise en charge avec vous.",
    cta: 'Estimer mon financement',
    tone: 'green'
  },
  {
    icon: 'user-check',
    title: 'Sur place ou en centre',
    body: "Formation en présentiel dans votre salon (intra) ou en centre équipé. Effectif limité à 8 pour une vraie pratique encadrée.",
    cta: 'Voir les modalités',
    tone: 'purple'
  }];


  return (
    <section id="pourquoi" className="bg-white py-20 lg:py-28">
      <div className="max-w-7xl mx-auto px-5 lg:px-8">
        <div className="max-w-3xl">
          <span className="inline-block text-xs font-semibold text-major-orange tracking-widest uppercase">Pourquoi nous</span>
          <h2 className="mt-3 font-display font-bold text-3xl sm:text-4xl lg:text-[44px] leading-tight text-major-night">
            Pourquoi les salons et barbershops forment leur équipe avec <span className="text-major-orange">France Entreprise</span>
          </h2>
          <AccentLine />
          <p className="mt-4 text-major-gray text-lg leading-relaxed">
            Coupe, dégradés, tresses, locks, coloration : on forme vos équipes aux prestations les plus demandées, pour une clientèle homme et femme, avec des modules à composer à la carte.
          </p>
        </div>

        <div className="mt-12 grid sm:grid-cols-2 lg:grid-cols-3 gap-5">
          {items.map((it, i) => {
            const isGreen = it.tone === 'green';
            return (
              <article
                key={i}
                className={`group bg-white border border-major-night/10 rounded-2xl p-7 transition-all hover:shadow-card flex flex-col ${isGreen ? 'hover:border-major-green/50' : 'hover:border-major-orange/40'}`}>
                
                <div className={`w-12 h-12 rounded-xl flex items-center justify-center mb-5 transition-colors ${
                isGreen ?
                'bg-major-green/15 text-major-green-dark group-hover:bg-major-green group-hover:text-white' :
                'bg-major-orange/10 text-major-orange group-hover:bg-major-orange group-hover:text-white'}`
                }>
                  <Icon name={it.icon} className="w-6 h-6" />
                </div>
                <h3 className="font-display font-semibold text-major-night text-lg leading-snug">{it.title}</h3>
                <p className="mt-3 text-[15px] text-major-gray leading-relaxed flex-1">{it.body}</p>
                <a
                  href="#"
                  onClick={(e) => {e.preventDefault();openModal('demo');}}
                  className={`mt-5 inline-flex items-center gap-1.5 text-sm font-semibold hover:gap-2 transition-all ${isGreen ? 'text-major-green-dark' : 'text-major-orange'}`}>
                  
                  {it.cta}
                  <Icon name="arrow-right" className="w-4 h-4" />
                </a>
              </article>);

          })}
        </div>
      </div>
    </section>);

}

/* ---------------- SOLUTIONS (3 offers) ---------------- */
function Solutions() {
  const { open: openModal } = useModal();
  const offers = [
  {
    tag: 'Le plus flexible',
    title: 'Modules à la carte',
    desc: "Choisissez un ou plusieurs des 12 modules (dégradés, barbe, tresses, locks, coloration...). Idéal pour combler une compétence précise sans tout reprendre.",
    hint: 'Parfait pour monter en compétence sur une prestation ciblée.',
    cta: 'Composer ma formation',
    featured: true
  },
  {
    tag: 'Le plus complet',
    title: 'Parcours complet · 294 h',
    desc: "Les 12 modules enchaînés, de l'accueil client aux techniques avancées. Pour former un coiffeur ou un barbier de A à Z, ou réussir une reconversion.",
    hint: 'Recommandé pour une montée en compétence complète et certifiante.',
    cta: 'Voir le parcours',
    featured: false
  },
  {
    tag: 'Le plus adapté',
    title: 'Formation en salon (intra)',
    desc: "On vient former toute votre équipe dans votre salon ou barbershop, sur vos cas et votre clientèle. Contenu et planning calés sur votre activité.",
    hint: "Idéal pour homogénéiser le niveau de toute l'équipe.",
    cta: 'Organiser une session',
    featured: false
  }];


  return (
    <section id="solutions" className="bg-major-bg py-20 lg:py-28">
      <div className="max-w-7xl mx-auto px-5 lg:px-8">
        <div className="max-w-3xl">
          <span className="inline-block text-xs font-semibold text-major-orange tracking-widest uppercase">Nos formats</span>
          <h2 className="mt-3 font-display font-bold text-3xl sm:text-4xl lg:text-[44px] leading-tight text-major-night">
            Trois façons de former votre équipe
          </h2>
          <AccentLine />
          <p className="mt-4 text-major-gray text-lg leading-relaxed">
            Du module unique au parcours complet, en passant par la formation sur-mesure dans votre salon ou barbershop : vous gardez la main sur le contenu et le rythme.
          </p>
        </div>

        <div className="mt-12 grid lg:grid-cols-3 gap-6">
          {offers.map((o, i) =>
          <article
            key={i}
            className={`relative rounded-2xl p-8 flex flex-col transition-all ${
            o.featured ?
            'bg-major-night text-white shadow-card lg:-translate-y-3' :
            'bg-white border border-major-night/10 hover:shadow-card'}`
            }>
            
              <span className={`self-start text-[11px] font-semibold uppercase tracking-wider rounded-full px-3 py-1 ${
            o.featured ? 'bg-major-orange text-white' : 'bg-major-orange/10 text-major-orange'}`
            }>
                {o.tag}
              </span>
              <h3 className={`mt-5 font-display font-bold text-2xl leading-tight ${o.featured ? 'text-white' : 'text-major-night'}`}>{o.title}</h3>
              <p className={`mt-3 leading-relaxed ${o.featured ? 'text-white/75' : 'text-major-gray'}`}>{o.desc}</p>
              <p className={`mt-4 text-sm italic ${o.featured ? 'text-white/60' : 'text-major-gray/80'}`}>{o.hint}</p>

              <div className="mt-8 pt-6 border-t border-current/10">
                <button
                onClick={() => openModal('demo')}
                className={`w-full inline-flex items-center justify-center gap-2 font-semibold py-3 rounded-lg transition-all ${
                o.featured ?
                'bg-major-orange hover:bg-major-orange-dark text-white shadow-cta' :
                'bg-major-night hover:bg-major-night-2 text-white'}`
                }>
                
                  {o.cta}
                  <Icon name="arrow-right" className="w-4 h-4" />
                </button>
              </div>
            </article>
          )}
        </div>
      </div>
    </section>);

}


/* ---------------- CTA MODAL (demo / brochure) ---------------- */
const ModalContext = React.createContext({ open: () => {} });
const useModal = () => useContext(ModalContext);

function ModalProvider({ children }) {
  const [visible, setVisible] = useState(false);
  const [mode, setMode] = useState('demo');
  const [submitted, setSubmitted] = useState(false);
  const [form, setForm] = useState({ name: '', email: '', size: '', need: '' });
  const handle = (k) => (e) => setForm({ ...form, [k]: e.target.value });

  const open = (m = 'demo', prefill) => { setMode(m); setSubmitted(false); setForm({ name: '', email: '', size: '', need: (prefill && prefill.need) || '' }); setVisible(true); document.body.style.overflow = 'hidden'; };
  const close = () => { setVisible(false); document.body.style.overflow = ''; };
  const onSubmit = (e) => {
    e.preventDefault();
    fetch('https://api.web3forms.com/submit', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        access_key: '275aa42a-9ff1-4775-bfb3-10b3e01f315f',
        subject: mode === 'brochure' ? 'Nouvelle demande de brochure - France Entreprise' : 'Nouvelle demande de démo - France Entreprise',
        from_name: 'France Entreprise',
        name: form.name,
        email: form.email,
        'Nombre de salariés': form.size,
        Besoin: form.need || '(non renseigné)',
        Type: mode === 'brochure' ? 'Brochure entreprise' : 'Démonstration',
        cc: 'pferreira@studimet.fr'
      })
    }).then(r => r.json()).then(j => { console.log('Web3Forms:', j); setSubmitted(true); }).catch(() => setSubmitted(true));
  };

  useEffect(() => { return () => { document.body.style.overflow = ''; }; }, []);

  const titles = {
    demo: { heading: 'Demander une démonstration', sub: 'Un expert Major vous recontacte sous 48h pour planifier une démonstration personnalisée.' },
    brochure: { heading: 'Recevoir la brochure', sub: 'Renseignez vos coordonnées et recevez le programme détaillé de la formation par email.' }
  };
  const t = titles[mode] || titles.demo;

  return (
    <ModalContext.Provider value={{ open }}>
      {children}

      {visible &&
      <div className="fixed inset-0 z-[70] flex items-center justify-center p-4" onClick={close}>
          <div className="absolute inset-0 bg-major-night/60 backdrop-blur-sm" />
          <div
            className="relative bg-white rounded-2xl shadow-card w-full max-w-lg p-6 sm:p-8 fade-in"
            onClick={(e) => e.stopPropagation()}>

            <button
              onClick={close}
              aria-label="Fermer"
              className="absolute top-4 right-4 w-8 h-8 rounded-full bg-major-night/5 hover:bg-major-night/10 flex items-center justify-center text-major-night transition-colors">
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"><path d="M6 6l12 12M18 6L6 18" /></svg>
            </button>

            {submitted ?
            <div className="text-center py-6 fade-in">
                <div className="mx-auto w-16 h-16 rounded-full bg-major-green/15 text-major-green flex items-center justify-center">
                  <Icon name="check" className="w-8 h-8" />
                </div>
                <h3 className="mt-5 font-display font-bold text-2xl text-major-night">
                  {mode === 'brochure' ? 'Brochure envoyée !' : 'Demande envoyée !'}
                </h3>
                <p className="mt-3 text-major-gray">
                  {mode === 'brochure'
                    ? 'Consultez votre boîte email — la brochure arrive sous quelques minutes.'
                    : 'Un expert Major vous contacte sous 48h pour planifier votre démonstration.'}
                </p>
                <button onClick={close} className="mt-6 text-sm font-semibold text-major-orange hover:underline underline-offset-4">Fermer</button>
              </div> :

            <>
                <h3 className="font-display font-bold text-xl sm:text-2xl text-major-night pr-8">{t.heading}</h3>
                <p className="mt-2 text-major-gray text-sm leading-relaxed">{t.sub}</p>

                <form onSubmit={onSubmit} className="mt-6 grid sm:grid-cols-2 gap-4">
                  <div className="sm:col-span-1">
                    <label htmlFor="modal-name" className="block text-sm font-medium text-major-night mb-1.5">Nom complet</label>
                    <input id="modal-name" type="text" required value={form.name} onChange={handle('name')}
                      placeholder="Prénom Nom"
                      className="w-full border border-major-night/15 rounded-lg px-4 py-3 text-major-night placeholder:text-major-gray/60 focus:border-major-orange bg-white" />
                  </div>
                  <div className="sm:col-span-1">
                    <label htmlFor="modal-email" className="block text-sm font-medium text-major-night mb-1.5">Email professionnel</label>
                    <input id="modal-email" type="email" required value={form.email} onChange={handle('email')}
                      placeholder="vous@votreentreprise.fr"
                      className="w-full border border-major-night/15 rounded-lg px-4 py-3 text-major-night placeholder:text-major-gray/60 focus:border-major-orange bg-white" />
                  </div>
                  <div className="sm:col-span-2">
                    <label htmlFor="modal-size" className="block text-sm font-medium text-major-night mb-1.5">Taille de votre structure</label>
                    <select id="modal-size" required value={form.size} onChange={handle('size')}
                      className="w-full border border-major-night/15 rounded-lg px-4 py-3 text-major-night focus:border-major-orange bg-white">
                      <option value="" disabled>Sélectionnez une fourchette</option>
                      <option value="1-3">1 à 3 personnes</option>
                      <option value="4-6">4 à 6 personnes</option>
                      <option value="7-10">7 à 10 personnes</option>
                      <option value="10+">Plus de 10 / réseau</option>
                    </select>
                  </div>
                  {mode === 'demo' &&
                  <div className="sm:col-span-2">
                      <label htmlFor="modal-need" className="block text-sm font-medium text-major-night mb-1.5">
                        Votre besoin en une phrase <span className="text-major-gray font-normal">(optionnel)</span>
                      </label>
                      <textarea id="modal-need" rows="2" value={form.need} onChange={handle('need')}
                        placeholder="Ex : former 4 personnes au management d'équipe"
                        className="w-full border border-major-night/15 rounded-lg px-4 py-3 text-major-night placeholder:text-major-gray/60 focus:border-major-orange resize-none bg-white" />
                    </div>
                  }
                  <div className="sm:col-span-2">
                    <button
                      type="submit"
                      className="w-full inline-flex items-center justify-center gap-2 bg-major-orange hover:bg-major-orange-dark text-white font-semibold py-3.5 rounded-lg transition-all hover:shadow-cta hover:-translate-y-px">
                      {mode === 'brochure' ? 'Recevoir la brochure' : 'Envoyer ma demande'}
                      <Icon name="arrow-right" className="w-4 h-4" />
                    </button>
                    <div className="mt-3 flex flex-wrap items-center justify-center gap-x-4 gap-y-1 text-xs text-major-gray">
                      <span>{'\U0001f512'} Confidentiel</span>
                      <span>{'⏱️'} Réponse sous 48h</span>
                      <span>{'✅'} Sans engagement</span>
                    </div>
                    <p className="mt-3 text-[11px] text-major-gray/70 italic leading-relaxed text-center">
                      En soumettant ce formulaire, vous acceptez d’être recontacté par France Entreprise. Vos données sont traitées conformément au RGPD.
                    </p>
                  </div>
                </form>
              </>
            }
          </div>
        </div>
      }
    </ModalContext.Provider>
  );
}

/* ---------------- METHOD (5 steps with emoji) ---------------- */
function Method() {
  const { open: openModal } = useModal();
  const steps = [
  {
    icon: 'search',
    title: 'Vos besoins',
    body: "On identifie les prestations à développer dans votre salon et le niveau de votre équipe, puis on définit les modules utiles, à la carte ou en parcours.",
    goal: 'Résultat : un plan de formation adapté à votre salon et à votre budget.'
  },
  {
    icon: 'edit',
    title: 'Programme',
    body: "Contenu et planning calés sur votre activité. Théorie courte, puis pratique intensive. Modules indépendants ou enchaînés, selon votre choix.",
    goal: 'Résultat : programme détaillé, dates et convention de formation.'
  },
  {
    icon: 'users',
    title: 'Formation pratique',
    body: "70 % de pratique : démonstrations, têtes d'étude et modèles réels. En centre équipé ou directement dans votre salon.",
    goal: 'Résultat : gestes maîtrisés, prestations vendables dès la fin du module.'
  },
  {
    icon: 'bar-chart',
    title: 'Validation & suivi',
    body: "Évaluation pratique des compétences, attestation de fin de formation et conseils pour intégrer les nouvelles prestations à votre carte.",
    goal: 'Résultat : compétences validées et nouvelles prestations à la carte du salon.'
  }];


  return (
    <section id="methode" className="bg-white py-20 lg:py-28">
      <div className="max-w-7xl mx-auto px-5 lg:px-8">
        <div className="grid lg:grid-cols-12 gap-12 items-start">
          <div className="lg:col-span-5 lg:sticky lg:top-28">
            <span className="inline-block text-xs font-semibold text-major-orange tracking-widest uppercase">La méthode</span>
          <h2 className="mt-3 font-display font-bold text-3xl sm:text-4xl lg:text-[44px] leading-tight text-major-night">
            Une formation en 4 temps, <span className="text-major-orange">de l'objectif à la pratique</span>
          </h2>
          <AccentLine />
          <p className="mt-4 text-major-gray text-lg leading-relaxed">
            De la définition de vos besoins jusqu'à la validation des compétences, chaque étape est encadrée par un formateur praticien.
          </p>

            <div className="mt-8 flex flex-col sm:flex-row gap-3">
              <button
                onClick={() => openModal('demo')}
                className="inline-flex items-center justify-center gap-2 bg-major-orange hover:bg-major-orange-dark text-white font-semibold px-6 py-3.5 rounded-lg transition-all hover:shadow-cta">
                
                Prendre rendez-vous
                <Icon name="arrow-right" className="w-4 h-4" />
              </button>
              <button
                onClick={() => smoothScrollTo('solutions')}
                className="inline-flex items-center justify-center gap-2 border-2 border-major-night/15 hover:border-major-night text-major-night font-semibold px-6 py-3.5 rounded-lg transition-colors">
                
                Voir nos solutions
              </button>
            </div>
          </div>

          <div className="lg:col-span-7 space-y-5">
            {steps.map((s, i) =>
            <article
              key={i}
              className="flex gap-5 sm:gap-6 bg-major-bg hover:bg-white border border-transparent hover:border-major-night/10 rounded-2xl p-6 sm:p-7 transition-all hover:shadow-card">
              
                <div className="flex-shrink-0">
                  <div className="w-14 h-14 sm:w-16 sm:h-16 rounded-2xl bg-major-orange/10 text-major-orange flex items-center justify-center">
                    <Icon name={s.icon} className="w-7 h-7 sm:w-8 sm:h-8" />
                  </div>
                  <div className="mt-2 text-center text-xs font-semibold text-major-orange">0{i + 1}</div>
                </div>
                <div className="flex-1 min-w-0">
                  <h3 className="font-display font-bold text-major-night text-lg sm:text-xl">{s.title}</h3>
                  <p className="mt-2 text-[15px] text-major-gray leading-relaxed">{s.body}</p>
                  <p className="mt-3 text-sm font-semibold text-major-night">{s.goal}</p>
                </div>
              </article>
            )}
          </div>
        </div>
      </div>
    </section>);

}

/* ---------------- FINANCEMENT ---------------- */
function Financement() {
  const { open: openModal } = useModal();
  const items = [
  {
    title: 'Prise en charge OPCO',
    body: "Les salons cotisent à un OPCO (souvent l'OPCO EP, Entreprises de proximité). Selon votre situation, une partie ou la totalité de la formation peut être prise en charge. On monte le dossier avec vous.",
    cta: 'En savoir plus'
  },
  {
    title: 'France Travail & aides régionales',
    body: "Pour les reconversions et les demandeurs d'emploi, des dispositifs France Travail et des aides régionales peuvent financer le parcours. On vous oriente vers le bon dispositif.",
    cta: 'En savoir plus'
  }];

  return (
    <section id="financement" className="bg-major-bg py-20 lg:py-28">
      <div className="max-w-7xl mx-auto px-5 lg:px-8">
        <div className="max-w-3xl">
          <span className="inline-block text-xs font-semibold text-major-orange tracking-widest uppercase">Financement</span>
          <h2 className="mt-3 font-display font-bold text-3xl sm:text-4xl lg:text-[44px] leading-tight text-major-night">
            Faites financer la formation de votre équipe
          </h2>
          <AccentLine />
          <p className="mt-4 text-major-gray text-lg leading-relaxed">
            On vous accompagne sur le montage et le suivi du dossier de prise en charge, pour réduire au maximum votre reste à charge.
          </p>
        </div>

        <div className="mt-12 grid md:grid-cols-2 gap-6">
          {items.map((it, i) =>
          <article key={i} className="bg-white rounded-2xl p-8 border border-major-night/10 hover:shadow-card transition-all">
              <h3 className="font-display font-bold text-xl text-major-night">{it.title}</h3>
              <p className="mt-4 text-major-gray leading-relaxed">{it.body}</p>
              <a
              href="#"
              onClick={(e) => {e.preventDefault();openModal('demo');}}
              className="mt-6 inline-flex items-center gap-1.5 text-sm font-semibold text-major-orange hover:gap-2 transition-all">
              
                {it.cta}
                <Icon name="arrow-right" className="w-4 h-4" />
              </a>
            </article>
          )}
        </div>
      </div>
    </section>);

}

/* ---------------- FORMATIONS PHARES (7 cards) ---------------- */
function Formations() {
  const { open: openModal } = useModal();
  const formations = [
  { icon: 'shield', badge: 'Fondamentaux', title: 'Accueil, hygiène & diagnostic', sub: 'Le socle du métier', desc: "Hygiène, sécurité, diagnostic capillaire et préparation, pour tous types de cheveux.", points: ["Désinfection & protection du client", "Diagnostic capillaire (porosité, sensibilité)", "Préparation avant prestation"], duration: '14 h', format: 'Débutant', tone: 'green' },
  { icon: 'scissors', badge: 'Coupe', title: 'Coupe ciseaux & tondeuse', sub: 'Bases de la coupe', desc: "Techniques de base aux ciseaux et à la tondeuse, structure et finitions, homme et femme.", points: ["Coupe aux ciseaux", "Coupe & dégradé à la tondeuse", "Structure, équilibre & finitions"], duration: '21 h', format: 'Débutant', tone: 'orange' },
  { icon: 'scissors', badge: 'Barber', title: 'Dégradés & fades', sub: 'Low, mid, high, skin fade', desc: "Tous les dégradés, du low fade au skin fade : transitions nettes, raccords et finitions.", points: ["Low, mid & high fade", "Skin fade & raccords invisibles", "Dégradé à blanc & finitions"], duration: '28 h', format: 'Intermédiaire', tone: 'orange' },
  { icon: 'scissors', badge: 'Barber', title: 'Barbe, contours & tracés', sub: 'Barbe & designs', desc: "Taille et contours de barbe, rasage, tracés et designs personnalisés.", points: ["Taille & contours de barbe", "Rasage au coupe-chou", "Tracés & designs personnalisés"], duration: '21 h', format: 'Intermédiaire', tone: 'orange' },
  { icon: 'braid', badge: 'Tresses', title: 'Tresses fondamentales', sub: 'Vanilles & cornrows', desc: "3 brins, vanilles, cornrows : tension, séparations nettes et régularité.", points: ["Tresse 3 brins & vanilles", "Cornrows simples", "Tension, séparations & régularité"], duration: '21 h', format: 'Débutant', tone: 'green' },
  { icon: 'braid', badge: 'Tresses', title: 'Box & Knotless braids', sub: 'Pose de rajouts', desc: "Knotless progressive, carrés réguliers, finitions et prévention de l'alopécie de traction.", points: ["Technique knotless progressive", "Carrés réguliers & pose de rajouts", "Prévention de l'alopécie de traction"], duration: '35 h', format: 'Intermédiaire', tone: 'green' },
  { icon: 'braid', badge: 'Tresses', title: 'Tresses avancées', sub: 'Fulani, Boho, twists', desc: "Fulani, stitch braids, passion twists, soft locs : les styles les plus demandés.", points: ["Fulani & stitch braids", "Passion twists & boho", "Création de styles complets"], duration: '35 h', format: 'Avancé', tone: 'green' },
  { icon: 'spiral', badge: 'Locks', title: 'Locks : démarrage & entretien', sub: 'Vrilles, crochet, soft locs', desc: "Méthodes de démarrage, resserrage, soft locs et entretien d'une chevelure lockée.", points: ["Démarrage (vrilles, crochet)", "Resserrage & entretien", "Soft locs"], duration: '28 h', format: 'Intermédiaire', tone: 'orange' },
  { icon: 'droplet', badge: 'Coloration', title: 'Colorimétrie & coloration', sub: 'Bases de la couleur', desc: "Cercle chromatique, hauteurs de tons, neutralisation, oxydants et application.", points: ["Cercle chromatique & hauteurs de tons", "Neutralisation des reflets", "Préparation des mélanges & application"], duration: '21 h', format: 'Débutant', tone: 'green' },
  { icon: 'droplet', badge: 'Coloration', title: 'Décoloration', sub: 'Éclaircissement sécurisé', desc: "Fond d'éclaircissement, temps de pose, protection de la fibre, patines et rattrapage.", points: ["Fond d'éclaircissement & temps de pose", "Protection de la fibre", "Patine & rattrapage"], duration: '28 h', format: 'Intermédiaire', tone: 'green' },
  { icon: 'droplet', badge: 'Coloration', title: 'Balayage & ombré', sub: 'Techniques modernes', desc: "Balayage, ombré hair, money piece, root shadow, placement des mèches et patines.", points: ["Balayage & placement des mèches", "Ombré hair & money piece", "Patines personnalisées"], duration: '28 h', format: 'Avancé', tone: 'green' },
  { icon: 'heart', badge: 'Activité', title: 'Relation client & business', sub: 'Conseil & fidélisation', desc: "Accueil, conseil, tarification, fidélisation et réseaux sociaux pour développer votre salon ou barbershop.", points: ["Accueil & conseil client", "Tarification de vos prestations", "Fidélisation & réseaux sociaux"], duration: '14 h', format: 'Tous niveaux', tone: 'orange' }];


  return (
    <section id="formations" className="bg-white py-20 lg:py-28">
      <div className="max-w-7xl mx-auto px-5 lg:px-8">
        <div className="flex flex-col lg:flex-row lg:items-end lg:justify-between gap-6 max-w-5xl">
          <div>
            <span className="inline-block text-xs font-semibold text-major-orange tracking-widest uppercase">Nos modules</span>
            <h2 className="mt-3 font-display font-bold text-3xl sm:text-4xl lg:text-[44px] leading-tight text-major-night">
              12 modules, <span className="text-major-orange">à composer à la carte</span>
            </h2>
            <AccentLine />
          </div>
          <p className="text-major-gray text-lg leading-relaxed max-w-md">
            Conçus et animés par des coiffeurs et barbiers en activité. À suivre à la carte ou en parcours complet, par niveau, certifiant et finançable.
          </p>
        </div>

        <div className="mt-12 grid sm:grid-cols-2 lg:grid-cols-3 gap-5">
          {formations.map((f, i) => {
            const isGreen = f.tone === 'green';
            return (
              <article
                key={i}
                className={`group relative bg-major-bg hover:bg-white border border-transparent rounded-2xl p-6 transition-all hover:shadow-card flex flex-col ${
                isGreen ? 'hover:border-major-green/40' : 'hover:border-major-orange/40'}`
                }>

                <div className="flex items-start justify-between gap-3 mb-5">
                  <div className={`w-12 h-12 rounded-xl flex items-center justify-center flex-shrink-0 transition-colors ${
                  isGreen ?
                  'bg-major-green/15 text-major-green-dark group-hover:bg-major-green group-hover:text-white' :
                  'bg-major-orange/10 text-major-orange group-hover:bg-major-orange group-hover:text-white'}`
                  }>
                    <Icon name={f.icon} className="w-6 h-6" />
                  </div>
                  <span className={`text-[10px] font-semibold uppercase tracking-wider rounded-full px-2.5 py-1 ${
                  isGreen ? 'text-major-green-dark bg-major-green/15' : 'text-major-orange-dark bg-major-orange/10'}`
                  }>
                    {f.badge}
                  </span>
                </div>

                <h3 className="font-display font-bold text-major-night text-lg leading-tight">{f.title}</h3>
                <div className="mt-1 text-sm font-medium text-major-night/70">{f.sub}</div>

                <p className="mt-3 text-sm text-major-gray leading-relaxed">{f.desc}</p>

                <div className="mt-4 flex-1">
                  <div className="text-[10px] font-semibold text-major-gray/70 uppercase tracking-wider">Au programme</div>
                  <ul className="mt-2 space-y-1.5">
                    {f.points.map((pt, k) =>
                    <li key={k} className="flex items-start gap-2 text-[12.5px] text-major-night/80 leading-snug">
                      <Icon name="check" className="w-3.5 h-3.5 text-major-green shrink-0 mt-0.5" />
                      <span>{pt}</span>
                    </li>
                    )}
                  </ul>
                </div>

                <div className="mt-5 pt-4 border-t border-major-night/[0.08] grid grid-cols-2 gap-3 text-[11px]">
                  <div>
                    <div className="font-semibold text-major-gray/70 uppercase tracking-wider text-[10px]">Durée</div>
                    <div className="mt-1 font-display font-semibold text-major-night">{f.duration}</div>
                  </div>
                  <div>
                    <div className="font-semibold text-major-gray/70 uppercase tracking-wider text-[10px]">Niveau</div>
                    <div className="mt-1 font-display font-semibold text-major-night">{f.format}</div>
                  </div>
                </div>

                <a
                  href="#"
                  onClick={(e) => {e.preventDefault();openModal('demo');}}
                  className={`mt-5 inline-flex items-center gap-1.5 text-sm font-semibold hover:gap-2 transition-all ${
                  isGreen ? 'text-major-green-dark' : 'text-major-orange'}`
                  }>
                  Voir le programme
                  <Icon name="arrow-right" className="w-4 h-4" />
                </a>
              </article>);

          })}
        </div>

        <div className="mt-10 text-center text-major-gray">
          Besoin d'un seul module ou du parcours complet&nbsp;? On adapte à votre salon.{' '}
          <a
            href="#"
            onClick={(e) => {e.preventDefault();openModal('demo');}}
            className="text-major-orange font-semibold underline-offset-4 hover:underline">
            Composer ma formation →
          </a>
        </div>
      </div>
    </section>);
}

/* ---------------- CASE STUDIES (transparence) ---------------- */
function CaseStudies() {
  const cases = [
  {
    tag: 'Barber',
    title: "Ajouter le dégradé et la barbe à un barbershop",
    context: "Barbershop, 3 barbiers. Demande de skin fades et de tracés non maîtrisée, des clients perdus au profit de la concurrence. Objectif : sécuriser le dégradé en interne.",
    metrics: [
    { v: '3', l: 'barbiers formés' },
    { v: '+4', l: 'prestations ajoutées' },
    { v: '4 sem.', l: 'pour rentabiliser' }],

    quote: "« Les skin fades, on les ratait. Aujourd'hui c'est notre signature et les clients reviennent pour ça. »",
    attribution: 'Yanis B., gérant de barbershop'
  },
  {
    tag: 'Coloration',
    title: 'Monter en gamme sur la couleur',
    context: "Salon mixte, 6 personnes. Colorations basiques, peu de balayage faute de maîtrise. Objectif : proposer des techniques modernes et sécuriser la fibre.",
    metrics: [
    { v: '6', l: 'formés' },
    { v: '+25%', l: 'part couleur du CA' },
    { v: '4,9/5', l: 'satisfaction' }],

    quote: "« Le balayage représente maintenant un quart de notre chiffre. La formation s'est remboursée en deux mois. »",
    attribution: 'Karim B., directeur de salon'
  },
  {
    tag: 'Tresses & locks',
    title: 'Former une équipe afro de A à Z',
    context: "Salon afro, 5 personnes. Besoin d'homogénéiser le niveau sur les tresses et les locks, pour une clientèle homme et femme.",
    metrics: [
    { v: '5', l: 'formés' },
    { v: '+3', l: 'prestations ajoutées' },
    { v: '100%', l: 'compétences validées' }],

    quote: "« En quelques modules, toute l'équipe maîtrise les tresses et les locks. On ne refuse plus aucune demande. »",
    attribution: 'Aminata D., gérante de salon'
  }];


  return (
    <section id="resultats" className="bg-major-bg py-20 lg:py-28">
      <div className="max-w-7xl mx-auto px-5 lg:px-8">
        <div className="max-w-3xl">
          <span className="inline-block text-xs font-semibold text-major-orange tracking-widest uppercase">Ils nous font confiance</span>
          <h2 className="mt-3 font-display font-bold text-3xl sm:text-4xl lg:text-[44px] leading-tight text-major-night">
            Des salons et barbershops qui ont élargi leur carte
          </h2>
          <AccentLine />
          <p className="mt-4 text-major-gray text-lg leading-relaxed">
            Pas de promesses vagues : des équipes formées, des prestations ajoutées et des résultats concrets sur le chiffre.
          </p>
        </div>

        <div className="mt-12 grid lg:grid-cols-3 gap-6">
          {cases.map((c, i) =>
          <article key={i} className="bg-white rounded-2xl shadow-card border border-major-night/5 p-7 flex flex-col">
              <span className="self-start inline-block text-[11px] font-semibold uppercase tracking-wider text-major-orange bg-major-orange/10 rounded-full px-3 py-1">
                {c.tag}
              </span>
              <h3 className="mt-5 font-display font-semibold text-lg text-major-night leading-snug min-h-[3.5rem]">{c.title}</h3>
              <p className="mt-3 text-sm text-major-gray leading-relaxed">{c.context}</p>

              <div className="mt-6 bg-major-bg rounded-xl p-4 grid grid-cols-3 gap-2">
                {c.metrics.map((m, idx) =>
              <div key={idx} className="text-center flex flex-col items-center justify-start">
                    <div className="font-display font-bold text-xl text-major-orange leading-tight min-h-[1.75rem] flex items-center">{m.v}</div>
                    <div className="mt-1 text-[11px] text-major-gray leading-tight min-h-[2rem] flex items-start justify-center">{m.l}</div>
                  </div>
              )}
              </div>

              <blockquote className="mt-6 text-[15px] text-major-night/85 italic leading-relaxed border-l-[3px] border-major-green pl-4 flex-1">
                {c.quote}
              </blockquote>
              <div className="mt-4 pt-4 border-t border-major-night/5 text-xs font-medium text-major-gray">
                {c.attribution}
              </div>
            </article>
          )}
        </div>
      </div>
    </section>);

}

/* ---------------- DOMAINS (6 cards) ---------------- */
function Domains() {
  const { open: openModal } = useModal();
  const domains = [
  { icon: 'scissors', title: 'Coupe & Barber', items: ['Ciseaux & tondeuse', 'Dégradés / fades', 'Barbe & contours', 'Tracés & designs'] },
  { icon: 'braid', title: 'Tresses', items: ['Vanilles & cornrows', 'Box & knotless', 'Styles avancés'] },
  { icon: 'spiral', title: 'Locks', items: ['Démarrage', 'Resserrage', 'Soft locs', 'Entretien'] },
  { icon: 'droplet', title: 'Coloration', items: ['Colorimétrie', 'Décoloration', 'Balayage & ombré'] },
  { icon: 'shield', title: 'Fondamentaux & hygiène', items: ['Hygiène', 'Diagnostic capillaire', 'Préparation'] },
  { icon: 'heart', title: 'Relation client & activité', items: ['Conseil', 'Fidélisation', 'Tarification', 'Réseaux sociaux'] }];


  return (
    <section id="domaines" className="bg-white py-20 lg:py-28">
      <div className="max-w-7xl mx-auto px-5 lg:px-8">
        <div className="max-w-3xl">
          <span className="inline-block text-xs font-semibold text-major-orange tracking-widest uppercase">Nos domaines</span>
          <h2 className="mt-3 font-display font-bold text-3xl sm:text-4xl lg:text-[44px] leading-tight text-major-night">
            Tout ce qu'il faut pour élargir votre carte
          </h2>
          <AccentLine />
        </div>

        <div className="mt-12 grid sm:grid-cols-2 lg:grid-cols-3 gap-5">
          {domains.map((d, i) =>
          <article
            key={i}
            className="group bg-major-bg hover:bg-white border border-transparent hover:border-major-night/10 rounded-xl2 p-6 transition-all hover:shadow-card hover:border-l-[3px] hover:border-l-major-green">
            
              <div className="flex items-center gap-3">
                <span className="w-10 h-10 rounded-xl bg-major-orange/10 text-major-orange flex items-center justify-center shrink-0 transition-colors group-hover:bg-major-orange group-hover:text-white">
                  <Icon name={d.icon} className="w-5 h-5" />
                </span>
                <h3 className="font-display font-semibold text-major-night leading-tight">{d.title}</h3>
              </div>
              <p className="mt-3 text-sm text-major-gray leading-relaxed">
                {d.items.join(' · ')}
              </p>
            </article>
          )}
        </div>

        {/* Formateurs strip */}
        <div className="mt-14 bg-major-night rounded-2xl p-7 sm:p-10 text-white flex flex-col lg:flex-row gap-8 lg:items-center">
          <div className="flex-1">
            <span className="inline-block text-[11px] font-semibold text-major-green tracking-widest uppercase">Formateurs praticiens</span>
            <h3 className="mt-3 font-display font-bold text-2xl sm:text-3xl leading-tight">
              Des professionnels en activité, pas des théoriciens
            </h3>
            <p className="mt-3 text-white/70 leading-relaxed max-w-xl">
              Chaque module est conçu et animé par des coiffeurs en activité : ils maîtrisent au quotidien les gestes qu'ils transmettent.
            </p>
          </div>
          <div className="flex flex-col sm:flex-row gap-4 lg:w-[420px]">
            {[
            { initials: 'HR', name: 'Horace Ricciardolo', role: "Coiffure & barber", desc: '40+ ans d’expertise. Ancien bras droit de Jean Louis David.' },
            { initials: "AS", name: "Awa Sylla", role: "Tresses & coiffure afro", desc: "15+ ans en salon. Spécialiste box braids, knotless et coiffures protectrices." }].
            map((p, i) =>
            <div key={i} className="flex-1 bg-white/[0.05] border border-white/10 rounded-xl p-4">
                <div className="flex items-center gap-3">
                  <div className="w-10 h-10 rounded-full bg-major-green/20 text-major-green font-display font-bold flex items-center justify-center text-sm">{p.initials}</div>
                  <div>
                    <div className="font-display font-semibold text-sm">{p.name}</div>
                    <div className="text-[11px] text-white/55">{p.role}</div>
                  </div>
                </div>
                <p className="mt-3 text-xs text-white/70 leading-relaxed">{p.desc}</p>
              </div>
            )}
          </div>
        </div>

        <p className="mt-10 text-center text-major-gray">
          Un seul module ou le parcours complet&nbsp;? On s'adapte à votre salon.{' '}
          <a
            href="#"
            onClick={(e) => {e.preventDefault();openModal('demo');}}
            className="text-major-orange font-semibold underline-offset-4 hover:underline">
            
            Parlez-nous de votre projet →
          </a>
        </p>
      </div>
    </section>);

}

/* ---------------- TESTIMONIAL (video placeholder + quote) ---------------- */
function Testimonial() {
  const { open: openModal } = useModal();
  return (
    <section className="bg-white py-20 lg:py-28">
      <div className="max-w-7xl mx-auto px-5 lg:px-8">
        <div className="text-center max-w-3xl mx-auto">
          <span className="inline-block text-xs font-semibold text-major-orange tracking-widest uppercase">Témoignage</span>
          <h2 className="mt-3 font-display font-bold text-3xl sm:text-4xl lg:text-[44px] leading-tight text-major-night">
            Étude de cas : un barbershop qui a élargi sa carte
          </h2>
          <p className="mt-4 text-major-gray text-lg leading-relaxed">
            Comment un barbershop a intégré les dégradés et la barbe à sa carte en quelques semaines : un module ciblé, des barbiers formés sur modèles réels et des prestations rentables.
          </p>
        </div>

        <div className="mt-12 grid lg:grid-cols-12 gap-8 items-center">
          <div className="lg:col-span-7">
            <div className="relative aspect-video rounded-2xl bg-major-night overflow-hidden shadow-card">
              {/* faux video frame */}
              <div className="absolute inset-0">
                <div className="absolute top-1/3 left-1/4 w-1/3 h-1/3 rounded-full bg-major-orange/20 blur-2xl" />
                <div className="absolute bottom-1/4 right-1/4 w-1/4 h-1/4 rounded-full bg-white/10 blur-2xl" />
              </div>
              <div className="absolute inset-0 flex flex-col items-center justify-center text-white">
                <button
                  aria-label="Lire la vidéo"
                  className="w-20 h-20 rounded-full bg-major-orange hover:bg-major-orange-dark flex items-center justify-center transition-all hover:scale-105 shadow-cta">
                  
                  <Icon name="play" className="w-8 h-8 ml-1" />
                </button>
                <div className="mt-6 text-sm text-white/70">2:14 · Étude de cas Major</div>
              </div>
              {/* corner chip */}
              <div className="absolute top-4 left-4 inline-flex items-center gap-2 bg-black/30 backdrop-blur-md text-white text-xs font-medium rounded-full px-3 py-1.5">
                <span className="w-1.5 h-1.5 rounded-full bg-major-red inline-block animate-pulse" />
                Étude de cas
              </div>
            </div>
          </div>

          <div className="lg:col-span-5">
            <div className="flex text-major-orange mb-4">
              {[0, 1, 2, 3, 4].map((i) => <Icon key={i} name="star" className="w-5 h-5" />)}
            </div>
            <blockquote className="font-display font-medium text-xl sm:text-2xl text-major-night leading-snug">
              « On voulait monter en niveau sur le dégradé. En un module, toute l'équipe est passée au <span className="text-major-orange italic">skin fade</span> propre. Et les clients le voient. »
            </blockquote>
            <div className="mt-6 flex items-center gap-4">
              <div className="w-12 h-12 rounded-full bg-major-orange/15 text-major-orange flex items-center justify-center font-display font-bold">SM</div>
              <div>
                <div className="font-display font-semibold text-major-night">Sofiane M.</div>
                <div className="text-sm text-major-gray">Gérant de barbershop · 3 barbiers</div>
              </div>
            </div>

            <div className="mt-8 grid grid-cols-3 gap-4 pt-6 border-t border-major-night/10">
              <div>
                <div className="font-display font-bold text-major-orange text-2xl">3</div>
                <div className="text-xs text-major-gray mt-1">barbiers formés</div>
              </div>
              <div>
                <div className="font-display font-bold text-major-orange text-2xl">4,9/5</div>
                <div className="text-xs text-major-gray mt-1">satisfaction</div>
              </div>
              <div>
                <div className="font-display font-bold text-major-orange text-2xl">+4</div>
                <div className="text-xs text-major-gray mt-1">prestations ajoutées</div>
              </div>
            </div>

            <button
              onClick={() => openModal('demo')}
              className="mt-8 inline-flex items-center gap-2 bg-major-night hover:bg-major-night-2 text-white font-semibold px-6 py-3.5 rounded-lg transition-all">
              
              Prendre rendez-vous
              <Icon name="arrow-right" className="w-4 h-4" />
            </button>
          </div>
        </div>
      </div>
    </section>);

}

/* ---------------- FAQ ---------------- */
function FAQ() {
  const faqs = [
  {
    q: 'Peut-on suivre un seul module, ou faut-il tout le parcours ?',
    a: "Les deux. Nos 12 modules sont indépendants et classés par niveau : vous pouvez en suivre un seul (par exemple le skin fade, les box braids ou le balayage) pour combler une compétence précise, ou enchaîner le parcours complet pour une montée en compétence totale et certifiante."
  },
  {
    q: 'La formation est-elle finançable pour mon salon ?',
    a: "Oui. Selon votre situation, votre OPCO (souvent l'OPCO EP), France Travail ou des aides régionales peuvent prendre en charge tout ou partie de la formation. On monte le dossier avec vous."
  },
  {
    q: 'Faut-il déjà savoir coiffer pour s\'inscrire ?',
    a: "Non. Le module Fondamentaux pose les bases (hygiène, diagnostic, préparation). Selon le niveau de votre équipe, on oriente vers les modules adaptés, du débutant au perfectionnement sur des techniques avancées."
  },
  {
    q: 'La formation a-t-elle lieu dans notre salon ou en centre ?',
    a: "Au choix. En présentiel dans un centre équipé, ou directement dans votre salon (intra) pour former toute l'équipe sur place. La pratique se fait sur têtes d'étude et sur modèles réels."
  },
  {
    q: 'Combien de personnes par session ?',
    a: "8 stagiaires maximum par session, pour garantir une vraie pratique encadrée et un suivi individuel des gestes."
  },
  {
    q: 'Quelles techniques de tresses et de couleur sont couvertes ?',
    a: "Côté barber : coupe ciseaux et tondeuse, dégradés (low, mid, high, skin fade), barbe, contours et tracés. Côté tresses : vanilles, cornrows, box braids, knotless, Fulani, Boho, passion twists. Sans oublier les locks et la coloration (colorimétrie, décoloration, balayage, ombré)."
  },
  {
    q: 'Repart-on avec une certification ?',
    a: "Chaque module valide les compétences par une mise en situation pratique. Le parcours complet donne lieu à une attestation de fin de formation."
  }];


  const [openIndex, setOpenIndex] = useState(0);

  return (
    <section className="bg-major-bg py-20 lg:py-28">
      <div className="max-w-5xl mx-auto px-5 lg:px-8">
        <div className="max-w-3xl">
          <span className="inline-block text-xs font-semibold text-major-orange tracking-widest uppercase">FAQ</span>
          <h2 className="mt-3 font-display font-bold text-3xl sm:text-4xl lg:text-[44px] leading-tight text-major-night">
            Les questions que se posent les salons
          </h2>
          <AccentLine />
          <p className="mt-4 text-major-gray text-lg leading-relaxed">
            Les points qui reviennent le plus souvent quand un salon nous confie la montée en compétence de son équipe.
          </p>
        </div>

        <div className="mt-10 space-y-3">
          {faqs.map((f, i) => {
            const open = openIndex === i;
            return (
              <div key={i} className="bg-white rounded-2xl border border-major-night/[0.08] overflow-hidden">
                <button
                  onClick={() => setOpenIndex(open ? -1 : i)}
                  aria-expanded={open}
                  className="w-full flex items-center justify-between gap-4 text-left px-6 sm:px-7 py-5">
                  
                  <span className="font-display font-semibold text-major-night text-base sm:text-lg">{f.q}</span>
                  <span
                    className={`flex-shrink-0 w-8 h-8 rounded-full inline-flex items-center justify-center transition-all duration-300 ${
                    open ? 'bg-major-orange text-white rotate-45' : 'bg-major-orange/10 text-major-orange'}`
                    }
                    aria-hidden="true">
                    
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"><path d="M12 5v14M5 12h14" /></svg>
                  </span>
                </button>
                <div className={`faq-body ${open ? 'open' : ''}`}>
                  <div>
                    <div className="px-6 sm:px-7 pb-6 text-major-gray leading-relaxed">
                      <p>{f.a}</p>
                    </div>
                  </div>
                </div>
              </div>);

          })}
        </div>
      </div>
    </section>);

}

/* ---------------- CONTACT FORM ---------------- */
function ContactForm() {
  const [submitted, setSubmitted] = useState(false);
  const [form, setForm] = useState({ name: '', email: '', size: '', need: '' });
  const handle = (k) => (e) => setForm({ ...form, [k]: e.target.value });
  const onSubmit = (e) => {
    e.preventDefault();
    fetch('https://api.web3forms.com/submit', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        access_key: '275aa42a-9ff1-4775-bfb3-10b3e01f315f',
        subject: 'Nouvelle demande de devis - France Entreprise',
        from_name: 'France Entreprise',
        name: form.name,
        email: form.email,
        'Nombre de salariés': form.size,
        Besoin: form.need || '(non renseigné)',
        Type: 'Demande de devis (formulaire contact)',
        cc: 'pferreira@studimet.fr'
      })
    }).then(r => r.json()).then(j => { console.log('Web3Forms:', j); setSubmitted(true); }).catch(() => setSubmitted(true));
  };

  return (
    <section id="contact" className="relative bg-major-night py-20 lg:py-28 overflow-hidden">
      <div aria-hidden="true" className="absolute -top-32 left-1/2 -translate-x-1/2 w-[600px] h-[600px] rounded-full bg-major-orange/10 blur-3xl pointer-events-none" />

      <div className="relative max-w-3xl mx-auto px-5 lg:px-8">
        <div className="text-center text-white">
          <span className="inline-block text-xs font-semibold text-major-orange tracking-widest uppercase">Demander un devis</span>
          <h2 className="mt-3 font-display font-bold text-3xl sm:text-4xl lg:text-[44px] leading-tight">
            Votre formation sur-mesure · réponse sous 48h
          </h2>
          <p className="mt-4 text-white/70 text-lg leading-relaxed">
            Un conseiller Major analyse vos besoins, les formations utiles et les financements mobilisables. Sans engagement.
          </p>
        </div>

        <div className="mt-10 bg-white rounded-2xl shadow-card p-6 sm:p-8 lg:p-10">
          {submitted ?
          <div className="text-center py-8 fade-in">
              <div className="mx-auto w-16 h-16 rounded-full bg-major-green/15 text-major-green flex items-center justify-center">
                <Icon name="check" className="w-8 h-8" />
              </div>
              <h3 className="mt-5 font-display font-bold text-2xl text-major-night">
                Merci, votre demande a bien été envoyée.
              </h3>
              <p className="mt-3 text-major-gray">
                Un expert Major vous contacte sous 48&nbsp;h pour planifier votre diagnostic.
              </p>
              <button
              onClick={() => setSubmitted(false)}
              className="mt-6 text-sm font-semibold text-major-orange hover:underline underline-offset-4">
              
                Envoyer une autre demande
              </button>
            </div> :

          <form onSubmit={onSubmit} className="grid sm:grid-cols-2 gap-5">
              <div className="sm:col-span-1">
                <label htmlFor="name" className="block text-sm font-medium text-major-night mb-2">Nom complet</label>
                <input id="name" type="text" required value={form.name} onChange={handle('name')}
              placeholder="Prénom Nom"
              className="w-full border border-major-night/15 rounded-lg px-4 py-3 text-major-night placeholder:text-major-gray/60 focus:border-major-orange bg-white" />
              
              </div>
              <div className="sm:col-span-1">
                <label htmlFor="email" className="block text-sm font-medium text-major-night mb-2">Email professionnel</label>
                <input id="email" type="email" required value={form.email} onChange={handle('email')}
              placeholder="vous@votreentreprise.fr"
              className="w-full border border-major-night/15 rounded-lg px-4 py-3 text-major-night placeholder:text-major-gray/60 focus:border-major-orange bg-white" />
              
              </div>
              <div className="sm:col-span-2">
                <label htmlFor="size" className="block text-sm font-medium text-major-night mb-2">Taille de votre structure</label>
                <select id="size" required value={form.size} onChange={handle('size')}
              className="w-full border border-major-night/15 rounded-lg px-4 py-3 text-major-night focus:border-major-orange bg-white">
                
                  <option value="" disabled>Sélectionnez une taille</option>
                  <option value="1-3">1 à 3 personnes</option>
                  <option value="4-6">4 à 6 personnes</option>
                  <option value="7-10">7 à 10 personnes</option>
                  <option value="10+">Plus de 10 / réseau</option>
                </select>
              </div>
              <div className="sm:col-span-2">
                <label htmlFor="need" className="block text-sm font-medium text-major-night mb-2">
                  Votre besoin en une phrase <span className="text-major-gray font-normal">(optionnel)</span>
                </label>
                <textarea id="need" rows="2" value={form.need} onChange={handle('need')}
              placeholder="Ex : former 4 personnes au management d'équipe"
              className="w-full border border-major-night/15 rounded-lg px-4 py-3 text-major-night placeholder:text-major-gray/60 focus:border-major-orange resize-none bg-white" />
              
              </div>

              <div className="sm:col-span-2">
                <button
                type="submit"
                className="w-full inline-flex items-center justify-center gap-2 bg-major-orange hover:bg-major-orange-dark text-white font-semibold py-4 rounded-lg transition-all hover:shadow-cta hover:-translate-y-px">
                
                  Envoyer ma demande
                  <Icon name="arrow-right" className="w-4 h-4" />
                </button>
                <div className="mt-4 flex flex-wrap items-center justify-center gap-x-4 gap-y-1 text-xs text-major-gray">
                  <span>🔒 Confidentiel</span>
                  <span>⏱️ Réponse sous 48h</span>
                  <span>✅ Sans engagement</span>
                </div>
                <p className="mt-4 text-xs text-major-gray/80 italic leading-relaxed text-center">
                  En soumettant ce formulaire, vous acceptez d’être recontacté par France Entreprise. Vos données sont traitées conformément au RGPD et ne sont jamais transmises à des tiers.
                </p>
              </div>
            </form>
          }
        </div>
      </div>
    </section>);

}

/* ---------------- FOOTER ---------------- */
function Footer() {
  return (
    <footer className="bg-major-night text-white border-t border-white/10">
      <div className="max-w-7xl mx-auto px-5 lg:px-8 py-14 grid md:grid-cols-12 gap-10">
        <div className="md:col-span-4">
          <Logo dark size="text-2xl" />
          <p className="mt-4 text-white/60 text-sm leading-relaxed max-w-sm">
            Service national privé dédié à l'accompagnement des entreprises et des professionnels dans le cadre de la formation professionnelle continue (FPC). Toutes les formations accessibles via France Entreprise sont dispensées par des organismes de formation partenaires.
          </p>
          <p className="mt-4 text-white/60 text-sm">Nous contacter :</p>
          <a href="tel:+33189480878" className="font-display font-bold text-white text-lg hover:text-major-orange transition-colors">01 89 48 08 78</a>
        </div>

        <div className="md:col-span-3">
          <h4 className="font-display font-semibold text-sm uppercase tracking-wider text-white">Domaines</h4>
          <ul className="mt-4 space-y-2.5 text-sm">
            {DOMAINS.map((d) =>
            <li key={d.slug}><a href={"#/domaines/" + d.slug} className="text-white/60 hover:text-white transition-colors">{d.name}</a></li>
            )}
          </ul>
        </div>

        <div className="md:col-span-3">
          <h4 className="font-display font-semibold text-sm uppercase tracking-wider text-white">Le centre</h4>
          <ul className="mt-4 space-y-2.5 text-sm">
            <li><a href="#/methode" className="text-white/60 hover:text-white transition-colors">Notre méthode</a></li>
            <li><a href="#/financement" className="text-white/60 hover:text-white transition-colors">Financement</a></li>
            <li><a href="#/tarifs" className="text-white/60 hover:text-white transition-colors">Tarifs</a></li>
            <li><a href="#/pourquoi" className="text-white/60 hover:text-white transition-colors">Pourquoi-nous</a></li>
          </ul>
        </div>

        <div className="md:col-span-2">
          <h4 className="font-display font-semibold text-sm uppercase tracking-wider text-white">Légal</h4>
          <ul className="mt-4 space-y-2.5 text-sm text-white/60">
            <li><a href="/mentions-legales.html" className="hover:text-white">Mentions légales</a></li>
            <li><a href="#" className="hover:text-white">CGV</a></li>
            <li><a href="#" className="hover:text-white">RGPD</a></li>
            <li><a href="mailto:contact@france-entreprise.net" className="hover:text-white">Nous contacter</a></li>
          </ul>
        </div>
      </div>

      <div className="border-t border-white/10">
        <div className="max-w-7xl mx-auto px-5 lg:px-8 py-5 text-xs text-white/40 flex flex-col sm:flex-row gap-2 sm:justify-between">
          <span>2026 © France Entreprise · Tous droits réservés</span>
          <span>france-entreprise.net</span>
        </div>
      </div>
    </footer>);

}

/* ---------------- TARIFS (grille par module) ---------------- */
function Tarifs() {
  const { open: openModal } = useModal();
  const rows = [
    { d: "Fondamentaux", t: "Accueil, hygiène & diagnostic", n: "Débutant", h: "14 h · 2 j", p: "490 €" },
    { d: "Coupe", t: "Coupe ciseaux & tondeuse", n: "Débutant", h: "21 h · 3 j", p: "695 €" },
    { d: "Barber", t: "Dégradés & fades", n: "Intermédiaire", h: "28 h · 4 j", p: "900 €" },
    { d: "Barber", t: "Barbe, contours & tracés", n: "Intermédiaire", h: "21 h · 3 j", p: "695 €" },
    { d: "Tresses", t: "Tresses fondamentales", n: "Débutant", h: "21 h · 3 j", p: "695 €" },
    { d: "Tresses", t: "Box & Knotless braids", n: "Intermédiaire", h: "35 h · 5 j", p: "1 105 €" },
    { d: "Tresses", t: "Tresses avancées", n: "Avancé", h: "35 h · 5 j", p: "1 105 €" },
    { d: "Locks", t: "Locks : démarrage & entretien", n: "Intermédiaire", h: "28 h · 4 j", p: "900 €" },
    { d: "Coloration", t: "Colorimétrie & coloration", n: "Débutant", h: "21 h · 3 j", p: "695 €" },
    { d: "Coloration", t: "Décoloration", n: "Intermédiaire", h: "28 h · 4 j", p: "900 €" },
    { d: "Coloration", t: "Balayage & ombré", n: "Avancé", h: "28 h · 4 j", p: "900 €" },
    { d: "Activité", t: "Relation client & business", n: "Tous niveaux", h: "14 h · 2 j", p: "490 €" }];

  const chip = (d) => ({
    Barber: "bg-major-orange/10 text-major-orange-dark",
    Coupe: "bg-major-orange/10 text-major-orange-dark",
    Locks: "bg-major-orange/10 text-major-orange-dark",
    Tresses: "bg-major-green-light text-major-green-dark",
    Coloration: "bg-major-green-light text-major-green-dark"
  }[d] || "bg-major-night/5 text-major-night/70");

  return (
    <section id="tarifs" className="bg-major-bg py-20 lg:py-28">
      <div className="max-w-7xl mx-auto px-5 lg:px-8">
        <div className="max-w-3xl">
          <span className="inline-block text-xs font-semibold text-major-orange tracking-widest uppercase">Tarifs Coiffure</span>
          <h2 className="mt-3 font-display font-bold text-3xl sm:text-4xl lg:text-[44px] leading-tight text-major-night">
            À la carte ou en parcours complet
          </h2>
          <AccentLine />
          <p className="mt-4 text-major-gray text-lg leading-relaxed">
            Ne payez que les modules dont vous avez besoin, ou économisez avec le parcours complet. Tarifs nets de taxes, financements OPCO et France Travail mobilisables.
          </p>
          <a href="#/formation/barber-a-la-carte" className="mt-5 inline-flex items-center gap-2 bg-major-orange hover:bg-major-orange-dark text-white font-semibold px-6 py-3 rounded-lg transition-all hover:shadow-cta">Composer ma formation dans le simulateur<Icon name="arrow-right" className="w-4 h-4" /></a>
        </div>

        <div className="mt-12 grid lg:grid-cols-3 gap-6 items-start">
          <div className="lg:col-span-1 bg-major-night text-white rounded-2xl p-7 flex flex-col lg:sticky lg:top-28">
            <span className="self-start text-[11px] font-semibold uppercase tracking-wider rounded-full px-3 py-1 bg-major-orange text-white">Le plus complet</span>
            <h3 className="mt-5 font-display font-bold text-2xl">Parcours complet</h3>
            <div className="mt-1 text-white/60 text-sm">12 modules · 294 h (42 j) · certifiant</div>
            <div className="mt-5 flex items-end gap-2">
              <span className="font-display font-bold text-4xl leading-none">7 900 €</span>
              <span className="text-white/60 text-sm mb-1">net de taxes</span>
            </div>
            <div className="mt-1 text-sm text-white/50 line-through">9 570 € à la carte</div>
            <ul className="mt-5 space-y-2 text-sm text-white/85">
              <li className="flex items-start gap-2"><Icon name="check" className="w-4 h-4 text-major-green shrink-0 mt-0.5" />Les 12 modules, tous niveaux</li>              <li className="flex items-start gap-2"><Icon name="check" className="w-4 h-4 text-major-green shrink-0 mt-0.5" />Matériel et produits inclus</li>
              <li className="flex items-start gap-2"><Icon name="check" className="w-4 h-4 text-major-green shrink-0 mt-0.5" />Accompagnement financement</li>
            </ul>
            <button onClick={() => openModal('demo')} className="mt-6 w-full inline-flex items-center justify-center gap-2 bg-major-orange hover:bg-major-orange-dark text-white font-semibold py-3.5 rounded-lg transition-all hover:shadow-cta">
              Demander un devis
              <Icon name="arrow-right" className="w-4 h-4" />
            </button>
            <p className="mt-3 text-center text-[11px] text-white/40">Tarif indicatif · à confirmer</p>
          </div>

          <div className="lg:col-span-2 bg-white rounded-2xl border border-major-night/10 shadow-card overflow-hidden">
            <div className="flex items-center justify-between px-5 sm:px-6 py-4 bg-major-bg/60 border-b border-major-night/5">
              <span className="font-display font-semibold text-major-night">Modules à la carte</span>
              <span className="text-[11px] text-major-gray uppercase tracking-wider">Tarif / module</span>
            </div>
            <div className="divide-y divide-major-night/[0.06]">
              {rows.map((r, i) =>
              <div key={i} className="flex items-center justify-between gap-4 px-5 sm:px-6 py-4 hover:bg-major-bg/40 transition-colors">
                <div className="min-w-0">
                  <div className="flex items-center gap-2 flex-wrap">
                    <span className={"text-[10px] font-semibold uppercase tracking-wide rounded-full px-2 py-0.5 " + chip(r.d)}>{r.d}</span>
                    <span className="text-[11px] text-major-gray">{r.n} · {r.h}</span>
                  </div>
                  <div className="mt-1 font-display font-semibold text-major-night leading-tight">{r.t}</div>
                </div>
                <div className="text-right shrink-0">
                  <div className="font-display font-bold text-major-orange text-lg leading-none">{r.p}</div>
                  <button onClick={() => openModal('demo')} className="mt-1 text-[11px] font-semibold text-major-night/55 hover:text-major-orange transition-colors">S'inscrire →</button>
                </div>
              </div>
              )}
            </div>
          </div>
        </div>

        <p className="mt-6 text-center text-[13px] text-major-gray">
          Tarifs nets de taxes, par personne : 285 € la journée, 490 € les 2 jours. Financement OPCO, France Travail et aides régionales possibles.{' '}
          <a href="#" onClick={(e) => {e.preventDefault();openModal('demo');}} className="text-major-orange font-semibold underline-offset-4 hover:underline">Estimer mon financement →</a>
        </p>
      </div>
    </section>);

}

/* ---------------- ROUTER + DATA ---------------- */
function useHashRoute() {
  const [route, setRoute] = useState(() => (window.location.hash || "#/").slice(1) || "/");
  useEffect(() => {
    const onHash = () => { setRoute((window.location.hash || "#/").slice(1) || "/"); window.scrollTo(0, 0); };
    window.addEventListener("hashchange", onHash);
    return () => window.removeEventListener("hashchange", onHash);
  }, []);
  return route;
}

function findDomain(slug) { return DOMAINS.find((d) => d.slug === slug); }
function findFormation(slug) {
  for (const d of DOMAINS) {
    const f = (d.formations || []).find((x) => x.slug === slug);
    if (f) return { f: f, d: d };
  }
  return null;
}

/* ---------------- Reusable bits ---------------- */
function PageHero({ eyebrow, title, intro, crumb }) {
  return (
    <section className="relative overflow-hidden bg-major-bg border-b border-major-night/[0.06]">
      <div aria-hidden="true" className="absolute -top-24 -right-20 w-[420px] h-[420px] rounded-full blur-3xl pointer-events-none" style={{ background: "radial-gradient(circle, rgba(0,85,164,0.16), transparent 70%)" }} />
      <div className="relative max-w-7xl mx-auto px-5 lg:px-8 py-14 lg:py-20">
        <nav className="text-sm text-major-gray mb-5">
          <a href="#/" className="hover:text-major-orange">Accueil</a>
          {crumb && <span><span className="mx-1.5">/</span><a href="#/domaines" className="hover:text-major-orange">Domaines</a></span>}
          <span className="mx-1.5">/</span><span className="text-major-night">{title}</span>
        </nav>
        {eyebrow && <span className="inline-block text-xs font-semibold text-major-orange tracking-widest uppercase">{eyebrow}</span>}
        <h1 className="mt-3 font-display font-bold text-4xl sm:text-5xl leading-tight text-major-night max-w-3xl">{title}</h1>
        {intro && <p className="mt-5 text-major-gray text-lg leading-relaxed max-w-2xl">{intro}</p>}
      </div>
    </section>);

}

function FormationCard({ f }) {
  return (
    <a href={"#/formation/" + f.slug} className="group bg-major-bg hover:bg-white border border-transparent hover:border-major-night/10 rounded-2xl p-6 transition-all hover:shadow-card flex flex-col">
      <div className="flex items-center justify-between gap-3">
        <span className="text-[10px] font-semibold uppercase tracking-wider rounded-full px-2.5 py-1 bg-major-orange/10 text-major-orange-dark">{f.type || "Formation"}</span>
        {f.level && <span className="text-[11px] text-major-gray">{f.level}</span>}
      </div>
      <h3 className="mt-4 font-display font-bold text-lg text-major-night leading-tight">{f.title}</h3>
      {f.sub && <div className="mt-1 text-sm text-major-night/70">{f.sub}</div>}
      {f.desc && <p className="mt-3 text-sm text-major-gray leading-relaxed flex-1">{f.desc}</p>}
      <div className="mt-5 pt-4 border-t border-major-night/[0.08] flex items-center justify-between text-sm">
        <span className="text-major-gray">{f.duration || ""}</span>
        <span className="font-semibold text-major-orange inline-flex items-center gap-1 group-hover:gap-2 transition-all">Voir la fiche <Icon name="arrow-right" className="w-4 h-4" /></span>
      </div>
    </a>);

}

function TabGroup({ tabs }) {
  const [i, setI] = useState(0);
  return (
    <div className="mt-8">
      <div className="flex flex-wrap gap-3">
        {tabs.map((t, idx) =>
        <button key={idx} onClick={() => setI(idx)} className={"text-sm font-semibold px-5 py-2.5 rounded-full transition-all " + (i === idx ? "bg-major-orange text-white shadow-cta" : "bg-major-green text-white hover:bg-major-green-dark")}>{t.label}</button>
        )}
      </div>
      <div className="mt-6 text-major-gray leading-relaxed">{tabs[i].content}</div>
    </div>);

}

function Bullets({ items }) {
  return (
    <ul className="space-y-2">
      {items.map((it, k) =>
      <li key={k} className="flex items-start gap-2"><span className="w-1.5 h-1.5 rounded-full bg-major-orange inline-block shrink-0 mt-[9px]" /><span>{it}</span></li>
      )}
    </ul>);

}

function NotFound() {
  return (
    <section className="max-w-3xl mx-auto px-5 py-28 text-center">
      <h1 className="font-display font-bold text-4xl text-major-night">Page introuvable</h1>
      <p className="mt-4 text-major-gray">Cette page n'existe pas ou a été déplacée.</p>
      <a href="#/" className="mt-6 inline-flex items-center gap-2 bg-major-orange text-white font-semibold px-6 py-3.5 rounded-lg">Retour à l'accueil</a>
    </section>);

}

/* ---------------- DOMAINS GRID (home) ---------------- */
function DomainsGrid() {
  return (
    <section id="domaines" className="bg-white py-20 lg:py-28">
      <div className="max-w-7xl mx-auto px-5 lg:px-8">
        <div className="max-w-3xl">
          <span className="inline-block text-xs font-semibold text-major-orange tracking-widest uppercase">Nos domaines</span>
          <h2 className="mt-3 font-display font-bold text-3xl sm:text-4xl lg:text-[44px] leading-tight text-major-night">7 domaines de formation pour vos équipes</h2>
          <AccentLine />
          <p className="mt-4 text-major-gray text-lg leading-relaxed">
            De la coiffure au management, du digital à la sécurité : des formations finançables, assurées par notre organisme partenaire OpenEd.
          </p>
        </div>
        <div className="mt-12 grid sm:grid-cols-2 lg:grid-cols-3 gap-5">
          {DOMAINS.map((d) =>
          <a key={d.slug} href={"#/domaines/" + d.slug} className={"group relative bg-major-bg hover:bg-white border rounded-2xl p-7 transition-all hover:shadow-card flex flex-col " + (d.priority ? "border-major-orange/40" : "border-transparent hover:border-major-night/10")}>
            <div className="flex items-start justify-between">
              <span className={"w-12 h-12 rounded-xl flex items-center justify-center transition-colors " + (d.priority ? "bg-major-orange text-white" : "bg-major-orange/10 text-major-orange group-hover:bg-major-orange group-hover:text-white")}>
                <Icon name={d.icon} className="w-6 h-6" />
              </span>
              {d.priority && <span className="text-[10px] font-semibold text-major-green-dark bg-major-green-light rounded-full px-2.5 py-1 uppercase tracking-wide">Domaine phare</span>}
            </div>
            <h3 className="mt-5 font-display font-bold text-major-night text-lg leading-tight">{d.name}</h3>
            <p className="mt-2 text-sm text-major-gray leading-relaxed flex-1">{d.tagline}</p>
            <span className="mt-5 inline-flex items-center gap-1.5 text-sm font-semibold text-major-orange group-hover:gap-2 transition-all">
              {(d.formations || []).length} formations <Icon name="arrow-right" className="w-4 h-4" />
            </span>
          </a>
          )}
        </div>
      </div>
    </section>);

}

/* ---------------- PAGES ---------------- */
function SimBanner({ slug, rich }) {
  const href = "#/formation/barber-a-la-carte";
  if (rich) {
    const perks = [
      { icon: "check", t: "Sur-mesure", d: "Modules dès 3 h, on ne paie pas l'inutile" },
      { icon: "wallet", t: "Remises auto", d: "Jusqu'à -15% selon le nombre de modules" },
      { icon: "trend", t: "Devis en 1 clic", d: "Tarif, durée et financement en direct" }];
    return (
      <section className="bg-white">
        <div className="max-w-7xl mx-auto px-5 lg:px-8 pb-6 lg:pb-10">
          <div className="relative overflow-hidden rounded-3xl bg-major-orange text-white p-8 sm:p-10 shadow-cta">
            <div aria-hidden="true" className="absolute -top-16 -right-10 w-72 h-72 rounded-full bg-white/10 blur-2xl pointer-events-none" />
            <div aria-hidden="true" className="absolute -bottom-20 -left-12 w-72 h-72 rounded-full bg-major-night/20 blur-3xl pointer-events-none" />
            <div className="relative grid lg:grid-cols-5 gap-8 items-center">
              <div className="lg:col-span-3">
                <span className="inline-flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wider bg-white/15 rounded-full px-3 py-1">★ Le plus flexible</span>
                <h3 className="mt-4 font-display font-bold text-3xl sm:text-4xl leading-tight">Composez votre formation à la carte</h3>
                <p className="mt-3 text-white/90 text-lg leading-relaxed max-w-xl">Ne payez que les modules dont vous avez besoin. Tarif, remise et durée se calculent en direct, et votre devis se génère en un clic.</p>
                <div className="mt-6 grid sm:grid-cols-3 gap-4">
                  {perks.map((p, i) =>
                  <div key={i} className="flex items-start gap-2.5">
                    <span className="w-8 h-8 rounded-lg bg-white/15 flex items-center justify-center shrink-0"><Icon name={p.icon} className="w-4 h-4" /></span>
                    <div>
                      <div className="font-display font-semibold text-[14px] leading-snug whitespace-nowrap">{p.t}</div>
                      <div className="text-[12px] text-white/75 leading-snug mt-0.5">{p.d}</div>
                    </div>
                  </div>
                  )}
                </div>
                <a href={href} className="mt-7 inline-flex items-center justify-center gap-2 bg-white text-major-orange font-semibold px-7 py-3.5 rounded-lg hover:bg-white/90 transition-all hover:-translate-y-px">
                  Composer ma formation
                  <Icon name="arrow-right" className="w-4 h-4" />
                </a>
              </div>

              {/* aperçu du composer */}
              <div className="lg:col-span-2 hidden lg:block">
                <a href={href} className="block bg-white rounded-2xl shadow-card p-5 text-major-night rotate-1 hover:rotate-0 hover:shadow-cta transition-all">
                  <div className="text-[11px] font-semibold uppercase tracking-wide text-major-gray/70">Votre parcours</div>
                  <div className="mt-3 space-y-2">
                    {[["D1", "Low fade & mid fade"], ["B2", "Taille & sculpture de barbe"], ["F1", "Designs & raies au rasoir"]].map((m, i) =>
                    <div key={i} className="flex items-center gap-2.5 rounded-lg border border-major-orange/30 bg-major-orange/[0.04] px-3 py-2">
                      <span className="w-4 h-4 rounded bg-major-orange text-white flex items-center justify-center"><Icon name="check" className="w-3 h-3" /></span>
                      <span className="text-[11px] font-bold text-major-orange">{m[0]}</span>
                      <span className="text-[12.5px] text-major-night leading-tight">{m[1]}</span>
                    </div>
                    )}
                  </div>
                  <div className="mt-3 pt-3 border-t border-major-night/10 flex items-center justify-between">
                    <span className="text-xs text-major-gray">10 h · présentiel</span>
                    <span className="font-display font-bold text-major-orange text-lg">650 €</span>
                  </div>
                </a>
              </div>
            </div>
          </div>
        </div>
      </section>);

  }
  return (
    <section className="bg-white">
      <div className="max-w-7xl mx-auto px-5 lg:px-8 py-6 lg:py-8">
        <div className="rounded-2xl bg-major-orange text-white px-7 py-6 flex flex-col sm:flex-row sm:items-center justify-between gap-4">
          <div>
            <div className="font-display font-bold text-xl leading-tight">Trouvez la formation adaptée à votre entreprise</div>
            <div className="text-white/85 text-sm mt-1">Explorez nos 7 domaines et choisissez le parcours qui répond à vos enjeux.</div>
          </div>
          <a href="#domaines" className="shrink-0 inline-flex items-center justify-center gap-2 bg-white text-major-orange font-semibold px-6 py-3.5 rounded-lg hover:bg-white/90 transition-all">
            Voir toutes les formations
            <Icon name="arrow-right" className="w-4 h-4" />
          </a>
        </div>
      </div>
    </section>);

}

function Home() {
  return (
    <>
      <Hero />
      <SimBanner />
      <DomainsGrid />
      <WhyMajor />
      <CaseStudies />
      <FAQ />
      <ContactForm />
    </>);

}

function DomainsIndex() {
  return (
    <>
      <PageHero eyebrow="Nos domaines" title="Domaines de formation" intro="Choisissez un domaine pour découvrir les formations associées. Toutes nos formations sont assurées par OpenEd." />
      <DomainsGrid />
    </>);

}

function DomainPage({ slug }) {
  const d = findDomain(slug);
  if (!d) return <NotFound />;
  return (
    <>
      <PageHero eyebrow={d.priority ? "Domaine phare" : "Domaine"} title={d.name} intro={d.intro} crumb={true} />
      {d.slug === "coiffure" && <SimBanner rich />}
      <section className="bg-white py-16 lg:py-24">
        <div className="max-w-7xl mx-auto px-5 lg:px-8">
          <div className="flex items-end justify-between gap-4 flex-wrap">
            <h2 className="font-display font-bold text-2xl sm:text-3xl text-major-night">Nos formations</h2>
            <span className="text-sm text-major-gray">{(d.formations || []).length} formations · à la carte</span>
          </div>
          <div className="mt-8 grid sm:grid-cols-2 lg:grid-cols-3 gap-5">
            {(d.formations || []).map((f) => <FormationCard key={f.slug} f={f} />)}
          </div>
          {d.catalogue &&
          <div className="mt-12">
            <h3 className="font-display font-bold text-xl text-major-night">Catalogue de sensibilisation</h3>
            <div className="mt-5 grid sm:grid-cols-2 lg:grid-cols-3 gap-4">
              {d.catalogue.map((cat, ci) =>
              <div key={ci} className="bg-major-bg rounded-2xl border border-major-night/5 p-5">
                <div className="font-display font-semibold text-major-night text-sm">{cat.h}</div>
                <ul className="mt-2 space-y-1">
                  {cat.items.map((it, k) => <li key={k} className="flex items-start gap-2 text-[12.5px] text-major-gray leading-snug"><span className="w-1.5 h-1.5 rounded-full bg-major-orange inline-block shrink-0 mt-[7px]" />{it}</li>)}
                </ul>
              </div>
              )}
            </div>
          </div>}
          <p className="mt-8 text-sm text-major-gray">Cette offre est assurée par <strong className="text-major-night">OpenEd</strong>.</p>
        </div>
      </section>
      <ContactForm />
    </>);

}

function SubModulePicker({ f }) {
  const groups = f.submodules || [];
  const examples = f.examples || [];
  const ft = f.fixedTop, fb = f.fixedBottom;
  const rates = f.rates || { pres: 65, dist: 41 };
  const { open: openModal } = useModal();
  const [sel, setSel] = useState([]);
  const [modality, setModality] = useState("pres");
  const all = groups.flatMap((g) => g.items);
  const toggle = (code) => setSel((s) => s.includes(code) ? s.filter((x) => x !== code) : [...s, code]);
  const hf = (h) => (h % 1 === 0 ? String(h) : String(h).replace(".", ",")) + " h";
  const count = sel.length;
  const fixedHours = (ft ? ft.hours : 0) + (fb ? fb.hours : 0);
  const totalHours = fixedHours + count * 3;
  const rate = modality === "dist" ? rates.dist : rates.pres;
  const modalityLabel = modality === "dist" ? "Distanciel" : "Présentiel";
  const total = Math.round(totalHours * rate);
  const days = Math.max(1, Math.ceil(totalHours / 7));
  const selItems = all.filter((m) => sel.includes(m.code));
  const devis = "Parcours barber à la carte (" + modalityLabel + ") : " +
    (ft ? "[Inclus] " + ft.title + " ; " : "") +
    selItems.map((m) => m.code + " " + m.title).join(", ") +
    (fb ? " ; [Inclus] " + fb.title : "") +
    " · " + hf(totalHours) + " · " + days + " jour" + (days > 1 ? "s" : "") + " · total estimé " + simFmt(total) + " (" + rate + " €/h " + modalityLabel.toLowerCase() + ").";

  const FixedRow = ({ m, pos }) =>
  <div className="rounded-xl border border-major-green/30 bg-major-green-light/50 p-4 flex items-center gap-3">
    <span className="inline-flex items-center justify-center w-6 h-6 rounded-md bg-major-green text-white shrink-0"><Icon name="check" className="w-4 h-4" /></span>
    <div className="min-w-0 flex-1">
      <div className="text-[10px] font-semibold uppercase tracking-wide text-major-green-dark">Obligatoire · inclus · {pos}</div>
      <div className="font-display font-semibold text-major-night text-sm leading-tight">{m.title}</div>
    </div>
    <span className="text-xs font-semibold text-major-night/60 shrink-0">{hf(m.hours)}</span>
  </div>;

  return (
    <div className="mt-12">
      <h2 className="font-display font-bold text-2xl text-major-night">Composez votre parcours à la carte</h2>
      <p className="mt-2 text-major-gray leading-relaxed max-w-3xl">Votre journée commence par un module d'ouverture et se termine par une validation (tous deux inclus). Entre les deux, choisissez vos modules techniques (3 h chacun, jusqu'à 2 par journée).</p>

      {examples && examples.length > 0 &&
      <div className="mt-5">
        <div className="text-[11px] font-semibold text-major-night/50 tracking-widest uppercase">Exemples de parcours</div>
        <div className="mt-2 flex flex-wrap gap-2">
          {examples.map((exg, k) =>
          <button key={k} onClick={() => setSel(exg.codes)} className="text-[12.5px] font-medium px-3 py-1.5 rounded-full border border-major-night/15 hover:border-major-orange hover:text-major-orange transition-colors">{exg.label} <span className="text-major-gray">({exg.codes.join(" + ")})</span></button>
          )}
        </div>
      </div>}

      <div className="mt-6 grid lg:grid-cols-3 gap-8 items-start">
        {/* Gauche : modules, un par ligne */}
        <div className="lg:col-span-2 space-y-3">
          {ft && <FixedRow m={ft} pos="ouverture" />}

          {groups.map((g) =>
          <div key={g.h} className="pt-2">
            <div className="text-[11px] font-semibold text-major-orange tracking-widest uppercase">{g.h}</div>
            <div className="mt-2 space-y-2">
              {g.items.map((m) => {
                const on = sel.includes(m.code);
                return (
                  <button key={m.code} onClick={() => toggle(m.code)} className={"w-full text-left rounded-xl border p-4 flex items-center gap-3 transition-all " + (on ? "border-major-orange bg-major-orange/[0.05]" : "border-major-night/10 bg-white hover:border-major-orange/40")}>
                    <span className={"w-5 h-5 rounded border-2 flex items-center justify-center shrink-0 " + (on ? "bg-major-orange border-major-orange text-white" : "border-major-night/20 text-transparent")}><Icon name="check" className="w-3.5 h-3.5" /></span>
                    <div className="min-w-0 flex-1">
                      <div className="flex items-center gap-2">
                        <span className="text-[11px] font-bold text-major-orange">{m.code}</span>
                        <span className="text-[10px] text-major-gray uppercase tracking-wide">{m.level}</span>
                      </div>
                      <div className="font-display font-semibold text-major-night text-sm leading-tight">{m.title}</div>
                      {m.desc && <div className="mt-0.5 text-[12px] text-major-gray leading-snug">{m.desc}</div>}
                    </div>
                    <span className="text-[11px] font-semibold text-major-night/50 shrink-0">3 h</span>
                  </button>);

              })}
            </div>
          </div>
          )}

          {fb && <FixedRow m={fb} pos="clôture" />}
        </div>

        {/* Droite : récap dynamique */}
        <aside className="lg:col-span-1">
          <div className="lg:sticky lg:top-28 bg-major-night text-white rounded-2xl p-6">
            <div className="inline-flex bg-white/10 rounded-full p-1 w-full">
              {[{ k: "pres", l: "Présentiel" }, { k: "dist", l: "Distanciel" }].map((o) =>
              <button key={o.k} onClick={() => setModality(o.k)} className={"flex-1 text-xs font-semibold px-3 py-2 rounded-full transition-all " + (modality === o.k ? "bg-major-orange text-white" : "text-white/70 hover:text-white")}>{o.l}</button>
              )}
            </div>

            <div className="mt-5 font-display font-bold text-lg">Votre parcours</div>
            <div className="text-white/55 text-sm mt-0.5">{count} module{count > 1 ? "s" : ""} technique{count > 1 ? "s" : ""} + 2 inclus</div>

            <div className="mt-4 pt-4 border-t border-white/15 space-y-2 text-sm">
              <div className="flex justify-between text-white/70"><span>Durée totale</span><span>{hf(totalHours)}</span></div>
              <div className="flex justify-between text-white/70"><span>Journées</span><span>{days} j</span></div>
              <div className="flex justify-between text-white/70"><span>Tarif horaire</span><span>{rate} €/h</span></div>
              <div className="flex justify-between items-end"><span className="text-white/70">Total estimé</span><span className="font-display font-bold text-3xl leading-none">{simFmt(total)}</span></div>
              <div className="text-[11px] text-white/40">Nets de taxes, par personne · estimation</div>
            </div>

            <button onClick={() => openModal('demo', { need: devis })} disabled={count === 0} className={"mt-5 w-full inline-flex items-center justify-center gap-2 font-semibold py-3.5 rounded-lg transition-all " + (count ? "bg-major-orange hover:bg-major-orange-dark text-white shadow-cta" : "bg-white/10 text-white/40 cursor-not-allowed")}>
              Demander un devis
              <Icon name="arrow-right" className="w-4 h-4" />
            </button>
            <p className="mt-3 text-[11px] text-white/40 leading-relaxed">Total indicatif (heures × tarif horaire). {rates.pres} €/h présentiel · {rates.dist} €/h distanciel.</p>
          </div>
        </aside>
      </div>
    </div>);

}

function FormationFiche({ slug }) {
  const found = findFormation(slug);
  if (!found) return <NotFound />;
  const f = found.f, d = found.d;
  const others = (d.formations || []).filter((x) => x.slug !== f.slug).slice(0, 3);
  return (
    <>
      <section className="relative overflow-hidden bg-major-bg border-b border-major-night/[0.06]">
        <div className="relative max-w-7xl mx-auto px-5 lg:px-8 py-12 lg:py-16">
          <nav className="text-sm text-major-gray mb-5">
            <a href="#/" className="hover:text-major-orange">Accueil</a><span className="mx-1.5">/</span>
            <a href={"#/domaines/" + d.slug} className="hover:text-major-orange">{d.name}</a><span className="mx-1.5">/</span>
            <span className="text-major-night">{f.title}</span>
          </nav>
          <div className="flex flex-wrap items-center gap-2">
            {f.level && <span className="text-[11px] font-semibold uppercase tracking-wider rounded-full px-3 py-1 bg-major-orange/10 text-major-orange-dark">{f.level}</span>}
            {f.duration && <span className="text-[11px] font-semibold uppercase tracking-wider rounded-full px-3 py-1 bg-major-night/5 text-major-night/70">{f.duration}</span>}          </div>
          <h1 className="mt-4 font-display font-bold text-3xl sm:text-[40px] leading-tight text-major-night max-w-3xl">{f.title}</h1>
          {f.sub && <p className="mt-2 text-major-orange font-display font-semibold text-lg">{f.sub}</p>}
        </div>
      </section>

      <section className="bg-white py-14 lg:py-20">
        <div className="max-w-7xl mx-auto px-5 lg:px-8">
          {f.submodules ?
          <>
            <div className="max-w-3xl">
              <h2 className="font-display font-bold text-2xl text-major-night">Résumé de la formation</h2>
              <p className="mt-4 text-major-gray leading-relaxed">{f.accroche || f.desc}</p>
              {f.objectifs && f.objectifs.length > 0 &&
              <div className="mt-8">
                <h3 className="font-display font-bold text-xl text-major-night">Objectifs</h3>
                <ul className="mt-4 space-y-2.5">
                  {f.objectifs.map((o, k) => <li key={k} className="flex items-start gap-3 text-major-night/85"><Icon name="check" className="w-5 h-5 text-major-green shrink-0 mt-0.5" /><span>{o}</span></li>)}
                </ul>
              </div>}
            </div>

            <SubModulePicker f={f} />

            <div className="max-w-3xl mt-12">
              <h3 className="font-display font-bold text-xl text-major-night">Modalités</h3>
              <TabGroup tabs={[
              { label: "Méthodes pédagogiques", content: <Bullets items={ORG.methodesPres} /> },
              { label: "Évaluation", content: <Bullets items={ORG.modalitesEval} /> },
              { label: "Accessibilité", content: <p>{ORG.accessibilite} Délai d'accès : durée d'instruction du dossier.</p> },
              { label: "Financement", content: <p>{ORG.financement}</p> },
              { label: "Réglementaire", content: <p>{ORG.marque} Cette formation est assurée par {ORG.organisme}. {ORG.legalLine}</p> }]} />
            </div>
          </> :

          <div className="grid lg:grid-cols-3 gap-10">
            <div className="lg:col-span-2">
              <h2 className="font-display font-bold text-2xl text-major-night">Résumé de la formation</h2>
              <p className="mt-4 text-major-gray leading-relaxed">{f.accroche || f.desc}</p>

              {f.objectifs && f.objectifs.length > 0 &&
              <div className="mt-10">
                <h3 className="font-display font-bold text-xl text-major-night">Objectifs</h3>
                <ul className="mt-4 space-y-2.5">
                  {f.objectifs.map((o, k) =>
                  <li key={k} className="flex items-start gap-3 text-major-night/85"><Icon name="check" className="w-5 h-5 text-major-green shrink-0 mt-0.5" /><span>{o}</span></li>
                  )}
                </ul>
              </div>}

              {f.programme && f.programme.length > 0 &&
              <div className="mt-10">
                <h3 className="font-display font-bold text-xl text-major-night">Programme</h3>
                <div className="mt-5 space-y-5">
                  {f.programme.map((sec, si) =>
                  <div key={si} className="rounded-2xl bg-major-bg/60 border border-major-night/5 p-5">
                    <div className="font-display font-semibold text-major-night">{sec.h}</div>
                    <ul className="mt-3 space-y-1.5">
                      {sec.items.map((it, k) => <li key={k} className="flex items-start gap-2 text-[14px] text-major-gray leading-snug"><span className="w-1.5 h-1.5 rounded-full bg-major-orange inline-block shrink-0 mt-[8px]" /><span>{it}</span></li>)}
                    </ul>
                  </div>
                  )}
                </div>
              </div>}

              <div className="mt-10">
                <h3 className="font-display font-bold text-xl text-major-night">Modalités</h3>
                <TabGroup tabs={[
              { label: "Méthodes pédagogiques", content: <Bullets items={ORG.methodesPres} /> },
              { label: "Évaluation", content: <Bullets items={ORG.modalitesEval} /> },
              { label: "Accessibilité", content: <p>{ORG.accessibilite} Délai d'accès : durée d'instruction du dossier.</p> },
              { label: "Financement", content: <p>{ORG.financement}</p> },
              { label: "Réglementaire", content: <p>{ORG.marque} Cette formation est assurée par {ORG.organisme}. {ORG.legalLine}</p> }]} />
              </div>
            </div>

            <aside className="lg:col-span-1">
              <div className="lg:sticky lg:top-28 bg-white rounded-2xl border border-major-night/10 shadow-card p-6">
                <div className="space-y-4 text-sm">
                  <Info label="Durée" value={f.duration} />
                  {f.level && <Info label="Niveau" value={f.level} />}
                  {f.tarifPres && <Info label="Tarif présentiel (inter)" value={f.tarifPres + " net / participant"} accent={true} />}
                  {f.tarifDist && <Info label="Tarif distanciel asynchrone" value={f.tarifDist + " net / participant"} accent={true} />}
                  <Info label="Intra" value="Sur devis" />
                  {f.effectif && <Info label="Effectif" value={f.effectif} />}
                  <Info label="Public" value={f.public} />
                  <Info label="Prérequis" value={f.prerequis} />
                  <Info label="Lieu" value={ORG.lieuPres + (f.tarifDist ? " ou à distance" : "")} />
                  <Info label="Délai d'accès" value={ORG.delai} />
                  <Info label="Langue" value="Français" />
                </div>
                <div className="mt-6"><FicheCta /></div>
                <p className="mt-4 text-[11px] text-major-gray leading-relaxed">Assurée par <strong className="text-major-night">{ORG.organisme}</strong>. {ORG.marque}</p>
              </div>
            </aside>
          </div>}
        </div>
      </section>


      {others.length > 0 &&
      <section className="bg-white py-16 lg:py-24">
        <div className="max-w-7xl mx-auto px-5 lg:px-8">
          <h2 className="font-display font-bold text-2xl sm:text-3xl text-major-night">Nos autres formations</h2>
          <div className="mt-8 grid sm:grid-cols-2 lg:grid-cols-3 gap-5">
            {others.map((o) => <FormationCard key={o.slug} f={o} />)}
          </div>
        </div>
      </section>}

      <ContactForm />
    </>);

}

function Info({ label, value, accent }) {
  if (!value) return null;
  return (
    <div className="flex flex-col gap-0.5 pb-3 border-b border-major-night/[0.06] last:border-0">
      <span className="text-[10px] font-semibold uppercase tracking-wider text-major-gray/70">{label}</span>
      <span className={"text-[13.5px] " + (accent ? "font-display font-bold text-major-orange text-base" : "text-major-night")}>{value}</span>
    </div>);

}

function FicheCta() {
  const { open: openModal } = useModal();
  return (
    <button onClick={() => openModal('demo')} className="inline-flex items-center justify-center gap-2 bg-major-orange hover:bg-major-orange-dark text-white font-semibold px-7 py-3.5 rounded-lg transition-all hover:shadow-cta">
      Demander cette formation
      <Icon name="arrow-right" className="w-4 h-4" />
    </button>);

}

function MethodePage() {
  return (
    <>
      <PageHero eyebrow="La méthode" title="Notre méthode de formation" intro="De la définition de vos besoins jusqu'à la validation des compétences : une méthode concrète, orientée pratique." />
      <Method />
    </>);

}

function FinancementPage() {
  return (
    <>
      <PageHero eyebrow="Financement" title="Financer vos formations" intro="OPCO, France Travail, aides régionales : on vous accompagne sur le montage et le suivi du dossier de prise en charge." />
      <Financement />
    </>);

}

function TarifsPage() {
  return (
    <>
      <PageHero eyebrow="Tarifs" title="Nos tarifs" intro="Tarifs nets de taxes, par personne. Au choix : présentiel (inter ou intra) ou distanciel asynchrone. Financement OPCO, France Travail et aides régionales mobilisables." />
      <section className="bg-white py-16 lg:py-24">
        <div className="max-w-7xl mx-auto px-5 lg:px-8">
          <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-5">
            {DOMAINS.map((d) => {
              const ps = (d.formations || []).map((f) => simPrice(f.tarifPres)).filter(Boolean);
              const mn = ps.length ? Math.min.apply(null, ps) : 0;
              const mx = ps.length ? Math.max.apply(null, ps) : 0;
              return (
                <a key={d.slug} href={"#/domaines/" + d.slug} className="group bg-major-bg hover:bg-white border border-transparent hover:border-major-night/10 rounded-2xl p-6 transition-all hover:shadow-card flex flex-col">
                  <div className="flex items-center gap-3">
                    <span className={"w-10 h-10 rounded-xl flex items-center justify-center shrink-0 " + (d.priority ? "bg-major-orange text-white" : "bg-major-orange/10 text-major-orange")}>
                      <Icon name={d.icon} className="w-5 h-5" />
                    </span>
                    <h3 className="font-display font-semibold text-major-night leading-tight">{d.name}</h3>
                  </div>
                  <div className="mt-4 text-sm text-major-gray">{(d.formations || []).length} formations</div>
                  <div className="mt-1 font-display font-bold text-major-orange text-lg">{mn === mx ? simFmt(mn) : "de " + simFmt(mn) + " à " + simFmt(mx)}</div>
                  <div className="text-[11px] text-major-gray">présentiel · distanciel moins cher</div>
                </a>);

            })}
          </div>

          <div className="mt-10 rounded-2xl bg-major-night text-white px-7 py-7 flex flex-col sm:flex-row sm:items-center justify-between gap-5">
            <div>
              <div className="font-display font-bold text-xl">Composez votre formation à la carte</div>
              <div className="text-white/75 text-sm mt-1.5">Sélectionnez vos modules : tarif, remise et durée calculés en direct. Remises -5% dès 3 modules, -10% dès 5, -15% dès 8.</div>
            </div>
            <a href="#/formation/barber-a-la-carte" className="shrink-0 inline-flex items-center justify-center gap-2 bg-major-orange hover:bg-major-orange-dark text-white font-semibold px-6 py-3.5 rounded-lg transition-all hover:shadow-cta">
              Ouvrir le simulateur
              <Icon name="arrow-right" className="w-4 h-4" />
            </a>
          </div>

          <p className="mt-6 text-sm text-major-gray">Présentiel : 25 rue du Jardin Modèle, 92600 Asnières-sur-Seine. Distanciel : accessible partout. Intra (sur votre site) sur devis. Formations assurées par OpenEd.</p>
        </div>
      </section>
    </>);

}

function PourquoiPage() {
  return (
    <>
      <PageHero eyebrow="Pourquoi-nous" title="Pourquoi choisir France Entreprise" intro="Des formations concrètes, des formateurs praticiens, des financements pris en charge et un interlocuteur dédié." />
      <WhyMajor />
      <Testimonial />
      <CaseStudies />
    </>);

}

/* ---------------- SIMULATEUR (coiffure, à la carte) ---------------- */
function simPrice(s) { return s ? (parseInt(String(s).replace(/[^0-9]/g, ""), 10) || 0) : 0; }
function simDur(s) {
  const h = (String(s).match(/(\d+)\s*h/) || [])[1];
  const j = (String(s).match(/(\d+)\s*j/) || [])[1];
  return { h: h ? +h : 0, j: j ? +j : 0 };
}
function simFmt(n) { return String(n).replace(/\B(?=(\d{3})+(?!\d))/g, " ") + " €"; }
function simDevis(selected, total, hours, days) {
  return "Sélection simulateur (présentiel) : " + selected.map((m) => m.title + " (" + m.price + ")").join(", ") + " — Total estimé " + simFmt(total) + " · " + hours + " h · " + days + " j.";
}

function simPriceStr(f, modality) {
  return (modality === "dist" && f.tarifDist) ? f.tarifDist : f.tarifPres;
}
function simRate(n) { if (n >= 8) return 0.15; if (n >= 5) return 0.10; if (n >= 3) return 0.05; return 0; }
function simPrintSelection(rows, modalityLabel, subTotal, rate, total, hours, days) {
  var disc = Math.round(subTotal * rate);
  var html = '<!DOCTYPE html><html lang="fr"><head><meta charset="utf-8"><title>Ma formation - France Entreprise</title>' +
    '<style>body{font-family:Arial,Helvetica,sans-serif;color:#14213D;padding:48px;max-width:720px;margin:auto;}' +
    'h1{color:#0055A4;font-size:24px;margin:0 0 4px;} .sub{color:#6B7280;margin:0 0 24px;}' +
    'table{width:100%;border-collapse:collapse;margin-top:16px;} th,td{text-align:left;padding:10px 8px;border-bottom:1px solid #eee;font-size:14px;}' +
    '.r{text-align:right;} .tot{font-size:22px;font-weight:bold;color:#0055A4;} .muted{color:#6B7280;font-size:12px;margin-top:28px;line-height:1.5;}</style>' +
    '</head><body>' +
    '<h1>France Entreprise &mdash; Ma formation</h1>' +
    '<p class="sub">Modalit&eacute; : ' + modalityLabel + '</p>' +
    '<table><thead><tr><th>Module</th><th>Dur&eacute;e</th><th class="r">Tarif</th></tr></thead><tbody>' +
    rows.map(function (r) { return '<tr><td>' + r.title + '</td><td>' + (r.duration || '') + '</td><td class="r">' + (r.price || '') + '</td></tr>'; }).join('') +
    '</tbody></table>' +
    '<p style="margin-top:18px">Dur&eacute;e totale : <strong>' + hours + ' h &middot; ' + days + ' j</strong></p>' +
    '<p>Sous-total : ' + simFmt(subTotal) + '</p>' +
    (rate > 0 ? '<p>Remise (-' + Math.round(rate * 100) + '%) : -' + simFmt(disc) + '</p>' : '') +
    '<p class="tot">Total estim&eacute; : ' + simFmt(total) + '</p>' +
    '<p class="muted">Tarifs nets de taxes, par personne. Formations assur&eacute;es par OpenEd. Document non contractuel.</p>' +
    '</body></html>';
  var w = window.open('', '_blank');
  if (!w) { alert('Autorisez les fenêtres pop-up pour imprimer votre sélection.'); return; }
  w.document.write(html); w.document.close(); w.focus();
  setTimeout(function () { w.print(); }, 350);
}

function simStdHours(f) {
  var m = String(f.duration).match(/(\d+)\s*heures?/);
  if (m) return Math.max(7, +m[1]);
  var j = String(f.duration).match(/(\d+)\s*jours?/);
  if (j) return Math.max(7, (+j[1]) * 7);
  var h = String(f.duration).match(/(\d+)\s*h/);
  if (h) return Math.max(7, +h[1]);
  return 7;
}
const SIM_HOUR_OPTIONS = [7, 14, 21, 28, 35];

/* ---------------- ROOT ---------------- */
function App() {
  const route = useHashRoute();
  const parts = route.split("/").filter(Boolean);
  let page;
  if (route === "/" || route === "") page = <Home />;
  else if (parts[0] === "domaines" && parts[1]) page = <DomainPage slug={parts[1]} />;
  else if (parts[0] === "domaines") page = <DomainsIndex />;
  else if (parts[0] === "formation" && parts[1]) page = <FormationFiche slug={parts[1]} />;
  else if (route === "/methode") page = <MethodePage />;
  else if (route === "/financement") page = <FinancementPage />;
  else if (route === "/tarifs") page = <TarifsPage />;
  else if (route === "/pourquoi") page = <PourquoiPage />;
  else page = <NotFound />;
  return (
    <ModalProvider>
      <div className="min-h-screen bg-white">
        <Navbar />
        <main>{page}</main>
        <Footer />
      </div>
    </ModalProvider>);

}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);