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';
  return (
    <img
      src={dark ? 'logos/major-business-white.png' : 'logos/major-business.png'}
      alt="Major Business"
      className={`${h} w-auto object-contain select-none`}
      draggable="false"
    />
  );
};


/* 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>;
    default:return null;
  }
};

/* ---------------- TOP BANNER ---------------- */
function TopBanner() {
  const [visible, setVisible] = useState(true);
  const { open: openModal } = useModal();
  if (!visible) return null;
  return (
    <div className="bg-major-night text-white text-sm relative z-[55]">
      <div className="max-w-7xl mx-auto px-5 lg:px-8 py-2.5 flex items-center justify-center gap-4 text-center" style={{ textAlign: "center", color: "rgb(6, 165, 114)" }}>
        <span className="hidden sm:inline-flex items-center justify-center w-6 h-6 rounded-full bg-major-orange/20 text-major-orange text-xs font-bold" style={{ color: "rgb(6, 165, 114)" }}>!</span>
        <p className="text-[13px] sm:text-sm">
          <strong className="text-major-orange" style={{ color: "rgb(105, 0, 255)" }}><span style={{ color: "rgb(230, 252, 243)" }}>Webinaire — jeudi 12h30</span></strong>
          <span className="text-white/70 hidden sm:inline"> · Obligation de formation 2026 : ce qui change pour les dirigeants.</span>
          <a
            href="#"
            onClick={(e) => {e.preventDefault();openModal('demo');}}
            className="ml-2 underline underline-offset-4 hover:text-major-orange transition-colors">
            
            S’inscrire →
          </a>
        </p>
        <button
          aria-label="Fermer la bannière"
          onClick={() => setVisible(false)}
          className="absolute right-3 sm:right-4 top-1/2 -translate-y-1/2 text-white/50 hover:text-white p-1">
          
          <svg width="14" height="14" 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 { open: openModal } = useModal();

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

  const navItems = [
  { id: 'pourquoi', label: 'Pourquoi Major' },
  { id: 'formations', label: 'Formations' },
  { id: 'methode', label: 'Notre méthode' },
  { id: 'financement', label: 'Financement' }];


  return (
    <header className="sticky top-0 inset-x-0 z-50 bg-white border-b border-major-night/[0.06]">
      <div className="max-w-7xl mx-auto px-5 lg:px-8 h-[72px] flex items-center justify-between gap-6">
        <a href="#top" onClick={(e) => {e.preventDefault();smoothScrollTo('top');}} aria-label="Major Business – Accueil">
          <Logo size="text-2xl" />
        </a>

        <nav className="hidden lg:flex items-center gap-7">
          {navItems.map((n) =>
          <a
            key={n.id}
            href={`#${n.id}`}
            onClick={(e) => {e.preventDefault();smoothScrollTo(n.id);}}
            className="text-[15px] font-medium text-major-night/85 hover:text-major-orange transition-colors">
            
              {n.label}
            </a>
          )}
        </nav>

        <div className="hidden md:flex items-center gap-5">
          <a href="tel:+33189480878" className="hidden lg:inline-flex items-center gap-2 text-major-night font-semibold text-[15px] hover:text-major-orange transition-colors">
            <Icon name="phone" className="w-4 h-4" />
            01 89 48 08 78
          </a>
          <button
            onClick={() => openModal('demo')}
            className="bg-major-orange hover:bg-major-orange-dark text-white text-sm font-semibold px-5 py-2.5 rounded-lg transition-all hover:shadow-cta">
            
            Demander un devis
          </button>
        </div>

        {/* Mobile hamburger */}
        <button
          className="lg:hidden w-10 h-10 inline-flex items-center justify-center rounded-lg text-major-night"
          onClick={() => setMenuOpen(true)}
          aria-label="Ouvrir le menu">
          
          <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>

      {/* Mobile overlay */}
      <div
        className={`mob-menu lg:hidden fixed inset-0 bg-major-night text-white z-[60] ${menuOpen ? '' : 'closed'}`}
        role="dialog"
        aria-modal="true">
        
        <div className="h-[72px] px-5 flex items-center justify-between border-b border-white/10">
          <Logo dark size="text-2xl" />
          <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-8 flex flex-col gap-1">
          {navItems.map((n) =>
          <a
            key={n.id}
            href={`#${n.id}`}
            onClick={(e) => {e.preventDefault();setMenuOpen(false);setTimeout(() => smoothScrollTo(n.id), 240);}}
            className="text-xl font-display font-semibold py-3 border-b border-white/10">
            
              {n.label}
            </a>
          )}
          <a href="tel:+33189480878" className="mt-6 inline-flex items-center gap-2 text-white/80 text-base">
            <Icon name="phone" className="w-4 h-4" /> 01 89 48 08 78
          </a>
          <button
            onClick={() => {setMenuOpen(false);setTimeout(() => openModal('demo'), 240);}}
            className="mt-4 bg-major-orange hover:bg-major-orange-dark text-white font-semibold px-5 py-4 rounded-lg text-lg">
            
            Demander un devis →
          </button>
        </div>
      </div>
    </header>);

}

/* ---------------- HERO ---------------- */
const HERO_THEMES = [
{
  key: 'performance',
  eyebrow: 'Solution formation pour PME & ETI',
  eyebrowDot: 'bg-major-green',
  eyebrowText: 'text-major-green-dark',
  eyebrowBg: 'bg-major-green-light',
  punch: 'L’anti-catalogue de formation.',
  h1Before: 'Faites de la formation un ',
  h1Highlight: 'levier de performance',
  h1After: ', pas une contrainte réglementaire.',
  body: 'Major Business accompagne les PME et ETI dans le déploiement de plans de formation sur-mesure : programmes co-construits avec vos métiers, conformité L6315-1 sécurisée, montage des dossiers OPCO et CPF pris en charge par nos équipes. Vous pilotez l’impact, on gère l’exécution.',
  visual: 'plan',
  bg1: 'rgba(105,0,255,0.07)',
  bg2: 'rgba(8,207,141,0.06)'
},
{
  key: 'burnout',
  eyebrow: 'Prévention RPS & qualité de vie au travail',
  eyebrowDot: 'bg-major-green',
  eyebrowText: 'text-major-green-dark',
  eyebrowBg: 'bg-major-green-light',
  punch: '30 000 € : c’est ce que coûte un seul arrêt pour épuisement.',
  h1Before: '',
  h1Highlight: 'Stoppez le burnout',
  h1After: ' avant qu’il ne coûte plus cher qu’un plan de prévention.',
  body: 'Major Business conçoit des programmes de prévention RPS pour vos managers : détection des signaux faibles, conduite des entretiens difficiles, régulation de la charge mentale. Mesurable, finançable, déployable sous 3 semaines.',
  visual: 'burnout',
  bg1: 'rgba(255,138,76,0.10)',
  bg2: 'rgba(105,0,255,0.05)'
},
{
  key: 'management',
  eyebrow: 'Formation managers PME & ETI',
  eyebrowDot: 'bg-major-orange',
  eyebrowText: 'text-major-orange-dark',
  eyebrowBg: 'bg-major-orange/10',
  punch: '60 % des managers n’ont jamais été formés au management.',
  h1Before: 'Vos managers ont été promus pour leur expertise, ',
  h1Highlight: 'pas pour leur posture de leader',
  h1After: '.',
  body: 'Major Business construit des programmes de leadership ancrés dans vos situations réelles : feedback, conduite du changement, management hybride, gestion de la performance. Cas concrets, mises en situation avec un coach praticien, mesure du transfert en poste à 3 mois.',
  visual: 'management',
  bg1: 'rgba(105,0,255,0.10)',
  bg2: 'rgba(47,43,80,0.06)'
},
{
  key: 'commercial',
  eyebrow: 'Formation commerciale terrain',
  eyebrowDot: 'bg-major-orange',
  eyebrowText: 'text-major-orange-dark',
  eyebrowBg: 'bg-major-orange/10',
  punch: 'Le talent fait gagner. La méthode fait scaler.',
  h1Before: 'Vos commerciaux performent à 70 % de leur potentiel. ',
  h1Highlight: 'Les 30 % manquants',
  h1After: ' tiennent à la méthode, pas au talent.',
  body: 'Négociation complexe, vente additionnelle, traitement des objections, fidélisation grands comptes. Major Business déploie des programmes commerciaux conçus avec vos directions des ventes. ROI mesuré sur chiffre d’affaires à 6 mois. Jusqu’à × 8 sur le ROI formation.',
  visual: 'commercial',
  bg1: 'rgba(255,138,76,0.10)',
  bg2: 'rgba(8,207,141,0.08)'
},
{
  key: 'conformite',
  eyebrow: 'Article L6315-1 · Obligation de formation',
  eyebrowDot: 'bg-major-orange',
  eyebrowText: 'text-major-orange-dark',
  eyebrowBg: 'bg-major-orange/10',
  punch: '3 000 € par salarié non formé. Multipliez par votre effectif concerné.',
  h1Before: 'Salariés non formés sur 6 ans : ',
  h1Highlight: '3 000 € de pénalité',
  h1After: ' par tête. Vous savez où vous en êtes ?',
  body: 'Pour une PME de 200 salariés dont 30 % ne sont pas en règle, l’exposition atteint 180 000 €. Major Business sécurise votre conformité L6315-1 : cartographie des entretiens professionnels, plan de rattrapage avec nos organismes partenaires certifiés Qualiopi, attestations exploitables en contrôle DREETS. Régularisation en 6 semaines.',
  visual: 'conformite',
  bg1: 'rgba(239,68,68,0.08)',
  bg2: 'rgba(47,43,80,0.06)'
},
{
  key: 'digital',
  eyebrow: 'Formation IA & transformation digitale',
  eyebrowDot: 'bg-major-orange',
  eyebrowText: 'text-major-orange-dark',
  eyebrowBg: 'bg-major-orange/10',
  punch: 'L’IA est déjà dans vos équipes. Pas dans vos process.',
  h1Before: 'Vos équipes utilisent déjà l’IA. ',
  h1Highlight: 'Sans en maîtriser',
  h1After: ' ni les risques, ni les leviers de productivité.',
  body: 'Major Business forme vos managers et opérationnels aux usages concrets de l’IA générative : automatisation des tâches récurrentes, rédaction professionnelle, analyse de données, cadre RGPD. Modules courts, finançables OPCO, animés par des praticiens.',
  visual: 'digital',
  bg1: 'rgba(56,189,248,0.10)',
  bg2: 'rgba(105,0,255,0.08)'
},
{
  key: 'softskills',
  eyebrow: 'Soft skills & communication',
  eyebrowDot: 'bg-major-green',
  eyebrowText: 'text-major-green-dark',
  eyebrowBg: 'bg-major-green-light',
  punch: 'Ce qui ne s’apprend pas dans un livre se travaille en atelier.',
  h1Before: 'Les soft skills ne s’apprennent pas dans un livre. ',
  h1Highlight: 'Elles se travaillent',
  h1After: ' dans des situations concrètes.',
  body: 'Prise de parole en public, gestion des conflits, assertivité, intelligence relationnelle. Major Business propose des ateliers immersifs en présentiel ou hybride, animés par des coachs professionnels. Chaque participant repart avec un plan de progression individuel.',
  visual: 'softskills',
  bg1: 'rgba(8,207,141,0.10)',
  bg2: 'rgba(105,0,255,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(47,43,80,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>
              Brochure entreprise (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">
              <img
                src="logos/qualiopi.png"
                alt="Qualiopi – processus certifié – République française"
                className="h-12 w-auto object-contain" />
              
              <div className="text-xs text-major-gray leading-relaxed max-w-[210px]">
                <strong className="text-major-night">Réseau Qualiopi · Référencé OPCO</strong><br />
                Accès direct aux dispositifs de financement public via nos partenaires certifiés.
              </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 = {
  plan: {
    header: { label: 'Plan de formation', title: 'Exercice 2026' },
    badge: { text: 'Conforme L6315-1', tone: 'green' },
    kpis: [
    { v: '214', l: 'collaborateurs' },
    { v: '38', l: 'parcours actifs' },
    { v: '92%', l: 'taux de complétion' }],

    chartTitle: 'Montée en compétences · T1–T4',
    chartTag: '+18 pts',
    legendA: 'Avant',
    legendB: 'Après Major',
    sessions: [
    { title: 'Posture managériale · cohorte 3', meta: '12 inscrits · présentiel', status: 'En cours', tone: 'orange' },
    { title: 'Entretiens professionnels 2026', meta: '47 inscrits · distanciel', status: 'Planifié', tone: 'gray' }],

    chipTop: { label: 'Financement OPCO', tag: 'Validé', value: '86 400 €', meta: 'pris en charge · exercice 2026', progress: 78 },
    chipBottom: { ring: '87%', title: 'Transfert poste', meta: 'mesuré à 3 mois · 2 035 réponses', ringPct: 87 }
  },
  burnout: {
    header: { label: 'Programme QVT', title: 'Prévention RPS' },
    badge: { text: 'En cours · 3 sites', tone: 'orange' },
    kpis: [
    { v: '−34%', l: 'arrêts pour épuisement' },
    { v: '48', l: 'managers formés' },
    { v: '6 mois', l: 'durée du programme' }],

    chartTitle: 'Indice bien-être au travail',
    chartTag: '+22 pts',
    legendA: 'Avant',
    legendB: 'Après Major',
    sessions: [
    { title: 'Détection des signaux faibles', meta: '24 managers · présentiel', status: 'En cours', tone: 'orange' },
    { title: 'Régulation charge mentale', meta: '12 inscrits · hybride', status: 'Planifié', tone: 'gray' }],

    chipTop: { label: 'Coût évité', tag: 'Estimé', value: '142 000 €', meta: 'sur 12 mois · 4,7 ETP préservés', progress: 65 },
    chipBottom: { ring: '94%', title: 'Adhésion équipes', meta: 'questionnaire post-session · 412 répondants', ringPct: 94 }
  },
  management: {
    header: { label: 'Programme Manager+', title: '3 cohortes 2026' },
    badge: { text: 'Niveau intermédiaire', tone: 'orange' },
    kpis: [
    { v: '78', l: 'managers formés' },
    { v: '12', l: 'modules co-construits' },
    { v: '4,8/5', l: 'satisfaction' }],

    chartTitle: 'Maîtrise des situations managériales',
    chartTag: '+41 pts',
    legendA: 'Pré-test',
    legendB: 'Post + 3 mois',
    sessions: [
    { title: 'Conduite du feedback difficile', meta: '14 managers · jeu de rôle', status: 'En cours', tone: 'orange' },
    { title: 'Pilotage de la performance', meta: '18 inscrits · présentiel', status: 'Planifié', tone: 'gray' }],

    chipTop: { label: 'Engagement équipes', tag: '+ 17 pts', value: '+ 17 pts', meta: 'enquête flash · janvier vs juin 2026', progress: 82 },
    chipBottom: { ring: '89%', title: 'Transfert en poste', meta: 'observé par les N+2 à 90 j', ringPct: 89 }
  },
  commercial: {
    header: { label: 'Académie commerciale', title: 'Cohorte Q2 2026' },
    badge: { text: 'ROI mesuré', tone: 'green' },
    kpis: [
    { v: '+31%', l: 'vente additionnelle' },
    { v: '× 8', l: 'ROI formation' },
    { v: '45', l: 'commerciaux formés' }],

    chartTitle: 'Taux de transformation par trimestre',
    chartTag: '+12 pts',
    legendA: 'Avant',
    legendB: 'Après Major',
    sessions: [
    { title: 'Négociation grands comptes', meta: '12 inscrits · présentiel', status: 'En cours', tone: 'orange' },
    { title: 'Traitement des objections prix', meta: '18 inscrits · distanciel', status: 'Planifié', tone: 'gray' }],

    chipTop: { label: 'Chiffre d’affaires généré', tag: '6 mois', value: '+ 1,2 M €', meta: 'attribué au programme · 45 commerciaux', progress: 88 },
    chipBottom: { ring: '76%', title: 'Closing 1ʳᵉ visite', meta: 'vs 58% avant programme · 312 RDV', ringPct: 76 }
  },
  conformite: {
    header: { label: 'Audit L6315-1', title: 'Exercice 2024–2030' },
    badge: { text: 'À régulariser', tone: 'red' },
    kpis: [
    { v: '63', l: 'salariés non conformes' },
    { v: '189 k €', l: 'exposition CPF' },
    { v: '6 sem.', l: 'plan de rattrapage' }],

    chartTitle: 'Salariés régularisés par mois',
    chartTag: 'Objectif 100%',
    legendA: 'Non conformes',
    legendB: 'Régularisés',
    sessions: [
    { title: 'Campagne entretiens prof. 2026', meta: '214 collaborateurs · 4 sites', status: 'En cours', tone: 'orange' },
    { title: 'Attestations Qualiopi T4', meta: 'génération automatique', status: 'Planifié', tone: 'gray' }],

    chipTop: { label: 'Sanction évitée', tag: 'Estimé', value: '189 000 €', meta: 'abondement correctif CPF', progress: 70 },
    chipBottom: { ring: '100%', title: 'Conformité cible', meta: 'visée à la fin du semestre', ringPct: 100 }
  },
  digital: {
    header: { label: 'Programme IA & data', title: 'Sprint 8 semaines' },
    badge: { text: 'Cohorte active', tone: 'orange' },
    kpis: [
    { v: '128', l: 'cas d’usage produits' },
    { v: '+42%', l: 'productivité moyenne' },
    { v: '9,1/10', l: 'satisfaction' }],

    chartTitle: 'Adoption des outils IA · semaines 1–8',
    chartTag: '+58 pts',
    legendA: 'Avant',
    legendB: 'Après Major',
    sessions: [
    { title: 'IA générative pour managers', meta: '24 inscrits · distanciel', status: 'En cours', tone: 'orange' },
    { title: 'RGPD & IA en entreprise', meta: '32 inscrits · présentiel', status: 'Planifié', tone: 'gray' }],

    chipTop: { label: 'Heures gagnées · équipe', tag: '/ mois', value: '+ 320 h', meta: 'automatisation des tâches récurrentes', progress: 75 },
    chipBottom: { ring: '92%', title: 'Conformité RGPD', meta: 'usages IA cartographiés · 12 départements', ringPct: 92 }
  },
  softskills: {
    header: { label: 'Programme soft skills', title: 'Ateliers immersifs' },
    badge: { text: 'En cours', tone: 'green' },
    kpis: [
    { v: '124', l: 'participants' },
    { v: '4,9/5', l: 'satisfaction' },
    { v: '91%', l: 'recommandation' }],

    chartTitle: 'Maîtrise des compétences clés',
    chartTag: '+29 pts',
    legendA: 'Pré-test',
    legendB: 'Post + 3 mois',
    sessions: [
    { title: 'Prise de parole en public', meta: '18 inscrits · présentiel', status: 'En cours', tone: 'orange' },
    { title: 'Gestion des conflits', meta: '14 inscrits · présentiel', status: 'Planifié', tone: 'gray' }],

    chipTop: { label: 'Plans de progression', tag: 'Suivis', value: '124 / 124', meta: 'objectifs individuels · revues à 3 mois', progress: 100 },
    chipBottom: { ring: '88%', title: 'Mise en pratique', meta: 'auto-évaluation à 90 j · 109 réponses', ringPct: 88 }
  }
};

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="#08CF8D" 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">Major Business</span>
          </h2>
          <p className="mt-3 text-major-gray">
            Plus de 350 PME et ETI nous confient le déploiement de leurs parcours de montée en compétences — de l’industrie au retail, en passant par la tech et les services.
          </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: 'Impact mesuré, pas deviné',
    body: 'KPI définis avant le lancement, mesure du transfert en situation de travail à 3 mois, reporting consolidé pour votre comité de direction.',
    cta: 'Voir un exemple de reporting',
    tone: 'purple'
  },
  {
    icon: 'dashboard',
    title: 'Pilotage direction consolidé',
    body: 'Un espace client unique pour suivre les inscriptions, l’avancement, les attestations et la traçabilité OPCO. Multi-sites, multi-entités.',
    cta: 'Découvrir l’espace client',
    tone: 'green'
  },
  {
    icon: 'wallet',
    title: 'Budget formation optimisé',
    body: 'Mobilisation OPCO, CPF, Pro-A, FNE et plan de développement des compétences. Montage et suivi des dossiers de prise en charge inclus.',
    cta: 'Estimer mes financements',
    tone: 'purple'
  },
  {
    icon: 'user-check',
    title: 'Interlocuteur dédié',
    body: 'Un conseiller entreprise unique, du diagnostic au déploiement. Réponse sous 48h, lancement opérationnel en 2 semaines.',
    cta: 'Rencontrer notre équipe',
    tone: 'green'
  },
  {
    icon: 'globe',
    title: 'Déploiement multi-format',
    body: 'Présentiel intra, distanciel synchrone, parcours hybrides et e-learning. Une même méthodologie pédagogique, quel que soit le format choisi.',
    cta: 'Voir nos 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 Major</span>
          <h2 className="mt-3 font-display font-bold text-3xl sm:text-4xl lg:text-[44px] leading-tight text-major-night">
            Un partenaire formation qui parle votre langue, pas celle du catalogue
          </h2>
          <AccentLine />
          <p className="mt-4 text-major-gray text-lg leading-relaxed">
            Major Business adresse les trois sujets qui occupent la direction &nbsp;: sécuriser la conformité, mesurer l’impact des parcours et optimiser le budget formation.
          </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 rapide',
    title: 'Catalogue «Prêt à déployer»',
    desc: 'Plus de 200 modules certifiants et finançables, structurés par métier et niveau. Inscriptions, convocations et attestations gérées par nos équipes.',
    hint: 'Pour des sessions inter ou intra-entreprise démarrant sous 15 jours.',
    cta: 'Découvrir le catalogue',
    featured: false
  },
  {
    tag: 'Le plus choisi',
    title: 'Parcours mixtes (Blended)',
    desc: 'Combinaison de classes virtuelles, modules e-learning, ateliers pratiques et accompagnement individuel. Suivi pédagogique consolidé.',
    hint: 'Adapté aux déploiements multi-sites et aux populations mobiles.',
    cta: 'Voir les programmes',
    featured: true
  },
  {
    tag: 'Le plus impactant',
    title: 'Programmes sur-mesure',
    desc: 'Co-conception avec vos directions métier à partir de vos objectifs stratégiques. Diagnostic, ingénierie pédagogique et évaluation d’impact.',
    hint: 'Recommandé pour transformé votre direction, reconversions et programmes managers.',
    cta: 'Construire mon programme',
    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 solutions</span>
          <h2 className="mt-3 font-display font-bold text-3xl sm:text-4xl lg:text-[44px] leading-tight text-major-night">
            Trois formats, un même standard d’exécution
          </h2>
          <AccentLine />
          <p className="mt-4 text-major-gray text-lg leading-relaxed">
            Du catalogue inter au programme stratégique sur-mesure, chaque format est piloté par un chef de projet dédié et bénéficie d’un reporting consolidé.
          </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') => { setMode(m); setSubmitted(false); setForm({ name: '', email: '', size: '', need: '' }); setVisible(true); document.body.style.overflow = 'hidden'; };
  const close = () => { setVisible(false); document.body.style.overflow = ''; };
  const onSubmit = (e) => {
    e.preventDefault();
    const data = new FormData();
    data.append('name', form.name);
    data.append('email', form.email);
    data.append('Nombre de salariés', form.size);
    data.append('Besoin', form.need || '(non renseigné)');
    data.append('Type', mode === 'brochure' ? 'Brochure entreprise' : 'Démonstration');
    data.append('_subject', mode === 'brochure' ? 'Nouvelle demande de brochure - Major Business' : 'Nouvelle demande de démo - Major Business');
    data.append('_cc', 'djibril@groupe-altis.com');
    data.append('_captcha', 'false');
    data.append('_template', 'table');
    fetch('https://formsubmit.co/ajax/pferreira@studimet.fr', {
      method: 'POST',
      body: data
    }).then(() => 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 entreprise', sub: 'Renseignez vos coordonnées et recevez notre brochure complète par email sous quelques minutes.' }
  };
  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@entreprise.com"
                      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">Nombre de salariés</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="10-49">10–49 salariés</option>
                      <option value="50-249">50–249 salariés</option>
                      <option value="250-999">250–999 salariés</option>
                      <option value="1000+">1 000+ salariés</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 15 managers au feedback en distanciel"
                        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 Major Business. 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: 'Diagnostic',
    body: 'Audit gratuit avec votre direction et les responsables métier concernés. Cartographie des compétences cibles, des obligations réglementaires et des dispositifs de financement mobilisables.',
    goal: 'Livrable : note de cadrage + plan de mobilisation des financements.'
  },
  {
    icon: 'edit',
    title: 'Conception',
    body: 'Programme co-construit avec un ingénieur pédagogique et un expert métier en activité. Scénarios basés sur vos cas réels, planning calé sur vos contraintes, objectifs opérationnels mesurables.',
    goal: 'Livrable : programme détaillé, planning, conventions de formation conformes Qualiopi.'
  },
  {
    icon: 'users',
    title: 'Formation active',
    body: 'Mises en situation sur vos cas réels, pédagogie par la pratique avec nos formateurs praticiens. Présentiel, distanciel ou hybride — vous choisissez. Coordination logistique multi-sites incluse.',
    goal: 'Livrable : sessions réalisées, émargements, attestations.'
  },
  {
    icon: 'bar-chart',
    title: 'Suivi & impact',
    body: 'Évaluation à froid à 3 mois, mesure du transfert en situation de travail, reporting consolidé pour vos revues de plan de formation et extractions OPCO automatisées.',
    goal: 'Livrable : rapport d’impact présentable en comité de direction.'
  }];


  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 Major</span>
            <h2 className="mt-3 font-display font-bold text-3xl sm:text-4xl lg:text-[44px] leading-tight text-major-night">
              Une méthodologie en 4 étapes, <span className="text-major-orange">de l’audit à la mesure d’impact</span>
            </h2>
            <AccentLine />
            <p className="mt-4 text-major-gray text-lg leading-relaxed">
              Du cadrage stratégique au bilan en comité de direction, chaque étape est cadrée par un chef de projet dédié et documentée dans votre espace client.
            </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: 'Montage des dossiers OPCO & CPF',
    body: 'Le financement peut être assuré par votre OPCO (notamment pour les entreprises de moins de 50 salariés) ou réalisé en direct. C’est le dispositif le plus utilisé pour structurer un plan de formation interne. On y ajoute le CPF et le plan de développement des compétences.',
    cta: 'En savoir plus'
  },
  {
    title: 'Dispositifs PSE & reconversions internes',
    body: 'Valorisez les droits individuels de vos collaborateurs en mobilisant les dispositifs de PSE et de reconversion interne pour financer des formations sur-mesure et renforcer la gestion des compétences au sein de votre entreprise.',
    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">
            Trouvez le financement adapté à votre entreprise
          </h2>
          <AccentLine />
          <p className="mt-4 text-major-gray text-lg leading-relaxed">
            On vous accompagne sur l’optimisation budgétaire, le montage des dossiers OPCO, CPF, PSE et la gestion administrative complète.
          </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>

        {/* Qualiopi banner */}
        <div className="mt-10 bg-white border border-major-night/10 rounded-2xl px-6 sm:px-8 py-6 flex flex-col sm:flex-row items-start sm:items-center gap-6">
          <img
            src="logos/qualiopi.png"
            alt="Qualiopi – processus certifié – République française"
            className="h-16 w-auto object-contain flex-shrink-0" />
          
          <div className="flex-1">
            <div className="font-display font-bold text-major-night">Réseau d’organismes certifiés Qualiopi</div>
            <p className="text-sm text-major-gray mt-1 leading-relaxed">Major Business travaille exclusivement avec des organismes de formation référencés et certifiés Qualiopi, condition obligatoire pour accéder aux financements OPCO et aux dispositifs publics.</p>
          </div>
          <a
            href="#"
            className="text-sm font-semibold text-major-orange whitespace-nowrap hover:underline underline-offset-4">
            
            En savoir plus →
          </a>
        </div>
      </div>
    </section>);

}

/* ---------------- FORMATIONS PHARES (7 cards) ---------------- */
function Formations() {
  const { open: openModal } = useModal();
  const formations = [
  {
    icon: 'users',
    badge: 'Management',
    title: 'Manager+',
    sub: 'Posture managériale & leadership',
    desc: 'Feedback, conduite du changement, gestion de la performance. Mises en situation sur vos cas réels.',
    duration: '5 jours',
    format: 'Présentiel ou hybride',
    tone: 'orange'
  },
  {
    icon: 'user-check',
    badge: 'Prévention RPS',
    title: 'Burnout & charge mentale',
    sub: 'Préserver l’énergie des équipes',
    desc: 'Détection des signaux faibles, conduite des entretiens difficiles, régulation de la charge mentale.',
    duration: '3 jours',
    format: 'Présentiel',
    tone: 'green'
  },
  {
    icon: 'trend',
    badge: 'Commercial',
    title: 'Commercial Pro',
    sub: 'Négociation & vente additionnelle',
    desc: 'Traitement des objections, closing, fidélisation grands comptes. ROI mesuré à 6 mois.',
    duration: '4 jours',
    format: 'Présentiel ou distanciel',
    tone: 'orange'
  },
  {
    icon: 'check',
    badge: 'Conformité',
    title: 'L6315-1 Express',
    sub: 'Régularisation entretiens pro',
    desc: 'Cartographie, plan de rattrapage, attestations Qualiopi via nos organismes partenaires. Déployable en 6 semaines.',
    duration: '14 h e-learning',
    format: 'Distanciel · auto-rythmé',
    tone: 'green'
  },
  {
    icon: 'dashboard',
    badge: 'Digital',
    title: 'IA & productivité',
    sub: 'IA générative pour managers',
    desc: 'Automatisation des tâches, rédaction professionnelle, analyse de données, cadre RGPD.',
    duration: '2 jours',
    format: 'Hybride · présentiel + accompagnement',
    tone: 'orange'
  },
  {
    icon: 'edit',
    badge: 'Soft skills',
    title: 'Prise de parole & impact',
    sub: 'Communication & gestion des conflits',
    desc: 'Ateliers immersifs avec coachs professionnels. Plan de progression individuel à 3 mois.',
    duration: '3 jours',
    format: 'Présentiel',
    tone: 'green'
  },
  {
    icon: 'bar-chart',
    badge: 'Pilotage de direction',
    title: 'Plan de formation 2026',
    sub: 'Performance & impact mesurable',
    desc: 'Construire un plan annuel mobilisant OPCO, CPF et plan de développement des compétences.',
    duration: '1 jour + ateliers',
    format: 'Présentiel · intra-entreprise',
    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">Formations phares</span>
            <h2 className="mt-3 font-display font-bold text-3xl sm:text-4xl lg:text-[44px] leading-tight text-major-night">
              7 programmes qui répondent aux <span className="text-major-orange">urgences directionnelles 2026</span>
            </h2>
            <AccentLine />
          </div>
          <p className="text-major-gray text-lg leading-relaxed max-w-md">
            Conçus avec des praticiens en activité, finançables OPCO &amp; CPF, déployables sous 3 semaines.
          </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 flex-1">{f.desc}</p>

                <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]">Format</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">
          Vous ne trouvez pas votre sujet&nbsp;? On co-construit votre programme.{' '}
          <a
            href="#"
            onClick={(e) => {e.preventDefault();openModal('demo');}}
            className="text-major-orange font-semibold underline-offset-4 hover:underline">
            Demander un programme sur-mesure →
          </a>
        </div>
      </div>
    </section>);
}

/* ---------------- CASE STUDIES (transparence) ---------------- */
function CaseStudies() {
  const cases = [
  {
    tag: 'Management',
    title: 'Transformer la posture managériale d’une PME industrielle',
    context: 'PME industrielle, 180 salariés. Managers promus en interne sans formation au management, turnover en hausse de 23 % et signaux faibles sur l’engagement des équipes en atelier.',
    metrics: [
    { v: '23', l: 'managers formés' },
    { v: '4.8/5', l: 'satisfaction' },
    { v: '89%', l: 'transfert poste' }],

    quote: '« Avec Major, les outils sont restés parce qu’ils étaient construits sur NOS situations. Pas un PowerPoint générique. »',
    attribution: 'Sophie M., Dirigeante — Industrie, 180 salariés'
  },
  {
    tag: 'Conformité réglementaire',
    title: 'Régulariser 214 collaborateurs en 6 semaines',
    context: 'ETI tech, 650 salariés. Alerte du CSE sur le non-respect des entretiens professionnels sur les six dernières années, exposition financière estimée à plus de 600 000 € et besoin de régulariser en urgence.',
    metrics: [
    { v: '12', l: 'sessions / 6 sem.' },
    { v: '214', l: 'mises en conformité' },
    { v: '0 €', l: 'abondement CPF' }],

    quote: '« Major a compris l’urgence. En 6 semaines, on était en règle. Notre ancien prestataire proposait un démarrage à 3 mois. »',
    attribution: 'Thomas R., DG — Tech, 650 salariés'
  },
  {
    tag: 'Performance commerciale',
    title: 'Multiplier par 8 le ROI formation d’un réseau retail',
    context: 'Groupe retail, 1 200 salariés. Équipes commerciales en difficulté sur la vente additionnelle après le rachat de deux enseignes, précédente formation générique sans effet mesurable sur le chiffre d’affaires.',
    metrics: [
    { v: '45', l: 'commerciaux formés' },
    { v: '+31%', l: 'vente additionnelle' },
    { v: '× 8', l: 'ROI formation' }],

    quote: '« Le ROI × 8 a convaincu ma direction de pérenniser le partenariat. La formation est passée de ligne de coût à investissement. »',
    attribution: 'Nadia K., Resp. Formation — Retail, 1 200 salariés'
  }];


  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">Transparence radicale</span>
          <h2 className="mt-3 font-display font-bold text-3xl sm:text-4xl lg:text-[44px] leading-tight text-major-night">
            Nos résultats, en toute transparence
          </h2>
          <AccentLine />
          <p className="mt-5 text-major-gray text-lg leading-relaxed">
            Pas de témoignages vagues. Des chiffres. Des contextes. Des résultats mesurés en situation de travail.
          </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 = [
  { emoji: '👔', title: 'Management & Leadership', items: ['Posture managériale', 'Conduite du changement', 'Management à distance'] },
  { emoji: '💬', title: 'Communication Digitale', items: ['Stratégie digitale', 'Image de marque', 'Outils numériques', 'Visibilité en ligne'] },
  { emoji: '🤝', title: 'Commercial & Relation client', items: ['Négociation', 'Prospection', 'Upselling', 'Fidélisation'] },
  { emoji: '🏠', title: 'Immobilier', items: ['Transactions', 'Rénovation énergétique', 'Copropriété', 'Valorisation de biens'] },
  { emoji: '⚙️', title: 'Efficacité professionnelle', items: ['Gestion du temps', 'Organisation', 'Réunions productives'] },
  { emoji: '📑', title: 'Droit social & Obligations employeur', items: ['Entretiens professionnels', 'Obligations légales', 'QVT'] }];


  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">Domaines de formation</span>
          <h2 className="mt-3 font-display font-bold text-3xl sm:text-4xl lg:text-[44px] leading-tight text-major-night">
            Des formations concrètes pour chaque enjeu
          </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="text-2xl">{d.emoji}</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 formation est conçue et animée par des experts reconnus dans leur secteur — ils vivent au quotidien les sujets qu’ils enseignent.
            </p>
          </div>
          <div className="flex flex-col sm:flex-row gap-4 lg:w-[420px]">
            {[
            { initials: 'HR', name: 'Horace Ricciardolo', role: 'Coiffure & management', desc: '40+ ans d’expertise. Ancien bras droit de Jean Louis David.' },
            { initials: 'RB', name: 'Romain Billard', role: 'Immobilier de prestige', desc: '10+ ans en transactions haut de gamme. Directeur de franchise.' }].
            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">
          Votre besoin est spécifique&nbsp;? Tant mieux, c’est notre spécialité.{' '}
          <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 — PME industrielle, 180 collaborateurs
          </h2>
          <p className="mt-4 text-major-gray text-lg leading-relaxed">
            Comment la direction a relancé la posture managériale d’une PME industrielle en six mois — avec un programme co-construit, un budget OPCO sécurisé et un transfert poste mesuré à 89%.
          </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 avait essayé un catalogue l’an dernier. Les managers ont tout oublié en 2 semaines. Avec Major, les outils sont restés parce qu’ils étaient construits sur <span className="text-major-orange italic">nos</span> situations. »
            </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">Sophie M.</div>
                <div className="text-sm text-major-gray">Direction — Industrie, 180 salariés</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">23</div>
                <div className="text-xs text-major-gray mt-1">managers formés</div>
              </div>
              <div>
                <div className="font-display font-bold text-major-orange text-2xl">4.8/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">89%</div>
                <div className="text-xs text-major-gray mt-1">transfert à 3 mois</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: 'Vos formations sont-elles éligibles aux financements OPCO et CPF ?',
    a: 'Oui. Major Business travaille exclusivement avec des organismes de formation certifiés Qualiopi — condition obligatoire pour accéder aux financements OPCO et publics. Nous prenons en charge le montage des dossiers de prise en charge et vous accompagnons dans leurs dépots.'
  },
  {
    q: 'Vos formations sont-elles finançables par notre OPCO ?',
    a: '100 % de notre catalogue est éligible aux dispositifs de financement OPCO, CPF, Pro-A, PSE et FNE-Formation. On identifie le bon dispositif et on prend en charge les démarches administratives.'
  },
  {
    q: 'Vos formations correspondent-elles à nos métiers ?',
    a: 'Notre catalogue couvre management, commercial, digital, soft skills, droit social et efficacité professionnelle. Et si vos besoins sont spécifiques, on co-construit votre programme sur-mesure, du diagnostic à la livraison.'
  },
  {
    q: 'Nos collaborateurs sont sur plusieurs sites, est-ce compatible ?',
    a: 'Oui. Nos formations sont disponibles en présentiel, distanciel synchrone et hybride. Chaque collaborateur peut avancer à son rythme, sans interrompre l’activité de l’entreprise.'
  },
  {
    q: 'Qu’est-ce qui vous différencie des autres organismes de formation ?',
    a: 'Trois points : un accompagnement humain avec un conseiller dédié, une gestion complète du volet administratif et financier, un suivi transparent avec reporting régulier. +350 entreprises nous font confiance, avec une note de 4,82/5.'
  },
  {
    q: 'On est une TPE/PME, vos solutions sont-elles adaptées ?',
    a: 'C’est même là que nos solutions sont les plus avantageuses. Les TPE/PME de moins de 50 salariés peuvent bénéficier d’une prise en charge allant jusqu’à 100 % via leur OPCO dans le cadre du plan de développement des compétences.'
  },
  {
    q: 'Que risque-t-on si on ne forme pas nos salariés sur 6 ans ?',
    a: 'Pour les entreprises de 50+ salariés : un abondement correctif du CPF de 3 000 € par salarié concerné. Au-delà du financier, c’est un risque majeur : perte de compétences et de compétitivité. Un diagnostic gratuit Major Business permet d’évaluer précisément votre exposition.'
  }];


  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">
            Pourquoi les entreprises nous confient leur plan de formation
          </h2>
          <AccentLine />
          <p className="mt-4 text-major-gray text-lg">
            Sélection des points les plus fréquemment soulevés par les directions lors de nos premiers échanges.
          </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();
    const data = new FormData();
    data.append('name', form.name);
    data.append('email', form.email);
    data.append('Nombre de salariés', form.size);
    data.append('Besoin', form.need || '(non renseigné)');
    data.append('Type', 'Demande de devis (formulaire contact)');
    data.append('_subject', 'Nouvelle demande de devis - Major Business');
    data.append('_cc', 'djibril@groupe-altis.com');
    data.append('_captcha', 'false');
    data.append('_template', 'table');
    fetch('https://formsubmit.co/ajax/pferreira@studimet.fr', {
      method: 'POST',
      body: data
    }).then(() => 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">
            Diagnostic personnalisé · retour sous 48h
          </h2>
          <p className="mt-4 text-white/70 text-lg leading-relaxed">
            Un consultant Major Business analyse votre plan de formation, vos obligations réglementaires et les dispositifs de financement 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@entreprise.com"
              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">Nombre de salariés</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 fourchette</option>
                  <option value="10-49">10–49 salariés</option>
                  <option value="50-249">50–249 salariés</option>
                  <option value="250-999">250–999 salariés</option>
                  <option value="1000+">1&nbsp;000+ salariés</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 15 managers au feedback en distanciel"
              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 Major Business. 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() {
  const { open: openModal } = useModal();
  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-xs">
            38 rue Anatole France<br />
            92300 Levallois
          </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 className="mt-6 flex items-center gap-3">
            {['Facebook', 'Instagram', 'LinkedIn', 'Youtube'].map((s, i) =>
            <a key={s} href="#" aria-label={s} className="w-9 h-9 rounded-lg bg-white/[0.06] hover:bg-major-orange transition-colors flex items-center justify-center text-white/70 hover:text-white">
                {/* simple letter monogram */}
                <span className="text-xs font-bold">{s[0]}</span>
              </a>
            )}
          </div>

          <div className="mt-6 inline-flex items-center gap-2 bg-white/[0.06] border border-white/10 rounded-full px-3 py-1.5 text-xs">
            <span className="inline-flex items-center justify-center w-4 h-4 rounded-full bg-major-green/20 text-major-green">
              <Icon name="check" className="w-3 h-3" />
            </span>
            Certifié AAA
          </div>
        </div>

        <div className="md:col-span-3">
          <h4 className="font-display font-semibold text-sm uppercase tracking-wider text-white">Notre offre</h4>
          <ul className="mt-4 space-y-2.5 text-sm">
            {[
            { id: 'pourquoi', label: 'Pourquoi Major' },
            { id: 'formations', label: 'Formations' },
            { id: 'methode', label: 'Notre méthode' },
            { id: 'financement', label: 'Financement' },
            { id: 'contact', label: 'Demander un devis' }].
            map((l) =>
            <li key={l.id}>
                <a href={l.id === 'contact' ? '#' : `#${l.id}`} onClick={(e) => {e.preventDefault(); l.id === 'contact' ? openModal('demo') : smoothScrollTo(l.id);}} className="text-white/60 hover:text-white transition-colors">{l.label}</a>
              </li>
            )}
          </ul>
        </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 text-white/60">
            <li>Management &amp; Leadership</li>
            <li>Communication Digitale</li>
            <li>Commercial &amp; Relation client</li>
            <li>Immobilier</li>
            <li>Efficacité professionnelle</li>
            <li>Droit social &amp; Obligations employeur</li>
          </ul>
        </div>

        <div className="md:col-span-2">
          <h4 className="font-display font-semibold text-sm uppercase tracking-wider text-white">Major</h4>
          <ul className="mt-4 space-y-2.5 text-sm text-white/60">
            <li><a href="#" className="hover:text-white">Notre mission</a></li>
            <li><a href="#" className="hover:text-white">Notre équipe</a></li>
            <li><a href="#" className="hover:text-white">Témoignages</a></li>
            <li><a href="mailto:contact@major-business.fr" 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-3 sm:justify-between">
          <span>2026 © Major Business — Réseau d’organismes de formation partenaires certifiés Qualiopi.</span>
          <span className="flex flex-wrap gap-x-4 gap-y-1">
            <a className="hover:text-white/80" href="#">CGV</a>
            <a className="hover:text-white/80" href="#">Cookies</a>
            <a className="hover:text-white/80" href="#">Mentions légales</a>
            <a className="hover:text-white/80" href="#">RGPD</a>
          </span>
        </div>
      </div>
    </footer>);

}

/* ---------------- ROOT ---------------- */
function App() {
  return (
    <ModalProvider>
      <div className="min-h-screen bg-white">
        <Navbar />
      <main>
        <Hero />
        <ClientCloud />
        <WhyMajor />
        <Method />
        <Formations />
        <CaseStudies />
        <Solutions />
        <Domains />
        <Financement />
        <FAQ />
        <ContactForm />
      </main>
        <Footer />
      </div>
    </ModalProvider>);

}

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