const ink = TOKENS.ink;
const paper = '#FFFFFF';
const dim = TOKENS.textDim;
const line = TOKENS.lineSoft;

const SITE_PAGES = {
  home: { label: 'Accueil', href: 'index.html', title: "AI × Leaders · Réinvente ton leadership à l'ère de l'IA" },
  programmes: { label: 'Programmes', href: 'programmes.html', title: 'AI × Leaders · Programmes' },
  aiLeadership: { label: 'The AI Leadership Program', href: 'programme-ai-leadership.html', title: 'AI × Leaders · The AI Leadership Program' },
  aiGovernance: { label: 'The AI Governance Program', href: 'programme-ai-governance.html', title: 'AI × Leaders · The AI Governance Program' },
  sprints: { label: 'Sprint AI Thématiques', href: 'programme-sprints.html', title: 'AI × Leaders · Sprint AI Thématiques' },
  theCamp: { label: 'The Camp', href: 'programme-the-camp.html', title: 'AI × Leaders · The Camp' },
  studio: { label: 'Studio IA', href: 'studio-ia.html', title: 'AI × Leaders · Studio IA' },
  event: { label: 'Event IA', href: 'event-ia.html', title: 'AI × Leaders · Event IA' },
  ressources: { label: 'Ressources', href: 'ressources.html', title: 'AI × Leaders · Ressources' },
  lab: { label: 'Lab', href: 'lab.html', title: 'AI × Leaders · Lab' },
  about: { label: 'À propos', href: 'a-propos.html', title: 'AI × Leaders · À propos' },
  contact: { label: 'Contact', href: 'contact.html', title: 'AI × Leaders · Contact' },
  cgv: { label: 'CGV', href: 'cgv.html', title: 'AI × Leaders · CGV' },
  mentions: { label: 'Mentions légales', href: 'mentions-legales.html', title: 'AI × Leaders · Mentions légales' },
  privacy: { label: 'Confidentialité', href: 'politique-de-confidentialite.html', title: 'AI × Leaders · Politique de confidentialité' },
  masterclassTrouverUnJob: { label: 'Masterclass · Trouver un job sans postuler', href: 'masterclass-trouver-un-job-sans-postuler.html', title: 'AI × Leaders · Masterclass : Trouver un job sans postuler à une seule annonce' },
};

const NAV_ORDER = ['programmes', 'studio', 'event', 'ressources', 'lab', 'about'];

const NAV_SUBMENUS = {
  programmes: [
    { label: 'The AI Leadership Program', desc: 'Bootcamp 12 semaines', href: 'programme-ai-leadership.html' },
    { label: 'The AI Governance Program', desc: 'Programme exécutif C-suite & board', href: 'programme-ai-governance.html' },
    { label: 'Sprint AI Thématiques', desc: '4 semaines, 1 sujet précis', href: 'programme-sprints.html' },
    { label: 'The Camp', desc: 'Communauté alumni mensuelle', href: 'programme-the-camp.html' },
  ],
  studio: [
    { label: 'Coaching IA dirigeants', desc: 'C-suite, 3 à 6 mois', href: 'studio-ia.html#coaching' },
    { label: 'Audit IA & roadmap', desc: 'Diagnostic 4 à 8 semaines', href: 'studio-ia.html#audit' },
    { label: 'Création d’agents IA', desc: 'Du POC au déploiement', href: 'studio-ia.html#agents' },
    { label: 'Création de films IA', desc: 'Storytelling produit & cas', href: 'studio-ia.html#films' },
    { label: 'Double IA', desc: 'Ton sparring-partner IA 24/7', href: 'studio-ia.html#double-ia' },
    { label: 'Événements IA', desc: 'Human with AI, IA Récré, sur mesure', href: 'event-ia.html' },
  ],
};
const TRUST_LOGOS = ['HEC PARIS', 'McDONALD\'S', 'CANDEREL', 'LVMH', 'NATRAN', 'NESTLÉ WATERS', 'DANONE', 'AXA', 'SEB', 'BNP PARIBAS', 'SANOFI', 'AIRBUS'];

function pageHref(key) {
  return (SITE_PAGES[key] || SITE_PAGES.home).href;
}

function Btn({ children, href = '#', variant = 'primary', size = 'md', icon, external }) {
  const sizes = {
    sm: { p: '10px 16px', f: 12 },
    md: { p: '14px 22px', f: 13 },
    lg: { p: '18px 30px', f: 15 },
  };
  const v = {
    primary: { bg: ink, c: paper, b: `1px solid ${ink}` },
    pink: { bg: TOKENS.hotpink, c: ink, b: `1px solid ${ink}` },
    ghost: { bg: 'transparent', c: ink, b: `1px solid ${ink}` },
  }[variant];
  const sz = sizes[size];
  const isExternal = external || (typeof href === 'string' && /^https?:\/\//.test(href));

  return (
    <a
      href={href}
      target={isExternal ? '_blank' : undefined}
      rel={isExternal ? 'noopener noreferrer' : undefined}
      style={{
        padding: sz.p,
        fontSize: sz.f,
        background: v.bg,
        color: v.c,
        border: v.b,
        borderRadius: 0,
        fontFamily: '"Inter Tight", sans-serif',
        fontWeight: 600,
        display: 'inline-flex',
        alignItems: 'center',
        gap: 10,
        cursor: 'pointer',
        letterSpacing: '0.02em',
        textDecoration: 'none',
      }}
    >
      {children}
      {icon ? <span style={{ width: 8, height: 8, background: v.c, display: 'inline-block' }} /> : null}
    </a>
  );
}

function Eyebrow({ children, color = TOKENS.hotpink }) {
  return (
    <div
      style={{
        display: 'inline-flex',
        alignItems: 'center',
        gap: 10,
        fontFamily: 'Inter, sans-serif',
        fontSize: 11,
        fontWeight: 600,
        letterSpacing: '0.18em',
        textTransform: 'uppercase',
        color: ink,
      }}
    >
      <span style={{ width: 8, height: 8, background: color, display: 'inline-block' }} />
      {children}
    </div>
  );
}

function SectionTitle({ eyebrow, title, copy, accent = TOKENS.hotpink, center = false }) {
  return (
    <div style={{ maxWidth: center ? 860 : 640, textAlign: center ? 'center' : 'left', margin: center ? '0 auto' : '0' }}>
      <Eyebrow color={accent}>{eyebrow}</Eyebrow>
      <h2
        style={{
          fontFamily: '"Inter Tight", sans-serif',
          fontWeight: 800,
          fontSize: 'clamp(40px, 7vw, 72px)',
          letterSpacing: '-0.045em',
          lineHeight: 0.95,
          margin: '18px 0 14px',
          color: ink,
        }}
      >
        {title}
      </h2>
      {copy ? (
        <p style={{ margin: 0, fontFamily: 'Inter, sans-serif', fontSize: 16, lineHeight: 1.6, color: dim }}>
          {copy}
        </p>
      ) : null}
    </div>
  );
}

function NavItem({ navKey, currentKey }) {
  const [open, setOpen] = React.useState(false);
  const submenu = NAV_SUBMENUS[navKey];
  const isActive = currentKey === navKey;
  const hasMenu = Array.isArray(submenu) && submenu.length > 0;

  return (
    <div
      onMouseEnter={() => hasMenu && setOpen(true)}
      onMouseLeave={() => hasMenu && setOpen(false)}
      style={{ position: 'relative', display: 'inline-flex' }}
    >
      <a
        href={pageHref(navKey)}
        style={{
          display: 'inline-flex',
          alignItems: 'center',
          gap: 6,
          fontFamily: 'Inter, sans-serif',
          fontSize: 13,
          fontWeight: isActive ? 700 : 500,
          color: isActive ? ink : dim,
          textDecoration: 'none',
          borderBottom: isActive ? `1px solid ${ink}` : '1px solid transparent',
          paddingBottom: 2,
          cursor: 'pointer',
        }}
      >
        {SITE_PAGES[navKey].label}
        {hasMenu ? (
          <span
            style={{
              display: 'inline-block',
              width: 0,
              height: 0,
              marginLeft: 2,
              borderLeft: '4px solid transparent',
              borderRight: '4px solid transparent',
              borderTop: `4px solid ${isActive ? ink : dim}`,
              transform: open ? 'rotate(180deg)' : 'rotate(0deg)',
              transition: 'transform 160ms ease',
            }}
          />
        ) : null}
      </a>

      {hasMenu && open ? (
        <div
          style={{
            position: 'absolute',
            top: '100%',
            left: -14,
            paddingTop: 14,
            zIndex: 60,
            minWidth: 320,
          }}
        >
          <div
            style={{
              background: paper,
              border: `1px solid ${ink}`,
              padding: 10,
              boxShadow: '0 18px 36px rgba(10, 10, 10, 0.08)',
              display: 'flex',
              flexDirection: 'column',
              gap: 2,
            }}
          >
            {submenu.map((item) => (
              <a
                key={item.href}
                href={item.href}
                style={{
                  display: 'flex',
                  flexDirection: 'column',
                  gap: 2,
                  padding: '12px 14px',
                  textDecoration: 'none',
                  color: ink,
                  borderLeft: `2px solid transparent`,
                  transition: 'background 120ms ease, border-color 120ms ease',
                }}
                onMouseEnter={(e) => {
                  e.currentTarget.style.background = '#F6F6F6';
                  e.currentTarget.style.borderLeftColor = TOKENS.hotpink;
                }}
                onMouseLeave={(e) => {
                  e.currentTarget.style.background = 'transparent';
                  e.currentTarget.style.borderLeftColor = 'transparent';
                }}
              >
                <span style={{ fontFamily: '"Inter Tight", sans-serif', fontSize: 14, fontWeight: 700, letterSpacing: '-0.01em' }}>{item.label}</span>
                <span style={{ fontFamily: 'Inter, sans-serif', fontSize: 12, color: dim, lineHeight: 1.4 }}>{item.desc}</span>
              </a>
            ))}
          </div>
        </div>
      ) : null}
    </div>
  );
}

function SiteNav({ currentKey }) {
  return (
    <nav
      style={{
        position: 'sticky',
        top: 0,
        zIndex: 50,
        background: 'rgba(255,255,255,0.92)',
        backdropFilter: 'blur(8px)',
        borderBottom: `1px solid ${line}`,
        padding: '18px 28px',
      }}
    >
      <div
        style={{
          maxWidth: 1280,
          margin: '0 auto',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'space-between',
          gap: 24,
          flexWrap: 'wrap',
        }}
      >
        <a href={pageHref('home')} style={{ display: 'flex', alignItems: 'center', gap: 12, textDecoration: 'none', color: ink }}>
          <img src="/images/aix-logo.svg" alt="AI x Leaders" style={{ width: 32, height: 32, display: 'block' }} />
          <span style={{ fontFamily: '"Inter Tight", sans-serif', fontWeight: 700, fontSize: 16, letterSpacing: '-0.01em' }}>ai-x-leaders</span>
        </a>

        <div style={{ display: 'flex', gap: 22, alignItems: 'center', flexWrap: 'wrap' }}>
          {NAV_ORDER.map((key) => (
            <NavItem key={key} navKey={key} currentKey={currentKey} />
          ))}
        </div>

        <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
          <a href="/connexion" style={{ display: 'inline-flex', alignItems: 'center', gap: 8, fontFamily: 'JetBrains Mono, monospace', fontSize: 11, fontWeight: 600, letterSpacing: '0.14em', textTransform: 'uppercase', color: ink, textDecoration: 'none', padding: '8px 14px', border: `1px solid ${ink}`, transition: 'background 0.2s, color 0.2s' }} onMouseEnter={(e) => { e.currentTarget.style.background = ink; e.currentTarget.style.color = paper; }} onMouseLeave={(e) => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.color = ink; }}>
            <span style={{ width: 6, height: 6, background: TOKENS.hotpink, display: 'inline-block' }} />
            Espace participant
          </a>
          <Btn href={pageHref('contact')} variant="primary" size="sm">Prendre contact</Btn>
        </div>
      </div>
    </nav>
  );
}

function SiteFooter() {
  const groups = [
    ['Programmes', ['programmes', 'studio']],
    ['Explorer', ['event', 'ressources', 'lab']],
    ['Maison', ['about', 'contact']],
    ['Légal', ['cgv', 'mentions', 'privacy']],
  ];
  const externes = [
    { label: 'Avis Google ★ 4,9/5', href: 'https://www.google.fr/maps/place/The+Ai+Leadership+Program/@19.4243359,6.0255737,3z/data=!4m8!3m7!1s0x27e5b85e5d4e62e5:0xd03b438d8bbdf6e7!8m2!3d26.7903786!4d51.7279006!9m1!1b1!16s%2Fg%2F11ywjvw12j' },
    { label: 'LinkedIn AI × Leaders', href: 'https://www.linkedin.com/company/ai-x-leaders' },
    { label: 'Newsletter AI × Leaders', href: 'https://aixleaders.substack.com/' },
    { label: 'Newsletter Nash’s Ugly Truth', href: 'https://nashsuglytruth.substack.com/' },
  ];

  return (
    <footer style={{ background: TOKENS.black, color: paper, padding: '64px 28px 32px', position: 'relative', overflow: 'hidden' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto', display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(180px, 1fr))', gap: 36 }}>
        <div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
            <img src="/images/aix-logo.svg" alt="AI x Leaders" style={{ width: 36, height: 36, display: 'block' }} />
            <span style={{ fontFamily: '"Inter Tight", sans-serif', fontWeight: 700, fontSize: 18 }}>ai-x-leaders</span>
          </div>
          <div style={{ fontFamily: '"Inter Tight", sans-serif', fontWeight: 600, fontSize: 22, color: paper, marginTop: 20, maxWidth: 380, lineHeight: 1.28, letterSpacing: '-0.01em' }}>
            L’IA ne change pas juste les outils.<br />
            <span style={{ color: TOKENS.hotpink }}>Elle redéfinit le niveau d’exigence.</span>
          </div>
          <div style={{ marginTop: 22 }}>
            <Btn href={pageHref('programmes')} variant="pink" size="sm" icon>Voir les programmes</Btn>
          </div>
        </div>

        {groups.map(([title, keys]) => (
          <div key={title} style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 11, fontWeight: 600, letterSpacing: '0.18em', textTransform: 'uppercase', color: TOKENS.hotpink }}>· {title}</div>
            {keys.map((key) => (
              <a key={key} href={pageHref(key)} style={{ fontFamily: 'Inter, sans-serif', fontSize: 14, color: '#cfcfcf', textDecoration: 'none' }}>
                {SITE_PAGES[key].label}
              </a>
            ))}
          </div>
        ))}

        <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
          <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 11, fontWeight: 600, letterSpacing: '0.18em', textTransform: 'uppercase', color: TOKENS.hotpink }}>· Suivre</div>
          {externes.map((link) => (
            <a key={link.href} href={link.href} target="_blank" rel="noopener noreferrer" style={{ fontFamily: 'Inter, sans-serif', fontSize: 14, color: '#cfcfcf', textDecoration: 'none' }}>
              {link.label} <span style={{ color: TOKENS.hotpink, fontSize: 11 }}>↗</span>
            </a>
          ))}
        </div>
      </div>
      <div style={{ maxWidth: 1280, margin: '64px auto 0', borderTop: '1px solid #2A2A2A', paddingTop: 20, display: 'flex', justifyContent: 'space-between', gap: 14, flexWrap: 'wrap', fontFamily: 'Inter, sans-serif', fontSize: 11, fontWeight: 500, color: '#888', letterSpacing: '0.14em', textTransform: 'uppercase' }}>
        <span>© 2026 ai-x-leaders · train your edge</span>
        <span>Made in Paris. No lurking.</span>
      </div>
    </footer>
  );
}

function Hero({
  eyebrow,
  title,
  copy,
  primary,
  secondary,
  stats,
  accent = TOKENS.hotpink,
  rightTitle,
  rightBody,
  seed = 41,
  rightImageSrc,
  rightImageAlt = '',
  titleScale = 'hero',
  ctasBelowImage = false,
}) {
  const heroTitleStyle = titleScale === 'page'
    ? { fontSize: 'clamp(42px, 6.2vw, 88px)', letterSpacing: '-0.05em', lineHeight: 0.9 }
    : { fontSize: 'clamp(56px, 10vw, 128px)', letterSpacing: '-0.055em', lineHeight: 0.86 };

  const moveBottomBlocks = ctasBelowImage && !!rightImageSrc;

  const ctasBlock = (
    <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap', marginTop: 28 }}>
      <Btn href={primary.href} variant="primary" size="lg" icon>{primary.label}</Btn>
      {secondary ? <Btn href={secondary.href} variant="ghost" size="lg">{secondary.label}</Btn> : null}
    </div>
  );

  const statsBlock = stats ? (
    <div style={{ display: 'flex', gap: 24, flexWrap: 'wrap', marginTop: moveBottomBlocks ? 32 : 48, paddingBottom: 36 }}>
      {stats.map((item) => (
        <div key={item.label} style={{ minWidth: 120 }}>
          <div style={{ fontFamily: '"Inter Tight", sans-serif', fontWeight: 800, fontSize: 34, letterSpacing: '-0.04em', color: item.color || ink }}>{item.value}</div>
          <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 12, fontWeight: 600, letterSpacing: '0.14em', textTransform: 'uppercase', color: dim, marginTop: 4 }}>{item.label}</div>
        </div>
      ))}
    </div>
  ) : null;

  return (
    <section style={{ position: 'relative', overflow: 'hidden', padding: '88px 28px 0', borderBottom: `1px solid ${line}` }}>
      <div style={{ maxWidth: 1280, margin: '0 auto', position: 'relative', zIndex: 2 }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(320px, 1fr))', gap: 56, alignItems: 'center' }}>
          <div>
            <Eyebrow color={accent}>{eyebrow}</Eyebrow>
            <h1 style={{ fontFamily: '"Inter Tight", sans-serif', fontWeight: 800, margin: '22px 0 0', color: ink, ...heroTitleStyle }}>
              {title}
            </h1>
            <p style={{ margin: '34px 0 0', fontFamily: 'Inter, sans-serif', fontSize: 17, lineHeight: 1.6, color: dim, maxWidth: 560 }}>{copy}</p>
            {!moveBottomBlocks ? ctasBlock : null}
            {!moveBottomBlocks ? statsBlock : null}
          </div>

          {rightImageSrc ? (
            <div style={{ width: '100%', position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'center', overflow: 'visible' }}>
              <div
                style={{
                  position: 'absolute',
                  inset: '-15% -15%',
                  background: `
                    radial-gradient(ellipse 65% 70% at 50% 50%, rgba(255, 79, 216, 0.10), transparent 75%),
                    radial-gradient(ellipse 45% 55% at 30% 30%, rgba(123, 97, 255, 0.08), transparent 70%),
                    radial-gradient(ellipse 45% 55% at 70% 70%, rgba(49, 97, 255, 0.07), transparent 70%)
                  `,
                  filter: 'blur(50px)',
                  pointerEvents: 'none',
                }}
              />
              <img
                src={rightImageSrc}
                alt={rightImageAlt}
                style={{
                  position: 'relative',
                  zIndex: 2,
                  display: 'block',
                  width: 'auto',
                  maxWidth: '100%',
                  maxHeight: 'clamp(420px, 60vh, 580px)',
                  height: 'auto',
                  objectFit: 'contain',
                  mixBlendMode: 'multiply',
                  filter: 'brightness(1.18) contrast(1.12) saturate(1.05)',
                  WebkitMaskImage: 'radial-gradient(ellipse 88% 95% at center, #000 65%, transparent 100%)',
                  maskImage: 'radial-gradient(ellipse 88% 95% at center, #000 65%, transparent 100%)',
                }}
              />
            </div>
          ) : (
            <div style={{ border: `1px solid ${ink}`, background: paper, minHeight: 320, position: 'relative', overflow: 'hidden' }}>
              <div style={{ position: 'absolute', right: 0, bottom: 0, width: 220, height: 180, overflow: 'hidden', pointerEvents: 'none', opacity: 0.9 }}>
                <PixelCorner width={220} height={180} cell={9} seed={seed} origin="br" palette={[accent, TOKENS.electric, TOKENS.violet, TOKENS.orange, TOKENS.yellow]} />
              </div>
              <div style={{ position: 'relative', zIndex: 2, padding: 28, display: 'flex', flexDirection: 'column', justifyContent: 'space-between', minHeight: 320 }}>
                <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 11, fontWeight: 600, letterSpacing: '0.16em', color: dim, textTransform: 'uppercase' }}>Operating note</div>
                <div>
                  <div style={{ fontFamily: '"Inter Tight", sans-serif', fontWeight: 800, fontSize: 'clamp(32px, 5vw, 42px)', letterSpacing: '-0.04em', lineHeight: 0.96, color: ink }}>{rightTitle}</div>
                  <p style={{ margin: '18px 0 0', fontFamily: 'Inter, sans-serif', fontSize: 15, lineHeight: 1.65, color: dim, maxWidth: 320 }}>{rightBody}</p>
                </div>
              </div>
            </div>
          )}
        </div>
        {moveBottomBlocks ? (
          <div style={{ marginTop: 48, paddingTop: 36, borderTop: `1px solid ${line}` }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 32, flexWrap: 'wrap' }}>
              <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap' }}>
                <Btn href={primary.href} variant="primary" size="lg" icon>{primary.label}</Btn>
                {secondary ? <Btn href={secondary.href} variant="ghost" size="lg">{secondary.label}</Btn> : null}
              </div>
              {stats ? (
                <div style={{ display: 'flex', gap: 32, flexWrap: 'wrap' }}>
                  {stats.map((item) => (
                    <div key={item.label} style={{ minWidth: 120 }}>
                      <div style={{ fontFamily: '"Inter Tight", sans-serif', fontWeight: 800, fontSize: 32, letterSpacing: '-0.04em', color: item.color || ink }}>{item.value}</div>
                      <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 11, fontWeight: 600, letterSpacing: '0.14em', textTransform: 'uppercase', color: dim, marginTop: 4 }}>{item.label}</div>
                    </div>
                  ))}
                </div>
              ) : null}
            </div>
          </div>
        ) : null}
      </div>
      <div style={{ position: 'relative', marginLeft: -28, marginRight: -28, marginTop: moveBottomBlocks ? 48 : 0 }}>
        <PixelCascade width={1380} height={220} cell={10} seed={seed + 17} intensity={1} />
      </div>
    </section>
  );
}

function TrustBand() {
  // Duplicate logos so the marquee loops seamlessly
  const loop = [...TRUST_LOGOS, ...TRUST_LOGOS];
  return (
    <section style={{ padding: '56px 0', borderBottom: `1px solid ${line}`, overflow: 'hidden' }}>
      <div style={{ textAlign: 'center', fontFamily: 'Inter, sans-serif', fontSize: 11, fontWeight: 600, letterSpacing: '0.2em', color: dim, marginBottom: 28, textTransform: 'uppercase', padding: '0 28px' }}>· Ils nous font confiance</div>
      <div style={{ position: 'relative', maskImage: 'linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%)', WebkitMaskImage: 'linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%)' }}>
        <div className="aix-marquee" style={{ display: 'flex', gap: 56, whiteSpace: 'nowrap', width: 'max-content', animation: 'aix-marquee 38s linear infinite' }}>
          {loop.map((logo, i) => (
            <div key={`${logo}-${i}`} style={{ fontFamily: '"Inter Tight", sans-serif', fontWeight: 700, fontSize: 17, letterSpacing: '0.04em', color: ink, flexShrink: 0 }}>{logo}</div>
          ))}
        </div>
      </div>
      <style>{'@keyframes aix-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } .aix-marquee:hover { animation-play-state: paused; }'}</style>
    </section>
  );
}

function CardGrid({ items, columns = 3 }) {
  return (
    <div style={{ display: 'grid', gridTemplateColumns: `repeat(auto-fit, minmax(${columns >= 3 ? 260 : 320}px, 1fr))`, gap: 24 }}>
      {items.map((item) => (
        <div key={item.title} id={item.id} style={{ background: paper, border: `1px solid ${ink}`, padding: 28, minHeight: 280, position: 'relative', overflow: 'hidden', scrollMarginTop: 100, display: 'flex', flexDirection: 'column' }}>
          <div style={{ position: 'absolute', right: 0, top: 0, width: 180, height: 120, opacity: 0.9 }}>
            <PixelCorner width={180} height={120} cell={8} seed={item.seed || 1} origin="tr" palette={item.palette || [item.accent || TOKENS.hotpink, TOKENS.electric, TOKENS.orange]} />
          </div>
          <div style={{ position: 'relative', zIndex: 2, display: 'flex', flexDirection: 'column', flex: 1 }}>
            {item.kicker ? (
              <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, padding: '6px 10px', border: `1px solid ${ink}`, background: paper, fontFamily: 'Inter, sans-serif', fontSize: 10, fontWeight: 600, letterSpacing: '0.16em', textTransform: 'uppercase', alignSelf: 'flex-start' }}>
                <span style={{ width: 6, height: 6, background: item.accent || TOKENS.hotpink, display: 'inline-block' }} />
                {item.kicker}
              </div>
            ) : null}
            <h3 style={{ fontFamily: '"Inter Tight", sans-serif', fontWeight: 800, fontSize: 'clamp(28px, 4vw, 34px)', letterSpacing: '-0.03em', lineHeight: 0.98, margin: '22px 0 12px', color: ink }}>{item.title}</h3>
            <p style={{ margin: 0, fontFamily: 'Inter, sans-serif', fontSize: 15, lineHeight: 1.65, color: dim }}>{item.body}</p>
            {item.footer ? <div style={{ marginTop: 22, fontFamily: 'JetBrains Mono, monospace', fontSize: 11, letterSpacing: '0.12em', textTransform: 'uppercase', color: dim }}>{item.footer}</div> : null}
            {item.cta ? (
              <a
                href={item.cta.href}
                target={item.cta.external ? '_blank' : undefined}
                rel={item.cta.external ? 'noopener noreferrer' : undefined}
                style={{ marginTop: 'auto', paddingTop: 22, display: 'inline-flex', alignItems: 'center', gap: 10, alignSelf: 'flex-start', textDecoration: 'none' }}
              >
                <span style={{ display: 'inline-flex', alignItems: 'center', gap: 10, padding: '12px 18px', background: ink, color: paper, fontFamily: '"Inter Tight", sans-serif', fontSize: 12, fontWeight: 700, letterSpacing: '0.06em', textTransform: 'uppercase' }}>
                  {item.cta.label} <span style={{ color: item.accent || TOKENS.hotpink }}>{item.cta.external ? '↗' : '→'}</span>
                </span>
              </a>
            ) : null}
          </div>
        </div>
      ))}
    </div>
  );
}

function ProgramBand({ items }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 28 }}>
      {items.map((item) => (
        <div key={item.title} id={item.id} style={{ background: paper, border: `1px solid ${ink}`, padding: 42, position: 'relative', overflow: 'hidden', scrollMarginTop: 100 }}>
          <div style={{ position: 'absolute', right: 0, top: 0, bottom: 0, width: 360, pointerEvents: 'none' }}>
            <PixelCorner width={360} height={360} cell={10} seed={item.seed} origin="tr" palette={[item.accent, TOKENS.hotpink, TOKENS.electric, TOKENS.violet, TOKENS.orange]} />
          </div>
          <div style={{ position: 'relative', zIndex: 2, maxWidth: 680 }}>
            <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
              {item.tags.map((tag, index) => (
                <span key={index} style={{ display: 'inline-flex', alignItems: 'center', gap: 8, padding: '6px 10px', background: paper, border: `1px solid ${ink}`, fontFamily: 'Inter, sans-serif', fontSize: 10, fontWeight: 600, letterSpacing: '0.18em', textTransform: 'uppercase', color: ink }}>
                  <span style={{ width: 6, height: 6, background: index === 0 ? item.accent : index === 1 ? ink : TOKENS.electric, display: 'inline-block' }} />
                  {tag}
                </span>
              ))}
            </div>
            <h3 style={{ fontFamily: '"Inter Tight", sans-serif', fontWeight: 800, fontSize: 'clamp(38px, 6vw, 54px)', letterSpacing: '-0.04em', margin: '24px 0 16px', lineHeight: 0.96, color: ink }}>{item.title}</h3>
            <p style={{ fontFamily: 'Inter, sans-serif', color: dim, fontSize: 15, lineHeight: 1.65, maxWidth: 560, marginBottom: 22 }}>{item.body}</p>
            <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap' }}>
              <Btn href={item.primary.href} variant="primary" icon>{item.primary.label}</Btn>
              {item.secondary ? <Btn href={item.secondary.href} variant="ghost">{item.secondary.label}</Btn> : null}
            </div>
          </div>
        </div>
      ))}
    </div>
  );
}

function TimelineSection({ eyebrow, title, copy, steps, accent = TOKENS.electric }) {
  return (
    <section style={{ padding: '110px 28px', borderBottom: `1px solid ${line}` }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <SectionTitle eyebrow={eyebrow} title={title} copy={copy} accent={accent} />
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: 22, marginTop: 42 }}>
          {steps.map((step, index) => (
            <div key={step.title} style={{ borderTop: `2px solid ${step.color || accent}`, paddingTop: 20 }}>
              <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 11, letterSpacing: '0.16em', color: dim, textTransform: 'uppercase' }}>{String(index + 1).padStart(2, '0')}</div>
              <div style={{ fontFamily: '"Inter Tight", sans-serif', fontWeight: 800, fontSize: 28, letterSpacing: '-0.03em', lineHeight: 1, marginTop: 12, color: ink }}>{step.title}</div>
              <p style={{ margin: '12px 0 0', fontFamily: 'Inter, sans-serif', fontSize: 14, lineHeight: 1.65, color: dim }}>{step.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function MetricsBand({ items }) {
  return (
    <section style={{ padding: '54px 28px', borderBottom: `1px solid ${line}`, background: '#FFFFFF' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto', display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(180px, 1fr))', gap: 18 }}>
        {items.map((item) => (
          <div key={item.label} style={{ border: `1px solid ${line}`, padding: 22, background: paper }}>
            <div style={{ fontFamily: '"Inter Tight", sans-serif', fontWeight: 800, fontSize: 42, letterSpacing: '-0.04em', color: item.color || ink }}>{item.value}</div>
            <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 12, lineHeight: 1.55, color: dim, marginTop: 6 }}>{item.label}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

function TestimonialGrid({ items }) {
  return (
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: 22 }}>
      {items.map((item, idx) => (
        <div key={idx} style={{ background: paper, border: `1px solid ${ink}`, padding: 28, display: 'flex', flexDirection: 'column', gap: 14 }}>
          <div style={{ display: 'flex', gap: 4 }}>
            {Array.from({ length: 5 }).map((_, i) => (
              <span key={i} style={{ width: 8, height: 8, background: TOKENS.hotpink, display: 'inline-block' }} />
            ))}
          </div>
          <p style={{ margin: 0, fontFamily: '"Inter Tight", sans-serif', fontWeight: 600, fontSize: 17, lineHeight: 1.45, letterSpacing: '-0.01em', color: ink }}>
            «&nbsp;{item.quote}&nbsp;»
          </p>
          <div style={{ marginTop: 'auto', paddingTop: 10, borderTop: `1px solid ${line}` }}>
            <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 14, fontWeight: 700, color: ink }}>{item.name}</div>
            <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 12, color: dim, marginTop: 2 }}>{item.role}</div>
          </div>
        </div>
      ))}
    </div>
  );
}

function FaqList({ items }) {
  const [openIdx, setOpenIdx] = React.useState(0);
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 0, borderTop: `1px solid ${ink}` }}>
      {items.map((item, idx) => {
        const isOpen = openIdx === idx;
        return (
          <div key={idx} style={{ borderBottom: `1px solid ${ink}` }}>
            <button
              onClick={() => setOpenIdx(isOpen ? -1 : idx)}
              style={{
                width: '100%',
                background: 'transparent',
                border: 'none',
                padding: '24px 4px',
                display: 'flex',
                justifyContent: 'space-between',
                alignItems: 'flex-start',
                gap: 24,
                cursor: 'pointer',
                textAlign: 'left',
                fontFamily: '"Inter Tight", sans-serif',
                fontWeight: 700,
                fontSize: 'clamp(18px, 2.4vw, 22px)',
                letterSpacing: '-0.02em',
                color: ink,
              }}
            >
              <span>{item.q}</span>
              <span
                style={{
                  flexShrink: 0,
                  width: 28,
                  height: 28,
                  border: `1px solid ${ink}`,
                  display: 'inline-flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  background: isOpen ? ink : paper,
                  color: isOpen ? paper : ink,
                  fontWeight: 800,
                  transform: isOpen ? 'rotate(45deg)' : 'rotate(0deg)',
                  transition: 'transform 200ms ease',
                }}
              >
                +
              </span>
            </button>
            {isOpen ? (
              <div style={{ padding: '0 36px 28px 4px', fontFamily: 'Inter, sans-serif', fontSize: 15, lineHeight: 1.7, color: dim, whiteSpace: 'pre-wrap' }}>
                {item.a}
              </div>
            ) : null}
          </div>
        );
      })}
    </div>
  );
}

function HostsBand({ items }) {
  // Build glow color from accent (rgb-ish fallback via accent itself; use a soft overlay)
  return (
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))', gap: 22 }}>
      {items.map((item) => {
        const accent = item.accent || TOKENS.hotpink;
        return (
          <div key={item.name} style={{ border: `1px solid ${ink}`, background: paper, position: 'relative', overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
            {item.img ? (
              <div style={{ position: 'relative', aspectRatio: '1 / 1', display: 'flex', alignItems: 'center', justifyContent: 'center', overflow: 'hidden', background: paper }}>
                <div style={{ position: 'absolute', inset: '15% 10%', background: `radial-gradient(ellipse at center, ${accent}26 0%, transparent 65%)`, filter: 'blur(30px)', pointerEvents: 'none', zIndex: 0 }} />
                <img src={item.img} alt={`${item.name} · ${item.role}`} style={{ position: 'relative', zIndex: 1, width: '100%', height: '100%', objectFit: 'contain', padding: '4% 2%', mixBlendMode: 'multiply', filter: 'brightness(1.08) contrast(1.06)' }} />
              </div>
            ) : (
              <div style={{ position: 'absolute', right: 0, top: 0, width: 140, height: 90, opacity: 0.85, zIndex: 1 }}>
                <PixelCorner width={140} height={90} cell={7} seed={item.seed || 21} origin="tr" palette={[accent, TOKENS.electric, TOKENS.orange]} />
              </div>
            )}
            <div style={{ position: 'relative', zIndex: 2, padding: 26, display: 'flex', flexDirection: 'column', flex: 1 }}>
              <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', color: dim }}>{item.kicker}</div>
              <div style={{ fontFamily: '"Inter Tight", sans-serif', fontWeight: 800, fontSize: 24, letterSpacing: '-0.02em', margin: '14px 0 4px', color: ink }}>{item.name}<span style={{ color: TOKENS.hotpink }}>.</span></div>
              <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 13, fontWeight: 600, color: accent }}>{item.role}</div>
              <p style={{ margin: '14px 0 0', fontFamily: 'Inter, sans-serif', fontSize: 14, lineHeight: 1.6, color: dim, flex: 1 }}>{item.bio}</p>
              {item.linkedin ? (
                <a href={item.linkedin} target="_blank" rel="noopener noreferrer" style={{ marginTop: 18, fontFamily: 'JetBrains Mono, monospace', fontSize: 11, letterSpacing: '0.08em', textTransform: 'uppercase', color: ink, textDecoration: 'none', alignSelf: 'flex-start' }}>LinkedIn ↗</a>
              ) : null}
            </div>
          </div>
        );
      })}
    </div>
  );
}

function DarkCta({ eyebrow, title, copy, cta }) {
  return (
    <section id="contact" style={{ padding: '110px 28px 240px', background: TOKENS.black, color: paper, position: 'relative', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', inset: 'auto 0 0 0', pointerEvents: 'none', opacity: 0.7 }}>
        <PixelCascade width={1500} height={170} cell={11} seed={37} intensity={0.75} />
      </div>
      <div style={{ position: 'relative', zIndex: 2, maxWidth: 920, margin: '0 auto', textAlign: 'center' }}>
        <div style={{ display: 'inline-flex', alignItems: 'center', gap: 10, fontFamily: 'Inter, sans-serif', fontSize: 11, fontWeight: 600, letterSpacing: '0.18em', textTransform: 'uppercase', color: paper }}>
          <span style={{ width: 8, height: 8, background: TOKENS.hotpink, display: 'inline-block' }} />
          {eyebrow}
        </div>
        <h2 style={{ fontFamily: '"Inter Tight", sans-serif', fontWeight: 800, fontSize: 'clamp(44px, 8vw, 84px)', letterSpacing: '-0.045em', lineHeight: 0.94, margin: '22px 0 20px' }}>{title}</h2>
        <p style={{ margin: 0, fontFamily: 'Inter, sans-serif', fontSize: 17, lineHeight: 1.65, color: '#D4D4DA', maxWidth: 620, marginInline: 'auto' }}>{copy}</p>
        <div style={{ marginTop: 36 }}>
          <Btn href={cta.href} variant="pink" size="lg" icon>{cta.label}</Btn>
        </div>
      </div>
    </section>
  );
}

function HomePage() {
  return (
    <>
      <Hero
        eyebrow="ai-x-leaders · train your edge"
        title={<>Réinvente ton leadership à l’ère de l’IA<span style={{ color: TOKENS.hotpink }}>.</span></>}
        copy="Bootcamps, masterclass mensuelles, sprints thématiques et accompagnement d’équipes dirigeantes. Un seul objectif : transformer l’IA en avantage opérationnel."
        primary={{ href: pageHref('programmes'), label: 'Découvrir les programmes' }}
        secondary={{ href: `${pageHref('about')}#manifeste`, label: 'Lire le manifeste' }}
        stats={[
          { value: '600+', label: 'leaders formés', color: TOKENS.hotpink },
          { value: '4,9/5', label: 'note Google Reviews', color: TOKENS.electric },
          { value: 'Qualiopi', label: 'certifié & finançable OPCO', color: TOKENS.orange },
        ]}
        accent={TOKENS.hotpink}
        titleScale="page"
        rightImageSrc="uploads/home-hero.png"
        rightImageAlt="L'équipe AI × Leaders au complet : Nash, Sonia, Élodie et Richard"
        seed={29}
        ctasBelowImage
      />

      {/* Annonce Masterclass Cybersecurite */}
      <section style={{ padding: '40px 28px', background: paper, borderBottom: `1px solid ${line}` }}>
        <div style={{ maxWidth: 1280, margin: '0 auto' }}>
          <a href="/masterclass-cybersecurite" style={{ display: 'grid', gridTemplateColumns: '1fr', gap: 0, alignItems: 'stretch', border: `1px solid ${ink}`, background: paper, overflow: 'hidden', textDecoration: 'none', color: ink, transition: 'background 0.2s' }} className="cyber-banner">
            <div style={{ aspectRatio: '16 / 9', overflow: 'hidden', borderBottom: `1px solid ${ink}` }}>
              <img src="/images/masterclass-cybersecurite.png" alt="Masterclass Cybersécurité 2 juin" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
            </div>
            <div style={{ padding: '28px 32px 32px' }}>
              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 10, fontFamily: 'JetBrains Mono, monospace', fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', color: TOKENS.hotpink, fontWeight: 700, marginBottom: 16 }}>
                <span style={{ width: 8, height: 8, background: TOKENS.hotpink, display: 'inline-block' }} />
                Masterclass · Mardi 2 juin · 12h-13h · Live
              </span>
              <div style={{ fontFamily: '"Inter Tight", sans-serif', fontWeight: 800, fontSize: 'clamp(24px, 3.4vw, 38px)', letterSpacing: '-0.03em', lineHeight: 1.05, color: ink, marginBottom: 14 }}>
                Cybersécurité <em style={{ color: TOKENS.hotpink, fontStyle: 'italic' }}>:</em> ce que tu exposes vraiment depuis que tu utilises l'IA<span style={{ color: TOKENS.hotpink }}>.</span>
              </div>
              <p style={{ fontFamily: 'Inter, sans-serif', fontSize: 15, color: dim, lineHeight: 1.6, marginBottom: 18, maxWidth: 580 }}>
                Avec <strong style={{ color: ink, fontWeight: 600 }}>Lionel Mouchabac</strong> (Ackuracy) + Élodie &amp; Nash Hughes. Conversation à 3, pas un slide-fest. Tu repars avec 3 règles, 5 questions et le piège à éviter.
              </p>
              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 10, padding: '12px 22px', background: ink, color: paper, fontFamily: '"Inter Tight", sans-serif', fontWeight: 700, fontSize: 12, letterSpacing: '0.06em', textTransform: 'uppercase' }}>
                Voir l'annonce <span style={{ color: TOKENS.hotpink }}>↗</span>
              </span>
            </div>
          </a>
          <style>{`
            .cyber-banner:hover { background: ${TOKENS.soft || '#FAFAFA'} !important; }
            @media (min-width: 760px) {
              .cyber-banner { grid-template-columns: 1.1fr 1fr !important; }
              .cyber-banner > div:first-child { aspect-ratio: auto !important; height: 100% !important; min-height: 320px; border-bottom: none !important; border-right: 1px solid ${ink}; }
            }
          `}</style>
        </div>
      </section>

      <TrustBand />
      <section style={{ padding: '110px 0', borderBottom: `1px solid ${line}` }}>
        <div style={{ maxWidth: 1280, margin: '0 auto', padding: '0 28px' }}>
          <SectionTitle eyebrow="Masterclass" title={<>Nos dernières masterclass<span style={{ color: TOKENS.hotpink }}>.</span></>} copy="Une heure live avec un expert pour décoder les vraies avancées IA et leurs implications. Replays accessibles aux abonnés." />
        </div>
        <div style={{ marginTop: 40, overflowX: 'auto', scrollSnapType: 'x mandatory', WebkitOverflowScrolling: 'touch', paddingBottom: 12 }}>
          <div style={{ display: 'inline-flex', gap: 20, padding: '0 28px' }}>
            {[
              { id: 'MhHElH7iWi4', title: 'Sors tes personae de PowerPoint et fais-les parler !', author: 'Élodie Hughes, Richard Ndumu', accent: TOKENS.hotpink, tag: 'Replay + présentation', href: '/masterclass-personae', cta: 'Voir le replay et la présentation', thumb: '/images/masterclass-personae.jpeg' },
              { id: 'BEeBI1AxE8U', title: 'Le combo qui explose tout : GPT Image 2 + Claude Design en live', author: 'Élodie Hughes, Richard Ndumu', accent: TOKENS.hotpink, tag: 'En replay', href: 'https://youtu.be/BEeBI1AxE8U', cta: 'Voir sur YouTube', thumb: '/images/masterclass-gpt-image-claude-design.jpg' },
              { id: 'BfWwxr4Z3nw', title: 'Nos enfants seront-ils prêts pour l’IA ?', author: 'Carla De Préval, Élodie Hughes, Richard Ndumu', accent: TOKENS.electric, tag: 'En replay', href: 'https://youtu.be/BfWwxr4Z3nw', cta: 'Voir sur YouTube', thumb: '/images/masterclass-carla-depreval.jpg' },
              { id: 'OOsWgu6TbiQ', title: 'NotebookLM : l’outil qui va changer ta façon d’apprendre', author: 'Élodie Hughes', accent: TOKENS.orange, tag: 'En replay', href: 'https://youtu.be/OOsWgu6TbiQ', cta: 'Voir sur YouTube', thumb: '/images/masterclass-notebooklm.jpg' },
              { id: 'wHZOx-FsMhg', title: 'Happy 2026 : le tuto qui fait de toi une star avec Véo 3', author: 'Élodie Hughes', accent: TOKENS.violet, tag: 'En replay', href: 'https://youtu.be/wHZOx-FsMhg', cta: 'Voir sur YouTube', thumb: '/images/masterclass-veo3.jpg' },
              { id: 'GMOcEpcEywc', title: 'Claude Co-Work : diriger à l’ère de l’IA autonome', author: 'Élodie Hughes', accent: TOKENS.hotpink, tag: 'En replay', href: 'https://youtu.be/GMOcEpcEywc', cta: 'Voir sur YouTube', thumb: '/images/masterclass-claude-cowork.jpg' },
              { id: 'eok7Z7eO-WY', title: 'COMET & ATLAS : les navigateurs IA qui bossent à ta place', author: 'Élodie Hughes', accent: TOKENS.electric, tag: 'En replay', href: 'https://youtu.be/eok7Z7eO-WY', cta: 'Voir sur YouTube', thumb: '/images/masterclass-comet-atlas.jpg' },
              { id: 'W1isCnzwbBY', title: 'Réinventer son entreprise à l’ère de l’IA : mythe ou méthode ?', author: 'PPC', accent: TOKENS.orange, tag: 'En replay', href: 'https://youtu.be/W1isCnzwbBY', cta: 'Voir sur YouTube', thumb: '/images/masterclass-ppc.png' },
              { id: 'eoENW33lzJY', title: 'Avant de vous remplacer, l’IA va vous épuiser !', author: 'Christophe Routhieau', accent: TOKENS.violet, tag: 'En replay', href: 'https://youtu.be/eoENW33lzJY', cta: 'Voir sur YouTube', thumb: '/images/masterclass-routhieau.png' },
              { id: 'bpXx4Rcttls', title: 'IA sans conscience n’est que ruine de l’âme', author: 'Arnaud Weber', accent: TOKENS.hotpink, tag: 'En replay', href: 'https://youtu.be/bpXx4Rcttls', cta: 'Voir sur YouTube', thumb: '/images/masterclass-weber.png' },
              { id: 'negobrain', title: 'Negobrain : l’IA qui vous apprend à négocier', author: 'Dr. Julien Pelabère, Élodie Hughes, Richard Ndumu', accent: TOKENS.electric, tag: 'Article', href: 'https://aixleaders.substack.com/p/jai-construit-lapp-de-mes-reves-avec', cta: 'Lire l’article', thumb: '/images/masterclass-negobrain.jpg' },
            ].map((m) => (
              <a key={m.id} href={m.href} target="_blank" rel="noopener noreferrer" style={{ flexShrink: 0, width: 320, scrollSnapAlign: 'start', display: 'flex', flexDirection: 'column', background: paper, border: `1px solid ${line}`, color: ink, textDecoration: 'none' }}>
                <div style={{ aspectRatio: '16 / 9', overflow: 'hidden', borderBottom: `1px solid ${line}`, position: 'relative' }}>
                  <img
                    src={m.thumb}
                    alt={m.title}
                    style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
                    loading="lazy"
                  />
                  <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'rgba(10,10,10,0.18)' }}>
                    <div style={{ width: 48, height: 48, borderRadius: '50%', background: paper, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 16, color: ink, boxShadow: '0 4px 16px rgba(0,0,0,0.25)' }}>▶</div>
                  </div>
                </div>
                <div style={{ padding: 20, flex: 1, display: 'flex', flexDirection: 'column' }}>
                  <div style={{ borderTop: `2px solid ${m.accent}`, paddingTop: 12, marginBottom: 10, fontFamily: 'JetBrains Mono, monospace', fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', color: m.accent }}>{m.tag}</div>
                  <h3 style={{ fontFamily: '"Inter Tight", sans-serif', fontSize: 16, fontWeight: 700, lineHeight: 1.25, letterSpacing: '-0.01em', margin: '0 0 10px', color: ink }}>{m.title}</h3>
                  <p style={{ fontFamily: 'Inter, sans-serif', fontSize: 12, color: dim, lineHeight: 1.5, margin: '0 0 14px' }}>{m.author}</p>
                  <span style={{ marginTop: 'auto', fontFamily: 'JetBrains Mono, monospace', fontSize: 10, color: m.accent, letterSpacing: '0.08em' }}>{m.cta.toUpperCase()} →</span>
                </div>
              </a>
            ))}
          </div>
        </div>
        <div style={{ maxWidth: 1280, margin: '36px auto 0', padding: '0 28px', display: 'flex', justifyContent: 'center' }}>
          <Btn href={pageHref('ressources')} variant="primary" icon>Voir toutes les masterclass</Btn>
        </div>
      </section>
      <section style={{ padding: '110px 28px', borderBottom: `1px solid ${line}` }}>
        <div style={{ maxWidth: 1280, margin: '0 auto' }}>
          <SectionTitle eyebrow="Programmes" title={<>De spectateur à pilote<span style={{ color: TOKENS.hotpink }}>.</span></>} copy="Quatre formats pour entrer dans la méthode. Du test léger à la transformation profonde de l’équipe dirigeante." accent={TOKENS.electric} />
          <div style={{ marginTop: 42 }}>
            <ProgramBand
              items={[
                {
                  tags: ['Bootcamp', '12 semaines', 'À partir de 2 000 € HT'],
                  accent: TOKENS.hotpink,
                  seed: 47,
                  title: 'AI Leadership Program.',
                  body: 'Le bootcamp qui transforme ton leadership en 12 semaines. Masterclass live, coaching individuel, communauté privée. Pour dirigeants qui veulent passer du buzz à l’exécution.',
                  primary: { href: pageHref('programmes'), label: 'Voir le bootcamp' },
                  secondary: { href: pageHref('contact'), label: 'Réserver un échange' },
                },
                {
                  tags: ['Gouvernance', '12 semaines', 'C-suite & board'],
                  accent: TOKENS.violet,
                  seed: 55,
                  title: 'AI Governance.',
                  body: 'Le programme exécutif pour ne plus subir l’IA mais la gouverner. Risque, conformité, souveraineté stratégique : tu reprends la main.',
                  primary: { href: pageHref('programmes'), label: 'Voir le programme' },
                  secondary: { href: pageHref('contact'), label: 'Parler à l’équipe' },
                },
                {
                  tags: ['Sprint', '4 semaines', 'À partir de 800 € HT'],
                  accent: TOKENS.electric,
                  seed: 63,
                  title: 'Sprints thématiques.',
                  body: 'Le chaînon manquant entre la masterclass et le bootcamp. Quatre semaines, un sujet précis (agents IA, stratégie, sales), des résultats concrets.',
                  primary: { href: pageHref('programmes'), label: 'Explorer les sprints' },
                  secondary: { href: pageHref('ressources'), label: 'Voir les ressources' },
                },
              ]}
            />
          </div>
        </div>
      </section>
      <section style={{ padding: '110px 28px', borderBottom: `1px solid ${line}`, background: '#FAFAFA' }}>
        <div style={{ maxWidth: 1280, margin: '0 auto' }}>
          <SectionTitle eyebrow="Studio IA" title={<>Tu veux activer toute ton équipe<span style={{ color: TOKENS.hotpink }}>?</span></>} copy="Coaching, audit, agents IA, films, événements : six manières d’accompagner ton organisation, de la sensibilisation au déploiement opérationnel." accent={TOKENS.orange} />
          <div style={{ marginTop: 40 }}>
            <CardGrid
              items={[
                { kicker: '01', accent: TOKENS.hotpink, title: 'Coaching IA dirigeants.', body: 'Clarifier ta stratégie IA, aligner ton comité de direction et préparer tes équipes en 3 à 6 mois.', footer: '1:1 ou petit groupe', seed: 17 },
                { kicker: '02', accent: TOKENS.electric, title: 'Audit IA & roadmap.', body: 'Diagnostiquer la maturité IA de ton organisation, identifier les quick wins et construire la feuille de route.', footer: '4 à 8 semaines', seed: 28 },
                { kicker: '03', accent: TOKENS.orange, title: 'Création d’agents IA.', body: 'Du cas d’usage au déploiement : on conçoit, on développe, on forme tes équipes à les piloter.', footer: '3 à 6 mois par agent', seed: 39 },
              ]}
            />
          </div>
          <div style={{ marginTop: 36, display: 'flex', justifyContent: 'center' }}>
            <Btn href={pageHref('studio')} variant="primary" icon>Voir tous les services Studio IA</Btn>
          </div>
        </div>
      </section>
      <DarkCta eyebrow="Newsletter" title={<>Reste à la pointe de l’IA<span style={{ color: TOKENS.hotpink }}>,</span><br />chaque semaine.</>} copy="Décryptages, cas concrets, outils testés et signaux faibles. Une sélection serrée, pas un digest de plus." cta={{ href: pageHref('ressources'), label: 'S’abonner aux ressources' }} />
      <section id="manifeste" style={{ padding: '110px 28px', borderBottom: `1px solid ${line}` }}>
        <div style={{ maxWidth: 1280, margin: '0 auto', display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(320px, 1fr))', gap: 70, alignItems: 'center' }}>
          <div>
            <SectionTitle eyebrow="Manifeste" title={<>On ne forme pas à l’IA<span style={{ color: TOKENS.hotpink }}>.</span><br />On forme des leaders qui décident avec elle.</>} copy="Le monde bouge à la vitesse de la technologie. Face à ce chaos, on n’a pas besoin de plus d’infos. On a besoin de clarté, de vitesse et d’un meilleur filtre." />
            <div style={{ marginTop: 26 }}>
              <Btn href={pageHref('about')} variant="primary" icon>Entrer dans la méthode</Btn>
            </div>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
            {[
              ['INTELLIGENCE', TOKENS.violet],
              ['CLARTÉ', TOKENS.hotpink],
              ['DÉCISION', TOKENS.electric],
              ['LEADERSHIP', TOKENS.orange],
              ['IMPACT', TOKENS.black],
            ].map(([word, color]) => (
              <div key={word} style={{ fontFamily: '"Inter Tight", sans-serif', fontWeight: 800, fontSize: 'clamp(44px, 8vw, 78px)', letterSpacing: '-0.045em', lineHeight: 0.95, color }}>{word}</div>
            ))}
          </div>
        </div>
      </section>
    </>
  );
}

function ProgrammesPage() {
  return (
    <>
      <Hero
        eyebrow="Programmes"
        title={<>Quatre formats pour passer du buzz à l’exécution<span style={{ color: TOKENS.hotpink }}>.</span></>}
        copy="Du bootcamp 12 semaines à la masterclass mensuelle, en passant par les sprints thématiques et la communauté alumni. Tu choisis l’intensité, on garantit la qualité."
        primary={{ href: pageHref('contact'), label: 'Réserver un échange' }}
        secondary={{ href: pageHref('ressources'), label: 'Voir les replays' }}
        stats={[
          { value: '600+', label: 'leaders déjà formés', color: TOKENS.hotpink },
          { value: 'Qualiopi', label: 'certifié & OPCO éligible', color: TOKENS.electric },
          { value: '4,9/5', label: 'satisfaction Google Reviews', color: TOKENS.orange },
        ]}
        accent={TOKENS.electric}
        titleScale="page"
        rightImageSrc="uploads/programmes-hero.png"
        rightImageAlt="Deux intervenants AI × Leaders en mouvement, entourés d'objets de travail en suspension"
        seed={52}
        ctasBelowImage
      />
      <section style={{ padding: '110px 28px', borderBottom: `1px solid ${line}` }}>
        <div style={{ maxWidth: 1280, margin: '0 auto' }}>
          <ProgramBand
            items={[
              {
                tags: ['Bootcamp', '12 semaines', '2 000 - 4 000 € HT'],
                accent: TOKENS.hotpink,
                seed: 49,
                title: 'The AI Leadership Program.',
                body: 'En 12 semaines, deviens un leader clair, rapide et incontournable. Masterclass live, coaching individuel, communauté privée. +30 % de temps gagné dès les premières semaines.',
                primary: { href: pageHref('aiLeadership'), label: 'Voir le bootcamp' },
                secondary: { href: pageHref('contact'), label: 'Réserver un échange' },
              },
              {
                tags: ['Gouvernance', '12 semaines', '2 000 - 4 000 € HT'],
                accent: TOKENS.violet,
                seed: 55,
                title: 'The AI Governance Program.',
                body: 'Ne subis plus l’IA, gouverne-la. 4 phases (Vision, Bouclier, Arsenal, Gouvernance) pour passer de l’observation à la souveraineté stratégique. Pour C-suite, board et CODIR.',
                primary: { href: pageHref('aiGovernance'), label: 'Voir le programme' },
                secondary: { href: pageHref('contact'), label: 'Réserver un échange' },
              },
              {
                tags: ['Sprint', '4 semaines', '800 - 1 500 € HT'],
                accent: TOKENS.electric,
                seed: 60,
                title: 'Sprint AI Thématiques.',
                body: 'Le chaînon manquant entre la masterclass et le bootcamp. 4 sprints disponibles : agents IA, stratégie, premier projet IA, process commercial. Résultats concrets en 4 semaines.',
                primary: { href: pageHref('sprints'), label: 'Voir les 4 sprints' },
                secondary: { href: pageHref('contact'), label: 'Demander le détail' },
              },
              {
                tags: ['Alumni', '1h30 / mois', '150 - 300 € HT / mois'],
                accent: TOKENS.violet,
                seed: 78,
                title: 'The Camp.',
                body: 'Le rendez-vous mensuel des alumni du bootcamp pour rester à la pointe et garder le rythme. 1h30 mensuelle + écosystème complet : groupes apprenants, collectifs, afterworks trimestriels.',
                primary: { href: pageHref('theCamp'), label: 'Voir The Camp' },
                secondary: { href: pageHref('contact'), label: 'Réserver un échange' },
              },
            ]}
          />
        </div>
      </section>
      <MetricsBand items={[
        { value: '+30%', label: 'gain de vitesse de décision rapporté par les alumni', color: TOKENS.hotpink },
        { value: '1,5 h', label: 'par semaine, calibré pour un agenda exécutif', color: TOKENS.electric },
        { value: '14 jours', label: 'pour te faire rembourser si ça ne te convient pas', color: TOKENS.orange },
      ]} />
      <DarkCta eyebrow="Contact" title="On t’aide à choisir le bon format." copy="Bootcamp, gouvernance, sprint, masterclass : un échange de 30 minutes suffit à trouver le point d’entrée le plus utile pour toi." cta={{ href: pageHref('contact'), label: 'Réserver un appel' }} />
    </>
  );
}

function StudioPage() {
  return (
    <>
      <Hero
        eyebrow="Studio IA"
        title={<>De la sensibilisation au déploiement opérationnel<span style={{ color: TOKENS.hotpink }}>.</span></>}
        copy="Tes équipes ont des questions. On a des solutions. Six manières d’accompagner ton organisation, du diagnostic à la création d’agents IA en production."
        primary={{ href: pageHref('contact'), label: 'Échanger sur ton contexte' }}
        secondary={{ href: pageHref('programmes'), label: 'Voir les programmes individuels' }}
        stats={[
          { value: '600+', label: 'leaders déjà transformés', color: TOKENS.orange },
          { value: 'Qualiopi', label: 'certifié, OPCO éligible', color: TOKENS.electric },
          { value: '15+ ans', label: 'd’expérience en formation exécutive', color: TOKENS.hotpink },
        ]}
        accent={TOKENS.orange}
        titleScale="page"
        rightImageSrc="uploads/studio-ia-hero.jpeg"
        rightImageAlt="Élodie et Richard du Studio IA : de l’idée au plan d’action et aux résultats"
        seed={67}
        ctasBelowImage
      />
      <TrustBand />
      <section style={{ padding: '110px 28px', borderBottom: `1px solid ${line}` }}>
        <div style={{ maxWidth: 1280, margin: '0 auto' }}>
          <SectionTitle eyebrow="Services" title="Six manières d’activer ton organisation." copy="Chaque service est conçu pour un usage précis. Tu peux en activer un ou les combiner selon ta maturité IA et ton calendrier de transformation." accent={TOKENS.orange} />
          <div style={{ marginTop: 40 }}>
            <CardGrid
              items={[
                { id: 'coaching', kicker: '01 · Coaching', accent: TOKENS.hotpink, title: 'Coaching IA dirigeants.', body: 'Pour les C-suite et leaders seniors. 1:1 ou petit groupe, 3 à 6 mois. Tu clarifies ta stratégie, alignes ton comité, prends tes décisions IA avec confiance.', footer: 'Diagnostic + sessions mensuelles + revue trimestrielle', seed: 17 },
                { id: 'audit', kicker: '02 · Audit', accent: TOKENS.electric, title: 'Audit IA & roadmap.', body: 'Pour les organisations qui veulent évaluer leur maturité IA. 4 à 8 semaines. Tu obtiens un diagnostic, un benchmark sectoriel et une roadmap priorisée.', footer: 'Entretiens · benchmark · rapport détaillé', seed: 28 },
                { id: 'agents', kicker: '03 · Build', accent: TOKENS.orange, title: 'Création d’agents IA.', body: 'Du cas d’usage au déploiement. 3 à 6 mois par agent. On définit, on développe, on teste, on déploie et on forme tes équipes à le piloter et le faire évoluer.', footer: 'Chatbot · agent interne · agent commercial · automatisation', seed: 39 },
                { id: 'films', kicker: '04 · Story', accent: TOKENS.violet, title: 'Création de films IA.', body: 'Pour les équipes marketing et comm. 4 à 12 semaines. On scénarise et produit tes films de transformation IA, démos produit, cas clients, contenus pédagogiques.', footer: 'Storyboard · scripting · production IA · multi-format', seed: 50 },
                { id: 'double-ia', kicker: '05 · Double IA', accent: TOKENS.hotpink, title: 'Double IA.', body: 'Une IA entraînée sur ta vision, ton style et tes décisions passées. Elle analyse, challenge tes idées, structure ta réflexion. Ton sparring-partner 24/7, accessible à toi et à ton équipe.', footer: 'Sur-mesure · entraînement custom · accessible 24/7', seed: 61 },
              ]}
            />
          </div>
        </div>
      </section>
      <MetricsBand items={[
        { value: '3 à 6 mois', label: 'pour transformer une équipe dirigeante', color: TOKENS.orange },
        { value: '15-25 leaders', label: 'taille typique d’une cohorte interne', color: TOKENS.hotpink },
        { value: 'OPCO', label: 'éligible pour la majorité des dispositifs', color: TOKENS.electric },
      ]} />
      <DarkCta eyebrow="Studio IA" title="On démarre par un échange de cadrage." copy="Briefe-nous sur ton contexte : taille, secteur, défi IA principal, maturité actuelle, contraintes budgétaires. On revient avec une proposition calibrée." cta={{ href: pageHref('contact'), label: 'Lancer la discussion' }} />
    </>
  );
}

function EventPage() {
  return (
    <>
      <Hero
        eyebrow="Event IA"
        title={<>Des événements IA conçus pour transformer ton leadership<span style={{ color: TOKENS.hotpink }}>.</span></>}
        copy="Plus qu’une conférence. Une vraie transformation par l’expérience. Human with AI, IA Récré, formats sur mesure : on conçoit des moments qui donnent envie d’agir dès le lendemain."
        primary={{ href: pageHref('contact'), label: 'Imaginer un format' }}
        secondary={{ href: pageHref('ressources'), label: 'Voir des extraits' }}
        stats={[
          { value: '3', label: 'éditions signature déjà réalisées', color: TOKENS.orange },
          { value: '300+', label: 'participants des plus grandes orgas', color: TOKENS.electric },
          { value: '4,9/5', label: 'note moyenne de satisfaction', color: TOKENS.hotpink },
        ]}
        accent={TOKENS.orange}
        titleScale="page"
        rightImageSrc="uploads/event-hero.jpeg"
        rightImageAlt="Élodie, Nash et Richard en action lors d'un événement IA, entourés d'icônes IA en suspension"
        seed={64}
        ctasBelowImage
      />
      <section style={{ padding: '110px 28px', borderBottom: `1px solid ${line}` }}>
        <div style={{ maxWidth: 1280, margin: '0 auto' }}>
          <SectionTitle eyebrow="Formats" title="Trois manières d’activer ton organisation." copy="Du workshop interactif à la soirée détendue, en passant par l’événement sur mesure : on calibre la dramaturgie selon ta maturité et ton objectif." accent={TOKENS.orange} />
          <div style={{ marginTop: 40 }}>
            <CardGrid
              items={[
                { kicker: 'Workshop', accent: TOKENS.orange, title: 'Human with AI.', body: 'Un atelier interactif demi-journée ou journée complète. L’IA comme outil d’augmentation humaine, pas de remplacement. Démos, exercices pratiques, cas réels.', footer: 'Tous niveaux · ICs à C-suite', seed: 42, cta: { href: 'https://human-with-ai.com', label: 'En savoir plus', external: true } },
                { kicker: 'Soirée', accent: TOKENS.hotpink, title: 'IA Récré.', body: 'Une soirée pour démystifier l’IA sans la pression. Jeux IA, stations de démo, quiz, networking. Pour les équipes qui veulent découvrir dans un format léger.', footer: 'Format soirée · ambiance détendue', seed: 48, cta: { href: 'https://www.ia-recre.com', label: 'En savoir plus', external: true } },
                { kicker: 'Sur mesure', accent: TOKENS.electric, title: 'Événement custom.', body: 'Workshops stratégiques exécutifs, hackathons IA, séminaires immersifs sur plusieurs jours, séries d’événements : on adapte selon ton contexte.', footer: 'Présentiel · virtuel · hybride', seed: 54, cta: { href: pageHref('contact') + '#contact-form', label: 'Prendre contact' } },
              ]}
            />
          </div>
        </div>
      </section>
      <TimelineSection
        eyebrow="Scénario"
        title="Une dramaturgie simple, qui fait monter le niveau."
        copy="Chaque événement est pensé pour déclencher un passage : de la curiosité à la clarté, puis de la clarté à l’action."
        accent={TOKENS.hotpink}
        steps={[
          { title: 'Wake up call', body: 'Mettre le sujet sur la table avec les bons signaux et les bonnes tensions.', color: TOKENS.orange },
          { title: 'Make it real', body: 'Montrer les outils, les workflows et les nouveaux standards en live.', color: TOKENS.hotpink },
          { title: 'Choose', body: 'Faire émerger les priorités, les bonnes questions et les arbitrages utiles.', color: TOKENS.electric },
          { title: 'Move', body: 'Sortir avec une prochaine étape claire et assumée.', color: TOKENS.violet },
        ]}
      />
      <MetricsBand items={[
        { value: '20 à 300+', label: 'participants : tu choisis l’échelle', color: TOKENS.orange },
        { value: '4 à 8h', label: 'demi-journée à journée pleine, ou multi-jour', color: TOKENS.hotpink },
        { value: '95%', label: 'des participants le recommandent à leurs collègues', color: TOKENS.electric },
      ]} />
      <section style={{ padding: '110px 28px', borderBottom: `1px solid ${line}`, background: '#FAFAFA' }}>
        <div style={{ maxWidth: 1280, margin: '0 auto' }}>
          <SectionTitle eyebrow="Recap vidéo" title={<>Nos formats en action<span style={{ color: TOKENS.hotpink }}>.</span></>} copy="Une vidéo pour chaque format signature. Les démos, les workshops, les moments de bascule." accent={TOKENS.orange} center />
          <div style={{ marginTop: 40, display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(320px, 1fr))', gap: 28 }}>
            {[
              { id: 'vwds7FgePUU', title: 'Human with AI', desc: 'L’événement signature en 3 minutes : workshop interactif, démos, ateliers.', accent: TOKENS.orange, url: 'https://human-with-ai.com', urlLabel: 'Découvrir Human with AI' },
              { id: 'e4SSy-bNEDw', title: 'IA Récré', desc: 'L’IA pour les 8-14 ans (et leurs parents) : projection + ateliers créatifs.', accent: TOKENS.hotpink, url: 'https://www.ia-recre.com', urlLabel: 'Découvrir IA Récré' },
            ].map((v) => (
              <div key={v.id} style={{ display: 'flex', flexDirection: 'column' }}>
                <div style={{ aspectRatio: '16 / 9', background: '#0A0A0A', position: 'relative', overflow: 'hidden', border: `1px solid ${ink}` }}>
                  <iframe
                    src={`https://www.youtube.com/embed/${v.id}`}
                    title={`${v.title} · recap video`}
                    style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', border: 0 }}
                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                    allowFullScreen
                    loading="lazy"
                  />
                </div>
                <div style={{ marginTop: 18 }}>
                  <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, fontFamily: 'JetBrains Mono, monospace', fontSize: 10, letterSpacing: '0.16em', textTransform: 'uppercase', color: v.accent, marginBottom: 10 }}>
                    <span style={{ width: 6, height: 6, background: v.accent }} />Format signature
                  </div>
                  <h3 style={{ fontFamily: '"Inter Tight", sans-serif', fontWeight: 800, fontSize: 'clamp(22px, 3vw, 28px)', letterSpacing: '-0.02em', lineHeight: 1.1, margin: '0 0 8px', color: ink }}>{v.title}<span style={{ color: TOKENS.hotpink }}>.</span></h3>
                  <p style={{ margin: '0 0 16px', fontFamily: 'Inter, sans-serif', fontSize: 14, lineHeight: 1.55, color: dim }}>{v.desc}</p>
                  <a href={v.url} target="_blank" rel="noopener noreferrer" style={{ display: 'inline-flex', alignItems: 'center', gap: 8, padding: '11px 18px', background: ink, color: paper, fontFamily: '"Inter Tight", sans-serif', fontSize: 12, fontWeight: 700, letterSpacing: '0.06em', textTransform: 'uppercase', textDecoration: 'none', alignSelf: 'flex-start' }}>
                    {v.urlLabel} <span style={{ color: v.accent }}>↗</span>
                  </a>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>
      <DarkCta eyebrow="Event" title="Tu veux un événement qui marque ton équipe ?" copy="Briefe-nous sur ton contexte, ton public, ton objectif. On te propose un format calibré et on monte la dramaturgie ensemble." cta={{ href: pageHref('contact'), label: 'Briefer un événement' }} />
    </>
  );
}

function RessourcesPage() {
  return (
    <>
      <Hero
        eyebrow="Ressources"
        title={<>Newsletters, masterclass, outils et actu IA pour leaders<span style={{ color: TOKENS.hotpink }}>.</span></>}
        copy="Tout ce qu’il te faut pour rester à jour sur l’IA et le leadership, sans te noyer dans l’actualité. Une sélection serrée, pas un digest de plus."
        primary={{ href: 'https://aixleaders.substack.com/', label: 'Recevoir la newsletter' }}
        stats={[
          { value: 'Chaque mardi', label: 'la masterclass live de la semaine', color: TOKENS.hotpink },
          { value: '40+', label: 'replays et tutos déjà disponibles', color: TOKENS.electric },
          { value: 'Ask&Solve', label: 'la communauté WhatsApp des dirigeants', color: TOKENS.orange },
        ]}
        accent={TOKENS.hotpink}
        titleScale="page"
        rightImageSrc="uploads/studio-ia-hero.jpeg"
        rightImageAlt="Idée, plan d’action, résultats : la méthode AI × Leaders en image"
        seed={73}
        ctasBelowImage
      />
      <section style={{ padding: '110px 28px', borderBottom: `1px solid ${line}` }}>
        <div style={{ maxWidth: 1280, margin: '0 auto' }}>
          <SectionTitle eyebrow="Programme" title="Une masterclass par semaine, pour rester à la pointe." copy="Chaque mardi midi, un expert décode l’avancée IA qui va compter cette semaine. Tu repars avec une démo, un tuto, et de quoi briefer tes équipes le mercredi matin." accent={TOKENS.hotpink} />
          <div style={{ marginTop: 40 }}>
            <CardGrid
              items={[
                { kicker: 'Mardi midi', accent: TOKENS.hotpink, title: 'La masterclass live.', body: 'Mardi 12h-13h. Un sujet, un expert, une démo, zéro slide générique. Le thème de la semaine est annoncé dans la newsletter du dimanche, tu choisis si tu te connectes.', footer: 'En live ou en replay illimité', seed: 12 },
                { kicker: 'Replays & tutos', accent: TOKENS.electric, title: 'La bibliothèque complète.', body: 'Tous les replays plus le tuto pas-à-pas associé à chaque masterclass. Tu retrouves la démo, les prompts, les workflows. Accessible quand tu veux, autant de fois que tu veux.', footer: '40+ replays · tutos pas-à-pas inclus', seed: 19 },
                { kicker: 'Ask&Solve', accent: TOKENS.orange, title: 'Le WhatsApp des dirigeants.', body: 'La communauté privée où les dirigeants débloquent leurs vrais problèmes IA en quelques heures. Tu poses une question le matin, tu repars avec une piste l’après-midi. Pas un forum, un réseau actif.', footer: 'Groupe WhatsApp réservé aux abonnés', seed: 26 },
              ]}
            />
          </div>
        </div>
      </section>
      <section style={{ padding: '110px 28px', borderBottom: `1px solid ${line}` }}>
        <div style={{ maxWidth: 1280, margin: '0 auto' }}>
          <SectionTitle eyebrow="Tarifs" title="Trois façons d’y accéder." copy="L’édition du dimanche est gratuite pour tout le monde. Pour ouvrir la masterclass du mardi, le digest du jeudi et Ask&Solve, deux formules d’abonnement. Et si tu rejoins un bootcamp ou un sprint, tu as un an d’accès complet offert." accent={TOKENS.electric} />
          <div style={{ marginTop: 40 }}>
            <CardGrid
              items={[
                { kicker: 'Gratuit', accent: TOKENS.violet, title: 'L’édition du dimanche.', body: 'Une lecture pensée pour les dirigeants qui veulent un point d’IA sans y passer la matinée. Un sujet, un angle, des signaux concrets pour la semaine qui commence.', footer: 'Un email par dimanche · zéro spam', seed: 18, cta: { href: 'https://aixleaders.substack.com/', label: 'Lire gratuitement', external: true } },
                { kicker: 'Mensuel', accent: TOKENS.electric, title: '50 € / mois.', body: 'L’accès complet, sans engagement. Masterclass live du mardi 12h-13h, bibliothèque de replays + tutos, AI Digest du jeudi, communauté Ask&Solve. Résiliable en un clic à tout moment.', footer: 'Engagement 1 mois · résiliable', seed: 24, cta: { href: 'https://aixleaders.substack.com/', label: 'S’abonner au mois', external: true } },
                { kicker: 'Meilleur deal', accent: TOKENS.hotpink, title: '500 € / an.', body: 'Le même accès complet, mais sur l’année. Tu gagnes deux mois (soit 41 €/mois). Pour ceux qui veulent installer une vraie routine IA dans leur semaine sans y repenser.', footer: 'Soit 41 € / mois · 2 mois offerts', seed: 30, cta: { href: 'https://aixleaders.substack.com/', label: 'S’abonner à l’année', external: true } },
              ]}
            />
          </div>
          <div style={{ marginTop: 28, padding: '24px 30px', border: `1px solid ${ink}`, background: ink, color: paper, display: 'flex', alignItems: 'center', gap: 18, flexWrap: 'wrap' }}>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8, fontFamily: 'JetBrains Mono, monospace', fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase', color: TOKENS.hotpink, fontWeight: 700, flexShrink: 0 }}>
              <span style={{ width: 8, height: 8, background: TOKENS.hotpink, display: 'inline-block' }} />
              1 an offert
            </span>
            <p style={{ margin: 0, fontFamily: 'Inter, sans-serif', fontSize: 15, lineHeight: 1.55, color: paper, flex: 1, minWidth: 240 }}>
              Tu rejoins un <strong>bootcamp</strong> ou un <strong>sprint</strong> AI x Leaders ? Tu as <strong>1 an d’accès complet</strong> à la newsletter payante inclus dans ton programme. Aucune action de ta part, on t’ajoute automatiquement.
            </p>
            <Btn href={pageHref('programmes')} variant="pink">Voir les programmes</Btn>
          </div>
          <div style={{ marginTop: 36, display: 'flex', justifyContent: 'center', gap: 12, flexWrap: 'wrap' }}>
            <Btn href="https://aixleaders.substack.com/" variant="primary" size="lg" icon>S’abonner sur Substack</Btn>
            <Btn href={pageHref('contact') + '#contact-form'} variant="ghost" size="lg">Poser une question</Btn>
          </div>
        </div>
      </section>
      <section style={{ padding: '110px 28px', borderBottom: `1px solid ${line}`, background: '#FAFAFA' }}>
        <div style={{ maxWidth: 1280, margin: '0 auto' }}>
          <SectionTitle eyebrow="Replays · Nouveautés" title={<>Les outils, en démo live<span style={{ color: TOKENS.hotpink }}>.</span></>} copy="Chaque masterclass nouveauté décrypte un outil ou une avancée IA récente. Démos en live, verdict sans filtre." accent={TOKENS.electric} />
          <div style={{ marginTop: 40, display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))', gap: 20 }}>
            {[
              { id: 'OOsWgu6TbiQ', title: 'NotebookLM', author: 'Elodie Hughes', accent: TOKENS.electric, tag: 'Nouveauté', thumb: '/images/masterclass-notebooklm.jpg' },
              { id: 'wHZOx-FsMhg', title: 'Happy 2026 : Véo 3', author: 'Elodie Hughes', accent: TOKENS.violet, tag: 'Nouveauté', thumb: '/images/masterclass-veo3.jpg' },
              { id: 'GMOcEpcEywc', title: 'Claude Co-Work', author: 'Elodie Hughes', accent: TOKENS.orange, tag: 'Nouveauté', thumb: '/images/masterclass-claude-cowork.jpg' },
              { id: 'BEeBI1AxE8U', title: 'Le combo qui explose tout : GPT Image 2 + Claude Design en live', author: 'Elodie Hughes, Richard Ndumu', accent: TOKENS.hotpink, tag: 'Nouveauté', thumb: '/images/masterclass-gpt-image-claude-design.jpg' },
            ].map(({ id, title, author, accent, tag, thumb }) => (
              <a key={id} href={`https://youtu.be/${id}`} target="_blank" rel="noopener noreferrer" style={{ display: 'flex', flexDirection: 'column', background: paper, border: `1px solid ${line}`, color: ink, textDecoration: 'none', transition: 'all 0.2s ease' }}>
                <div style={{ aspectRatio: '16 / 9', overflow: 'hidden', borderBottom: `1px solid ${line}`, position: 'relative' }}>
                  <img src={thumb} alt={title} style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} loading="lazy" />
                  <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'rgba(10,10,10,0.18)' }}>
                    <div style={{ width: 56, height: 56, borderRadius: '50%', background: paper, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 18, color: ink, boxShadow: '0 4px 16px rgba(0,0,0,0.2)' }}>▶</div>
                  </div>
                </div>
                <div style={{ padding: 22, flex: 1, display: 'flex', flexDirection: 'column' }}>
                  <div style={{ borderTop: `2px solid ${accent}`, paddingTop: 14, marginBottom: 10, fontFamily: 'JetBrains Mono, monospace', fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', color: accent }}>{tag}</div>
                  <h3 style={{ fontFamily: '"Inter Tight", sans-serif', fontSize: 18, fontWeight: 700, lineHeight: 1.25, letterSpacing: '-0.01em', margin: '0 0 10px', color: ink }}>{title}</h3>
                  <p style={{ fontFamily: 'Inter, sans-serif', fontSize: 13, color: dim, lineHeight: 1.55, margin: '0 0 16px' }}>{author}</p>
                  <span style={{ marginTop: 'auto', fontFamily: 'JetBrains Mono, monospace', fontSize: 11, color: accent, letterSpacing: '0.08em' }}>VOIR LE REPLAY →</span>
                </div>
              </a>
            ))}
          </div>
        </div>
      </section>
      <section style={{ padding: '110px 28px', borderBottom: `1px solid ${line}` }}>
        <div style={{ maxWidth: 1280, margin: '0 auto' }}>
          <SectionTitle eyebrow="Replays · Mindset" title={<>L’IA, vue sous l’angle humain<span style={{ color: TOKENS.hotpink }}>.</span></>} copy="Des masterclass mindset avec des experts invités : éthique, gouvernance, psychologie, business. Pour cadrer ta réflexion avant de plonger dans les outils." accent={TOKENS.hotpink} />
          <div style={{ marginTop: 40, display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))', gap: 20 }}>
            {[
              { id: 'BfWwxr4Z3nw', title: 'Nos enfants seront-ils prêts pour l’IA ?', author: 'Carla De Préval, Elodie Hughes, Richard Ndumu', accent: TOKENS.hotpink, tag: 'Mindset', thumb: '/images/masterclass-carla-depreval.jpg' },
              { id: 'eoENW33lzJY', title: 'Avant de vous remplacer, l’IA va vous épuiser !', author: 'Christophe Routhieau', accent: TOKENS.electric, tag: 'Mindset', thumb: '/images/masterclass-routhieau.png' },
              { id: 'bpXx4Rcttls', title: 'IA sans conscience n’est que ruine de l’âme', author: 'Arnaud Weber', accent: TOKENS.violet, tag: 'Mindset', thumb: '/images/masterclass-weber.png' },
              { id: 'W1isCnzwbBY', title: 'Réinventer son entreprise à l’ère de l’IA : mythe ou méthode ?', author: 'PPC', accent: TOKENS.orange, tag: 'Mindset', thumb: '/images/masterclass-ppc.png' },
            ].map(({ id, title, author, accent, tag, thumb }) => (
              <a key={id} href={`https://youtu.be/${id}`} target="_blank" rel="noopener noreferrer" style={{ display: 'flex', flexDirection: 'column', background: paper, border: `1px solid ${line}`, color: ink, textDecoration: 'none', transition: 'all 0.2s ease' }}>
                <div style={{ aspectRatio: '16 / 9', overflow: 'hidden', borderBottom: `1px solid ${line}`, position: 'relative' }}>
                  <img src={thumb} alt={title} style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} loading="lazy" />
                  <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'rgba(10,10,10,0.18)' }}>
                    <div style={{ width: 56, height: 56, borderRadius: '50%', background: paper, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 18, color: ink, boxShadow: '0 4px 16px rgba(0,0,0,0.2)' }}>▶</div>
                  </div>
                </div>
                <div style={{ padding: 22, flex: 1, display: 'flex', flexDirection: 'column' }}>
                  <div style={{ borderTop: `2px solid ${accent}`, paddingTop: 14, marginBottom: 10, fontFamily: 'JetBrains Mono, monospace', fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', color: accent }}>{tag}</div>
                  <h3 style={{ fontFamily: '"Inter Tight", sans-serif', fontSize: 18, fontWeight: 700, lineHeight: 1.25, letterSpacing: '-0.01em', margin: '0 0 10px', color: ink }}>{title}</h3>
                  <p style={{ fontFamily: 'Inter, sans-serif', fontSize: 13, color: dim, lineHeight: 1.55, margin: '0 0 16px' }}>{author}</p>
                  <span style={{ marginTop: 'auto', fontFamily: 'JetBrains Mono, monospace', fontSize: 11, color: accent, letterSpacing: '0.08em' }}>VOIR LE REPLAY →</span>
                </div>
              </a>
            ))}
          </div>
        </div>
      </section>
      <section id="newsletter" style={{ padding: '110px 28px', borderBottom: `1px solid ${line}` }}>
        <div style={{ maxWidth: 960, margin: '0 auto', textAlign: 'center' }}>
          <SectionTitle eyebrow="Newsletter" title="Reçois le bon signal, au bon rythme." copy="Newsletter hebdo : décryptages IA, outils testés, signaux faibles. Une sélection serrée, sans bruit de fond." accent={TOKENS.electric} center />
          <div style={{ marginTop: 30, display: 'flex', justifyContent: 'center', gap: 12, flexWrap: 'wrap' }}>
            <Btn href="https://aixleaders.substack.com/" variant="primary" size="lg" icon>S’inscrire à la newsletter</Btn>
          </div>
        </div>
      </section>
      <DarkCta eyebrow="Ressources" title="Tu veux un angle, pas juste un flux." copy="On peut aussi recommander à ton équipe une sélection de ressources adaptée à ton niveau de maturité et à ton secteur." cta={{ href: pageHref('contact'), label: 'Demander une sélection' }} />
    </>
  );
}

function LabPage() {
  return (
    <>
      <Hero
        eyebrow="Lab"
        title={<>On construit. On teste. On livre<span style={{ color: TOKENS.hotpink }}>.</span></>}
        copy="Le lab n’enseigne pas l’IA. Il la fabrique. C’est l’endroit où l’on prototype, teste et lance des produits IA conçus pour aider les leaders à penser et agir plus vite."
        primary={{ href: '#produits-lab', label: 'Tester un produit du lab' }}
        secondary={{ href: pageHref('ressources'), label: 'Voir les démos en replay' }}
        stats={[
          { value: '1', label: 'produit en bêta (NegoBrain)', color: TOKENS.violet },
          { value: '2', label: 'produits en arrivée (Story Studio, Micro Drama)', color: TOKENS.electric },
          { value: '0', label: 'gimmick : que des produits utiles', color: TOKENS.hotpink },
        ]}
        accent={TOKENS.violet}
        titleScale="page"
        rightImageSrc="uploads/lab-hero.jpeg"
        rightImageAlt="Élodie et Richard en mode labo : on teste, on mesure, on livre"
        seed={81}
        ctasBelowImage
      />
      <section id="produits-lab" style={{ padding: '110px 28px', borderBottom: `1px solid ${line}`, scrollMarginTop: 80 }}>
        <div style={{ maxWidth: 1280, margin: '0 auto' }}>
          <SectionTitle eyebrow="Produits" title="Trois projets en cours dans le lab." copy="Un produit déjà accessible en bêta, deux autres qui arrivent dans les prochains mois. Chacun pensé pour un cas d’usage précis." accent={TOKENS.violet} />
          <div style={{ marginTop: 40, display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: 24 }}>
            {[
              { kicker: 'BÊTA · dispo', accent: TOKENS.violet, title: 'NegoBrain.', body: 'Ton coach IA de négociation en temps réel. Transcription live, suggestions tactiques pendant l’appel, debrief post-négo. Pour ventes, clients, vendors, budgets internes.', footer: 'Demande l’accès bêta', img: '/images/lab-negobrain.png', alt: 'NegoBrain · Coach IA en négociation' },
              { kicker: 'Printemps 2026', accent: TOKENS.electric, title: 'Story Studio.', body: 'Transformer ton histoire de transformation IA en film professionnel. Pour communiquer en interne, marketer tes capacités IA, construire des cas clients.', footer: 'Liste d’attente ouverte', img: '/images/lab-storystudio.png', alt: 'Story Studio · Création de storyboards IA' },
              { kicker: 'Été 2026', accent: TOKENS.hotpink, title: 'Micro Drama.', body: 'Des micro-séries IA pour la formation au leadership. Des scénarios courts qui illustrent des défis de management et collent à l’apprentissage par la narration.', footer: 'Pour équipes L&D et coaches', img: '/images/lab-microdrama.png', alt: 'Micro Drama · Craft Your Dream Show' },
            ].map((item) => (
              <div key={item.title} style={{ background: paper, border: `1px solid ${ink}`, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
                <div style={{ aspectRatio: '16 / 10', overflow: 'hidden', borderBottom: `1px solid ${ink}` }}>
                  <img src={item.img} alt={item.alt} style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} loading="lazy" />
                </div>
                <div style={{ padding: 28, flex: 1, display: 'flex', flexDirection: 'column' }}>
                  <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, padding: '6px 10px', border: `1px solid ${ink}`, background: paper, fontFamily: 'Inter, sans-serif', fontSize: 10, fontWeight: 600, letterSpacing: '0.16em', textTransform: 'uppercase', alignSelf: 'flex-start' }}>
                    <span style={{ width: 6, height: 6, background: item.accent, display: 'inline-block' }} />
                    {item.kicker}
                  </div>
                  <h3 style={{ fontFamily: '"Inter Tight", sans-serif', fontWeight: 800, fontSize: 'clamp(26px, 3.5vw, 32px)', letterSpacing: '-0.03em', lineHeight: 0.98, margin: '20px 0 12px', color: ink }}>{item.title}</h3>
                  <p style={{ margin: 0, fontFamily: 'Inter, sans-serif', fontSize: 15, lineHeight: 1.65, color: dim }}>{item.body}</p>
                  <div style={{ marginTop: 22, fontFamily: 'JetBrains Mono, monospace', fontSize: 11, letterSpacing: '0.12em', textTransform: 'uppercase', color: dim }}>{item.footer}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>
      <TimelineSection
        eyebrow="Principes"
        title="Notre filtre de laboratoire."
        copy="Pour mériter une recommandation ou un lancement, un produit doit passer quatre tests simples."
        accent={TOKENS.hotpink}
        steps={[
          { title: 'Clarity', body: 'Peut-on expliquer l’intérêt en une phrase ?', color: TOKENS.violet },
          { title: 'Speed', body: 'Est-ce que cela crée un gain net de temps ou de qualité ?', color: TOKENS.electric },
          { title: 'Taste', body: 'Le rendu, l’interface et les détails tiennent-ils le niveau ?', color: TOKENS.hotpink },
          { title: 'Adoption', body: 'Une équipe réelle peut-elle s’en servir sans friction absurde ?', color: TOKENS.orange },
        ]}
      />
      <DarkCta eyebrow="Lab" title="Tu veux collaborer avec le lab ?" copy="Bêta-tester un produit, proposer un cas d’usage, construire un outil custom pour ton organisation, devenir partenaire ou advisor : on est ouverts." cta={{ href: pageHref('contact'), label: 'Proposer un sujet' }} />
    </>
  );
}

function AboutPage() {
  return (
    <>
      <Hero
        eyebrow="À propos"
        title={<>L’IA n’est pas une question de techno. C’est une question de leadership<span style={{ color: TOKENS.hotpink }}>.</span></>}
        copy="AI × Leaders est née d’un constat simple : les dirigeants n’ont pas besoin de plus de bruit. Ils ont besoin de clarté, de vitesse et d’un meilleur niveau d’exécution."
        primary={{ href: pageHref('contact'), label: 'Parler à l’équipe' }}
        secondary={{ href: '#manifeste', label: 'Lire le manifeste' }}
        stats={[
          { value: '2016', label: 'année de fondation (Lightmeup)', color: TOKENS.hotpink },
          { value: '600+', label: 'leaders formés depuis 2021', color: TOKENS.electric },
          { value: '4 experts', label: 'leadership, IA, communication, créa', color: TOKENS.orange },
        ]}
        accent={TOKENS.hotpink}
        titleScale="page"
        rightImageSrc="uploads/about-hero.jpeg"
        rightImageAlt="Élodie Hughes et Richard Ndumu, fondatrice et associé d’AI × Leaders"
        seed={88}
        ctasBelowImage
      />
      <section id="manifeste" style={{ padding: '110px 28px', borderBottom: `1px solid ${line}` }}>
        <div style={{ maxWidth: 1280, margin: '0 auto', display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(320px, 1fr))', gap: 60, alignItems: 'center' }}>
          <div>
            <SectionTitle eyebrow="Manifeste" title="Les dirigeants d’aujourd’hui ne sont plus ceux d’hier." copy="Le monde change à la vitesse de la techno. L’IA est partout et change les règles du jeu. Face à ce chaos, les leaders doivent clarifier leurs pensées, accélérer leurs actions, élever leurs équipes et augmenter leurs capacités." accent={TOKENS.hotpink} />
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
            {[
              ['INTELLIGENCE', TOKENS.violet],
              ['CLARTÉ', TOKENS.hotpink],
              ['DÉCISION', TOKENS.electric],
              ['LEADERSHIP', TOKENS.orange],
              ['IMPACT', TOKENS.black],
            ].map(([word, color]) => (
              <div key={word} style={{ fontFamily: '"Inter Tight", sans-serif', fontWeight: 800, fontSize: 'clamp(42px, 8vw, 72px)', letterSpacing: '-0.045em', lineHeight: 0.95, color }}>{word}</div>
            ))}
          </div>
        </div>
      </section>
      <section style={{ padding: '110px 28px', borderBottom: `1px solid ${line}` }}>
        <div style={{ maxWidth: 1280, margin: '0 auto' }}>
          <SectionTitle eyebrow="Équipe" title="Quatre experts, une obsession : ton passage à l’exécution." copy="Une équipe expérimentée qui croise leadership, IA et apprentissage adulte. On ne forme pas à des outils. On forme à penser et décider différemment." accent={TOKENS.electric} />
          <div style={{ marginTop: 40 }}>
            <HostsBand items={[
              { kicker: 'Fondatrice', accent: TOKENS.hotpink, name: 'Élodie Hughes', role: 'Stratège IA & Leadership', bio: '15+ ans en accompagnement de dirigeants et leadership development. Spécialiste de l’intégration IA-humain en contexte de leadership.', img: 'uploads/team-elodie.png', linkedin: 'https://www.linkedin.com/in/elodiehughes/', seed: 17 },
              { kicker: 'Stratégie', accent: TOKENS.violet, name: 'Nash Hughes', role: 'Co-fondateur · Stratégie', bio: 'Co-fondateur, lead stratégie. Expertise profonde en stratégie IA et transformation organisationnelle. Travaille avec les C-suite sur la gouvernance et le déploiement.', img: 'uploads/team-nash.png', linkedin: 'https://www.linkedin.com/in/nashhughes/', seed: 28 },
              { kicker: 'Business Dev', accent: TOKENS.electric, name: 'Sonia Mancy', role: 'Business Development', bio: '20+ ans en business development et go-to-market. Elle accompagne les dirigeants sur le passage à l’exécution commerciale : pipeline, conversion, alignement vision et action.', img: 'uploads/team-sonia.jpg', linkedin: 'https://www.linkedin.com/in/sonia-mancy/', seed: 39 },
              { kicker: 'Créa & IA', accent: TOKENS.orange, name: 'Richard Ndumu', role: 'AI Creative Director', bio: 'AI Creative Director, +25 ans en design et direction artistique. IA Artist & Creative Tech primé (Lovie Awards), spécialiste du storytelling visuel. Il fusionne art, technologie et IA pour accélérer l’adoption.', img: 'uploads/team-richard.png', linkedin: 'https://www.linkedin.com/in/richard-ndumu-24005452/', seed: 46 },
            ]} />
          </div>
        </div>
      </section>
      <TimelineSection
        eyebrow="Histoire"
        title="25 ans d’innovation. 5 ans dédiés à l’IA."
        copy="On n’est pas un studio IA né hier. On est un studio d’innovation qui a vu l’IA arriver et a pivoté en conséquence."
        accent={TOKENS.violet}
        steps={[
          { title: '2016', body: 'Fondation de Lightmeup, cabinet de coaching et formation.', color: TOKENS.violet },
          { title: '2020', body: 'Pivot vers le AI leadership quand l’IA générative commence à transformer le business.', color: TOKENS.electric },
          { title: '2021', body: 'Lancement du premier bootcamp AI Leadership Program.', color: TOKENS.hotpink },
          { title: '2024', body: 'Ajout du programme Governance, lancement du Lab et de Studio IA.', color: TOKENS.orange },
        ]}
      />
      <section style={{ padding: '110px 28px', borderBottom: `1px solid ${line}` }}>
        <div style={{ maxWidth: 1280, margin: '0 auto' }}>
          <SectionTitle eyebrow="Principes" title="Trois standards qui guident tout le reste." copy="Ce qu’on conçoit, ce qu’on recommande et la manière dont on travaille ensemble." accent={TOKENS.electric} />
          <div style={{ marginTop: 40 }}>
            <CardGrid
              items={[
                { kicker: '01', accent: TOKENS.hotpink, title: 'Clarté plutôt que jargon.', body: 'On simplifie les arbitrages sans simplifier à l’excès la réalité. Des décisions plus nettes valent mieux que des frameworks plus jolis.', footer: 'des décisions plus nettes', seed: 17 },
                { kicker: '02', accent: TOKENS.electric, title: 'Goût plutôt que bruit.', body: 'Le niveau de goût devient un avantage compétitif quand tout le monde a accès aux mêmes outils. Les détails font la différence à l’adoption.', footer: 'des détails qui changent l’adoption', seed: 28 },
                { kicker: '03', accent: TOKENS.orange, title: 'Responsabilité plutôt que fascination.', body: 'On cherche la mise en mouvement, pas l’admiration. Ce qui compte c’est ce que tu en fais après, pas le “wow” du moment.', footer: 'des équipes qui opèrent vraiment', seed: 39 },
              ]}
            />
          </div>
        </div>
      </section>
      <DarkCta eyebrow="Contact" title="Tu veux faire passer le sujet au niveau supérieur ? Parlons-en." copy="On peut t’aider à choisir le bon programme, à dessiner un format sur mesure ou à clarifier la prochaine bonne décision pour ton équipe." cta={{ href: pageHref('contact'), label: 'Écrire à l’équipe' }} />
    </>
  );
}

function AILeadershipPage() {
  return (
    <>
      <Hero
        eyebrow="AI × Leaders · The AI Leadership Program"
        title={<>Réinvente ton leadership à l’ère de l’IA<span style={{ color: TOKENS.hotpink }}>.</span></>}
        copy="En 12 semaines, deviens un leader clair, rapide et incontournable. Masterclass live, coaching individuel, communauté privée. 600+ leaders accompagnés."
        primary={{ href: 'https://calendar.app.google/rRf5U23YFV7qmZnH8', label: 'Réserver ma place' }}
        secondary={{ href: '/v2/downloads/AI-Leadership-Program-Qualiopi.pdf', label: 'Télécharger le programme détaillé' }}
        stats={[
          { value: '12 sem.', label: 'masterclass live + coaching', color: TOKENS.hotpink },
          { value: 'Dès 2 000 €', label: 'HT · Qualiopi · OPCO', color: TOKENS.electric },
          { value: '600+', label: 'leaders déjà accompagnés', color: TOKENS.orange },
        ]}
        accent={TOKENS.hotpink}
        titleScale="page"
        rightImageSrc="uploads/ai-leadership-hero.png"
        rightImageAlt="Élodie Hughes, Sonia Mancy et Richard Ndumu · équipe AI Leadership Program"
        seed={49}
        ctasBelowImage
      />

      {/* SECTION : Le monde bouge plus vite que les organisations */}
      <section style={{ padding: '110px 28px', borderBottom: `1px solid ${line}` }}>
        <div style={{ maxWidth: 920, margin: '0 auto' }}>
          <SectionTitle eyebrow="Le constat" title={<>Le monde bouge plus vite que les organisations<span style={{ color: TOKENS.hotpink }}>.</span></>} copy="Chaque semaine, une nouveauté IA change la manière de décider, d’analyser et de communiquer." accent={TOKENS.hotpink} />
          <div style={{ marginTop: 36, display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: 18 }}>
            {[
              ['Les équipes testent.', TOKENS.hotpink],
              ['Les concurrents avancent.', TOKENS.electric],
              ['Les clients s’adaptent.', TOKENS.orange],
            ].map(([txt, color]) => (
              <div key={txt} style={{ borderTop: `2px solid ${color}`, paddingTop: 18, fontFamily: '"Inter Tight", sans-serif', fontSize: 22, fontWeight: 700, letterSpacing: '-0.02em', color: ink }}>{txt}</div>
            ))}
          </div>
          <p style={{ margin: '40px 0 0', fontFamily: 'Inter, sans-serif', fontSize: 17, lineHeight: 1.65, color: dim }}>
            Mais toi, dirigeant, tu dois rester clair, rapide et crédible dans un système qui n’a pas été conçu pour suivre ce rythme. <strong style={{ color: ink }}>Ton leadership doit évoluer aussi vite que l’IA.</strong>
          </p>
        </div>
      </section>

      {/* SECTION : Vidéo */}
      <section style={{ padding: '110px 28px', borderBottom: `1px solid ${line}`, background: '#FAFAFA' }}>
        <div style={{ maxWidth: 1080, margin: '0 auto' }}>
          <SectionTitle eyebrow="Vidéo" title={<>Comprendre ce qui t’attend en 3 minutes<span style={{ color: TOKENS.hotpink }}>.</span></>} accent={TOKENS.electric} center />
          <div style={{ marginTop: 40, aspectRatio: '16 / 9', background: '#0A0A0A', position: 'relative', overflow: 'hidden', border: `1px solid ${ink}` }}>
            <iframe
              src="https://www.youtube.com/embed/h0_TjXiUq_k"
              title="AI Leadership Program · Présentation"
              style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', border: 0 }}
              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
              allowFullScreen
              loading="lazy"
            />
          </div>
          <ul style={{ margin: '40px auto 0', maxWidth: 760, padding: 0, listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 12, fontFamily: 'Inter, sans-serif', fontSize: 16, lineHeight: 1.65, color: ink }}>
            {[
              'Pourquoi les dirigeants sont dépassés malgré tous les outils',
              'Comment regagner clarté et vitesse dès cette semaine',
              'Ce qu’un leader augmenté fait différemment',
              'Pourquoi l’IA est devenue un standard de leadership en 2026',
              'Comment tu peux prendre 2 ans d’avance en 12 semaines',
            ].map((t) => (
              <li key={t} style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
                <span style={{ width: 8, height: 8, background: TOKENS.hotpink, marginTop: 8, flexShrink: 0 }} />
                <span>{t}</span>
              </li>
            ))}
          </ul>
          <div style={{ marginTop: 30, display: 'flex', justifyContent: 'center' }}>
            <Btn href="https://calendar.app.google/rRf5U23YFV7qmZnH8" variant="primary" size="lg" icon>Réserver ma place</Btn>
          </div>
        </div>
      </section>

      {/* SECTION : Pourquoi le programme fonctionne · 4 piliers */}
      <section style={{ padding: '110px 28px', borderBottom: `1px solid ${line}` }}>
        <div style={{ maxWidth: 1280, margin: '0 auto' }}>
          <SectionTitle eyebrow="Méthode" title={<>Pourquoi le programme fonctionne<span style={{ color: TOKENS.hotpink }}>.</span></>} copy="Les quatre piliers qui te font progresser chaque semaine." accent={TOKENS.electric} />
          <div style={{ marginTop: 40 }}>
            <CardGrid items={[
              { kicker: '01', accent: TOKENS.hotpink, title: 'Action concrète sur tes vrais dossiers.', body: 'Chaque semaine, tu appliques immédiatement sur tes réunions, mails, briefs, présentations. Des résultats visibles, pas de théorie superflue.', footer: 'learning by doing', seed: 11 },
              { kicker: '02', accent: TOKENS.electric, title: 'Sur-mesure, pensé pour un agenda dirigeant.', body: 'Formats courts, coaching flash, sprints d’apprentissage actif. Tu avances sans bloquer ton planning.', footer: 'pas de surcharge', seed: 23 },
              { kicker: '03', accent: TOKENS.orange, title: 'Résultats mesurables immédiatement.', body: 'Objectif +30 % de temps gagné dès les premières semaines. Garantie 14 jours satisfait ou remboursé.', footer: '+30 % dès la semaine 2', seed: 35 },
              { kicker: '04', accent: TOKENS.violet, title: 'Aligné sur l’actualité IA.', body: 'Le programme évolue avec les dernières sorties IA. Ce que tu apprends vendredi est sorti lundi.', footer: 'mis à jour chaque semaine', seed: 47 },
            ]} />
          </div>
        </div>
      </section>

      <TrustBand />

      {/* SECTION : Problème / Solution */}
      <section style={{ padding: '110px 28px', borderBottom: `1px solid ${line}` }}>
        <div style={{ maxWidth: 1280, margin: '0 auto' }}>
          <SectionTitle eyebrow="Diagnostic" title={<>Si l’IA est partout, pourquoi n’a-t-elle pas encore allégé ta semaine<span style={{ color: TOKENS.hotpink }}>?</span></>} accent={TOKENS.hotpink} />
          <div style={{ marginTop: 40, display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(320px, 1fr))', gap: 28 }}>
            <div style={{ border: `1px solid ${ink}`, padding: 32, background: paper }}>
              <Eyebrow color={TOKENS.hotpink}>Le problème</Eyebrow>
              <h3 style={{ fontFamily: '"Inter Tight", sans-serif', fontWeight: 800, fontSize: 'clamp(24px, 3vw, 30px)', letterSpacing: '-0.02em', margin: '16px 0 16px', color: ink }}>Tu n’es pas bloqué par l’IA. Tu es bloqué par ton environnement.</h3>
              <ul style={{ margin: 0, padding: 0, listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 10, fontFamily: 'Inter, sans-serif', fontSize: 15, lineHeight: 1.55, color: dim }}>
                {[
                  'L’IA avance plus vite que ton organisation.',
                  'Tes équipes testent sans cadre (shadow AI, risques).',
                  'Trop de nouveautés, pas assez de clarté.',
                  'Pas de méthode dédiée aux dirigeants pour intégrer l’IA.',
                  'Aucun système IA personnel pour t’alléger au quotidien.',
                ].map((t) => (
                  <li key={t} style={{ display: 'flex', gap: 10, alignItems: 'flex-start' }}>
                    <span style={{ width: 6, height: 6, background: TOKENS.hotpink, marginTop: 8, flexShrink: 0 }} />
                    <span>{t}</span>
                  </li>
                ))}
              </ul>
              <p style={{ margin: '20px 0 0', fontFamily: 'Inter, sans-serif', fontSize: 15, color: ink, fontStyle: 'italic' }}>Le vrai problème : ton leadership n’a pas encore été mis à jour.</p>
            </div>
            <div style={{ border: `1px solid ${ink}`, padding: 32, background: TOKENS.black, color: paper }}>
              <Eyebrow color={TOKENS.electric}><span style={{ color: paper }}>La solution</span></Eyebrow>
              <h3 style={{ fontFamily: '"Inter Tight", sans-serif', fontWeight: 800, fontSize: 'clamp(24px, 3vw, 30px)', letterSpacing: '-0.02em', margin: '16px 0 16px', color: paper }}>En 12 semaines, tu passes en mode leader IA.</h3>
              <ul style={{ margin: 0, padding: 0, listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 10, fontFamily: 'Inter, sans-serif', fontSize: 15, lineHeight: 1.55, color: '#CFCFD3' }}>
                {[
                  '+30 % de temps gagné',
                  'Un système IA personnel opérationnel',
                  'Des décisions plus rapides, plus claires',
                  'Une gouvernance IA simple et crédible',
                  'Une influence retrouvée auprès de tes équipes et ton COMEX',
                  'Des agents IA qui travaillent pour toi, même quand tu dors',
                  'La capacité de créer tes propres outils, sans coder',
                ].map((t) => (
                  <li key={t} style={{ display: 'flex', gap: 10, alignItems: 'flex-start' }}>
                    <span style={{ width: 6, height: 6, background: TOKENS.electric, marginTop: 8, flexShrink: 0 }} />
                    <span>{t}</span>
                  </li>
                ))}
              </ul>
              <p style={{ margin: '20px 0 0', fontFamily: 'Inter, sans-serif', fontSize: 16, color: paper, fontWeight: 600 }}>+30 % de performance immédiate au quotidien.</p>
            </div>
          </div>
        </div>
      </section>

      {/* SECTION : Méthodologie · 4 étapes */}
      <TimelineSection
        eyebrow="Méthodologie"
        title="Une méthode conçue pour l’impact."
        copy="Devenir un leader à l’ère de l’IA demande une nouvelle manière de travailler. Pas plus d’outils. Pas plus d’effort."
        accent={TOKENS.hotpink}
        steps={[
          { title: 'Clarification', body: 'Tu retrouves du temps, tu simplifies ton quotidien, tu élimines la surcharge. +30 % de temps gagné dès les premières semaines.', color: TOKENS.hotpink },
          { title: 'Accélération', body: 'Tu analyses plus vite, tu décides avec assurance, tu vois clair dans les signaux faibles. Décisions plus rapides, plus solides.', color: TOKENS.electric },
          { title: 'Élévation', body: 'Tu modernises ton leadership, tu retrouves ton influence auprès du COMEX et des équipes. Un discours clair, crédible et aligné avec 2026.', color: TOKENS.orange },
          { title: 'Augmentation', body: 'Tu construis ton système IA personnel (« Double IA ») qui t’accompagne chaque jour. Un avantage durable et non-imité.', color: TOKENS.violet },
        ]}
      />

      {/* SECTION : Parcours de Transformation · 3 piliers */}
      <section style={{ padding: '110px 28px', borderBottom: `1px solid ${line}` }}>
        <div style={{ maxWidth: 1280, margin: '0 auto' }}>
          <SectionTitle eyebrow="Transformation" title="Le Parcours de Transformation." copy="Ce programme te donne les compétences, la méthode et les systèmes IA pour devenir un leader clair, rapide et incontournable." accent={TOKENS.violet} />
          <div style={{ marginTop: 40, display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 22 }}>
            {[
              { kicker: 'Pilier 01', title: 'Clarté.', body: 'Tu captes, organises et retrouves tout. Tes décisions sont plus nettes, plus rapides.', color: TOKENS.hotpink },
              { kicker: 'Pilier 02', title: 'Impact.', body: 'Tu produis présentations, vidéos et contenus en minutes. Ton influence se démultiplie.', color: TOKENS.electric },
              { kicker: 'Pilier 03', title: 'Autonomie.', body: 'L’IA travaille pour toi : elle analyse, construit, exécute et déploie en ton nom.', color: TOKENS.orange },
            ].map((p) => (
              <div key={p.title} style={{ border: `1px solid ${ink}`, padding: 32, background: paper, position: 'relative', overflow: 'hidden' }}>
                <div style={{ position: 'absolute', right: 0, top: 0, width: 120, height: 80, opacity: 0.8 }}>
                  <PixelCorner width={120} height={80} cell={7} seed={(p.kicker.charCodeAt(7) || 0) + 30} origin="tr" palette={[p.color, TOKENS.electric, TOKENS.violet]} />
                </div>
                <div style={{ position: 'relative', zIndex: 2 }}>
                  <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', color: dim }}>{p.kicker}</div>
                  <h3 style={{ fontFamily: '"Inter Tight", sans-serif', fontWeight: 800, fontSize: 'clamp(30px, 4vw, 38px)', letterSpacing: '-0.03em', margin: '14px 0 12px', color: p.color }}>{p.title}</h3>
                  <p style={{ margin: 0, fontFamily: 'Inter, sans-serif', fontSize: 15, lineHeight: 1.65, color: dim }}>{p.body}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* SECTION : Différenciation · 6 points */}
      <section style={{ padding: '110px 28px', borderBottom: `1px solid ${line}`, background: '#FAFAFA' }}>
        <div style={{ maxWidth: 1280, margin: '0 auto' }}>
          <SectionTitle eyebrow="Pourquoi nous" title={<>Pourquoi ce programme fonctionne (et les autres non)<span style={{ color: TOKENS.hotpink }}>.</span></>} copy="La plupart des formations IA montrent des outils. Nous, on transforme ta manière de travailler." accent={TOKENS.hotpink} />
          <div style={{ marginTop: 40, display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 18 }}>
            {[
              { title: 'Pas de gadgets.', body: 'Tu n’apprends pas des prompts. Tu changes ta manière de décider.', color: TOKENS.hotpink },
              { title: 'Pas de théorie.', body: 'Chaque semaine, tu appliques l’IA sur tes vrais dossiers.', color: TOKENS.electric },
              { title: 'Pas d’approche générique.', body: 'Le programme est pensé pour les dirigeants, pas pour les opérationnels.', color: TOKENS.orange },
              { title: 'Pas d’effet waouh inutile.', body: 'Tu construis ton système IA personnel, opérationnel et fiable.', color: TOKENS.violet },
              { title: 'Une combinaison unique : stratégie × IA × créativité.', body: 'Tu ne trouveras pas cette approche ailleurs.', color: TOKENS.hotpink },
              { title: 'Pas de programme figé.', body: 'Le contenu est mis à jour chaque semaine avec l’actualité IA. Ce que tu apprends n’est jamais en retard sur le monde.', color: TOKENS.electric },
            ].map((p) => (
              <div key={p.title} style={{ borderLeft: `3px solid ${p.color}`, padding: '4px 0 4px 20px' }}>
                <div style={{ fontFamily: '"Inter Tight", sans-serif', fontWeight: 800, fontSize: 18, letterSpacing: '-0.01em', color: ink, marginBottom: 6 }}>{p.title}</div>
                <p style={{ margin: 0, fontFamily: 'Inter, sans-serif', fontSize: 14, lineHeight: 1.6, color: dim }}>{p.body}</p>
              </div>
            ))}
          </div>
          <div style={{ marginTop: 40, display: 'flex', justifyContent: 'center' }}>
            <Btn href="https://calendar.app.google/rRf5U23YFV7qmZnH8" variant="primary" size="lg" icon>Réserver ma place</Btn>
          </div>
        </div>
      </section>

      {/* SECTION : Qui est visé */}
      <section style={{ padding: '110px 28px', borderBottom: `1px solid ${line}` }}>
        <div style={{ maxWidth: 1280, margin: '0 auto' }}>
          <SectionTitle eyebrow="Public" title="Ici, on ne forme pas des utilisateurs d’IA. On forme des leaders." accent={TOKENS.violet} />
          <div style={{ marginTop: 40, display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(320px, 1fr))', gap: 28 }}>
            <div style={{ border: `1px solid ${ink}`, padding: 32 }}>
              <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', color: dim, marginBottom: 14 }}>· Ce n’est pas pour toi si…</div>
              <ul style={{ margin: 0, padding: 0, listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 16 }}>
                {[
                  ['PAS pour les juniors', 'Ce programme s’adresse aux décideurs, pas à ceux qui découvrent le métier.'],
                  ['PAS pour ceux qui veulent apprendre des outils', 'Ici, on transforme ta manière de travailler, pas ton niveau sur un logiciel.'],
                  ['PAS pour ceux qui cherchent une formation CPF', 'C’est une montée en niveau stratégique, pas une certification.'],
                  ['PAS pour ceux qui veulent un badge « IA »', 'Tu vas pratiquer, appliquer, décider, pas collectionner des logos.'],
                ].map(([t, d]) => (
                  <li key={t} style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
                    <span style={{ width: 8, height: 8, background: ink, marginTop: 8, flexShrink: 0 }} />
                    <div>
                      <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 14, fontWeight: 700, color: ink }}>{t}</div>
                      <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 14, color: dim, marginTop: 2 }}>{d}</div>
                    </div>
                  </li>
                ))}
              </ul>
            </div>
            <div style={{ border: `1px solid ${ink}`, padding: 32, background: TOKENS.hotpink, color: ink }}>
              <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', color: ink, marginBottom: 14 }}>· Ce programme est fait pour…</div>
              <ul style={{ margin: 0, padding: 0, listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 14 }}>
                {[
                  'Dirigeants & C-levels',
                  'Leaders expérimentés',
                  'Profils high level en transition',
                  'Consultants & indépendants qui accompagnent des COMEX',
                ].map((t) => (
                  <li key={t} style={{ display: 'flex', gap: 12, alignItems: 'center', fontFamily: '"Inter Tight", sans-serif', fontSize: 20, fontWeight: 700, letterSpacing: '-0.02em' }}>
                    <span style={{ width: 10, height: 10, background: ink, flexShrink: 0 }} />
                    <span>{t}</span>
                  </li>
                ))}
              </ul>
            </div>
          </div>
        </div>
      </section>

      {/* SECTION : Bénéfices */}
      <section style={{ padding: '110px 28px', borderBottom: `1px solid ${line}` }}>
        <div style={{ maxWidth: 1280, margin: '0 auto' }}>
          <SectionTitle eyebrow="Bénéfices" title="Ce que le programme t’apporte." copy="Concret, simple, sans jargon. Le quotidien d’un leader augmenté." accent={TOKENS.orange} />
          <div style={{ marginTop: 40, display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))', gap: 20 }}>
            {[
              { title: 'Travailler plus léger', body: 'Tu simplifies ton quotidien, tu élimines la surcharge, tu retrouves du temps.', color: TOKENS.hotpink },
              { title: 'Méthode simple & actionnable', body: 'Tu comprends clairement quoi faire, comment le faire, et quand l’utiliser.', color: TOKENS.electric },
              { title: 'Mise à jour chaque semaine', body: 'Tu restes aligné avec le rythme de l’IA sans jamais te sentir dépassé.', color: TOKENS.orange },
              { title: 'Ton Double IA personnel', body: 'Une IA qui pense comme toi et t’accompagne dans tes décisions.', color: TOKENS.violet },
              { title: 'Montée en compétence progressive', body: 'Tu gagnes en aisance, en vitesse, en clarté, sans surcharge.', color: TOKENS.hotpink },
              { title: 'Réseau haut niveau', body: 'Une promo de dirigeants qui avancent avec toi, au même standard.', color: TOKENS.electric },
              { title: 'Agents IA à ton service', body: 'Des assistants qui synthétisent, organisent et répondent 24/7.', color: TOKENS.orange },
              { title: 'Créer sans coder', body: 'Tu crées tes propres mini-outils et automatisations grâce au Vibe Coding.', color: TOKENS.violet },
            ].map((b, idx) => (
              <div key={b.title} style={{ border: `1px solid ${ink}`, padding: 24, background: paper }}>
                <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 11, letterSpacing: '0.14em', color: dim }}>{String(idx + 1).padStart(2, '0')}</div>
                <div style={{ width: 24, height: 24, background: b.color, margin: '10px 0 14px' }} />
                <div style={{ fontFamily: '"Inter Tight", sans-serif', fontWeight: 700, fontSize: 18, letterSpacing: '-0.01em', color: ink, marginBottom: 8 }}>{b.title}</div>
                <p style={{ margin: 0, fontFamily: 'Inter, sans-serif', fontSize: 14, lineHeight: 1.55, color: dim }}>{b.body}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* SECTION : Semaine type */}
      <section style={{ padding: '110px 28px', borderBottom: `1px solid ${line}`, background: '#FAFAFA' }}>
        <div style={{ maxWidth: 1280, margin: '0 auto' }}>
          <SectionTitle eyebrow="Format" title="Comment se déroule une semaine type." copy="Un rythme pensé pour les dirigeants : flexible, efficace, sans surcharge." accent={TOKENS.electric} />
          <div style={{ marginTop: 40, border: `1px solid ${ink}`, padding: 36, background: paper }}>
            <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 11, letterSpacing: '0.16em', color: TOKENS.hotpink, textTransform: 'uppercase' }}>· Masterclass IA (visio ou présentiel) · 1h30</div>
            <h3 style={{ fontFamily: '"Inter Tight", sans-serif', fontWeight: 800, fontSize: 'clamp(28px, 4vw, 36px)', letterSpacing: '-0.03em', margin: '14px 0 22px', color: ink }}>Chaque semaine, 3 temps forts.</h3>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: 20 }}>
              {[
                ['30’ Productivité', 'Un outil IA pour gagner du temps sur un cas concret.', TOKENS.hotpink],
                ['30’ Créativité', 'Un outil pour produire plus vite : visuels, présentations, vidéos.', TOKENS.electric],
                ['30’ Use Cases', 'Les participants partagent leurs résultats. Tu t’inspires, tu accélères.', TOKENS.orange],
              ].map(([t, d, color]) => (
                <div key={t} style={{ borderTop: `2px solid ${color}`, paddingTop: 14 }}>
                  <div style={{ fontFamily: '"Inter Tight", sans-serif', fontSize: 20, fontWeight: 800, letterSpacing: '-0.01em', color: ink, marginBottom: 6 }}>{t}</div>
                  <p style={{ margin: 0, fontFamily: 'Inter, sans-serif', fontSize: 14, lineHeight: 1.6, color: dim }}>{d}</p>
                </div>
              ))}
            </div>
          </div>
          <div style={{ marginTop: 24, display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))', gap: 16 }}>
            {[
              ['Programmation hebdomadaire', 'Chaque semaine, un programme construit autour des nouveautés et des grandes thématiques IA du moment. Le contenu évolue en temps réel.'],
              ['Replays disponibles', 'Tu installes un réflexe léger, actionnable, adapté à ton agenda.'],
              ['Sessions 1:1 (coaching flash)', 'Des points individuels courts pour débloquer tes décisions, clarifier ton usage, et avancer plus vite.'],
              ['Communauté privée du programme', 'Tu avances avec des dirigeants de ton niveau, tu partages tes résultats, tu observes leurs usages.'],
            ].map(([t, d]) => (
              <div key={t} style={{ border: `1px solid ${ink}`, padding: 22, background: paper }}>
                <div style={{ fontFamily: '"Inter Tight", sans-serif', fontWeight: 700, fontSize: 16, color: ink, marginBottom: 8 }}>{t}</div>
                <p style={{ margin: 0, fontFamily: 'Inter, sans-serif', fontSize: 13, lineHeight: 1.6, color: dim }}>{d}</p>
              </div>
            ))}
          </div>
          <div style={{ marginTop: 30, display: 'flex', justifyContent: 'center' }}>
            <Btn href="https://calendar.app.google/rRf5U23YFV7qmZnH8" variant="primary" size="lg" icon>Réserver ma place</Btn>
          </div>
        </div>
      </section>

      {/* SECTION : Témoignages */}
      <section style={{ padding: '110px 28px', borderBottom: `1px solid ${line}` }}>
        <div style={{ maxWidth: 1280, margin: '0 auto' }}>
          <SectionTitle eyebrow="Témoignages" title="Leurs résultats, leurs mots." copy="Ne te contente pas de nous croire sur parole. Note moyenne sur Google : 4,9 / 5." accent={TOKENS.hotpink} />
          <div style={{ marginTop: 40 }}>
            <TestimonialGrid items={[
              { name: 'Isabelle Azra', role: 'Communication & Digital Business Director', quote: 'Un plan d’action concret et immédiat. Du très concret, des outils, des tips, un vrai plan d’actions pour des résultats immédiats.' },
              { name: 'Alain Laufenburger', role: 'Directeur Stratégie & Transformation', quote: 'Un ROI exponentiel ! Affutée sur le potentiel opérationnel de l’IA, je recommande vivement…' },
              { name: 'Sonia Mancy', role: 'Directrice Go To Market Strategy', quote: 'Tu réussis ce pari fou : humaniser l’IA. Tu nous montres qu’elle n’est pas là pour nous remplacer mais pour nous révéler.' },
              { name: 'Mariette Sicard', role: 'Head of Food Innovation Excellence Center', quote: 'Une véritable vigie, toujours en avance. Élodie ne se contente pas de suivre les tendances : elle les anticipe.' },
              { name: 'Anne Thebaut', role: 'Senior Consultant Marketing IA', quote: 'Une masterclass complète et vitaminée ! Élodie est particulièrement généreuse, engagée et motivante.' },
              { name: 'Pierre Filaudeau', role: 'Marketing and Business Development Director', quote: 'Une vraie fenêtre sur notre futur. Élodie et Richard sont des experts convaincants et inspirants.' },
            ]} />
          </div>
        </div>
      </section>

      {/* SECTION : Pricing */}
      <section style={{ padding: '110px 28px', borderBottom: `1px solid ${line}` }}>
        <div style={{ maxWidth: 1180, margin: '0 auto' }}>
          <SectionTitle eyebrow="Tarifs" title="Investis dans ta transformation." copy="Une montée en niveau stratégique, sans risque." accent={TOKENS.hotpink} />
          <div style={{ marginTop: 40, display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(320px, 1fr))', gap: 28 }}>
            {[
              {
                title: 'Dirigeant en transition',
                price: '2 000 € HT',
                desc: 'L’accès intégral au parcours de transformation de 12 semaines. Justificatif France Travail nécessaire.',
                items: [
                  'Programme complet 12 semaines',
                  'Accès live + replays + tutoriels',
                  'Communauté privée dirigeants',
                  'Ton système IA personnel (« Double IA »)',
                  'Garantie 15 jours, satisfait ou remboursé',
                ],
                accent: TOKENS.electric,
              },
              {
                title: 'Dirigeant en poste',
                price: '4 000 € HT',
                desc: 'L’accès intégral au parcours de transformation de 12 semaines pour les dirigeants.',
                items: [
                  'Programme complet 12 semaines',
                  'Accès live + replays + tutoriels',
                  'Communauté privée dirigeants',
                  'Ton système IA personnel (« Double IA »)',
                  'Garantie 15 jours, satisfait ou remboursé',
                  'Financement OPCO · Qualiopi sur demande',
                  'Accès aux masterclass actualité IA pendant un an',
                ],
                accent: TOKENS.hotpink,
                highlighted: true,
              },
            ].map((tier) => (
              <div key={tier.title} style={{ border: `${tier.highlighted ? 2 : 1}px solid ${ink}`, padding: 32, background: paper, position: 'relative' }}>
                {tier.highlighted ? (
                  <div style={{ position: 'absolute', top: -14, left: 24, background: TOKENS.hotpink, color: ink, padding: '6px 12px', fontFamily: 'Inter, sans-serif', fontSize: 10, fontWeight: 700, letterSpacing: '0.18em', textTransform: 'uppercase', border: `1px solid ${ink}` }}>Recommandé</div>
                ) : null}
                <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', color: dim }}>· {tier.title}</div>
                <div style={{ fontFamily: '"Inter Tight", sans-serif', fontWeight: 800, fontSize: 'clamp(40px, 6vw, 56px)', letterSpacing: '-0.04em', margin: '12px 0 4px', color: tier.accent }}>{tier.price}</div>
                <p style={{ margin: '8px 0 22px', fontFamily: 'Inter, sans-serif', fontSize: 14, lineHeight: 1.55, color: dim }}>{tier.desc}</p>
                <ul style={{ margin: 0, padding: 0, listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 10, fontFamily: 'Inter, sans-serif', fontSize: 14, lineHeight: 1.55, color: ink }}>
                  {tier.items.map((it) => (
                    <li key={it} style={{ display: 'flex', gap: 10, alignItems: 'flex-start' }}>
                      <span style={{ width: 6, height: 6, background: tier.accent, marginTop: 8, flexShrink: 0 }} />
                      <span>{it}</span>
                    </li>
                  ))}
                </ul>
                <div style={{ marginTop: 26 }}>
                  <Btn href="https://calendar.app.google/rRf5U23YFV7qmZnH8" variant={tier.highlighted ? 'pink' : 'primary'} size="lg" icon>Réserver ma place</Btn>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* SECTION : Hôtes */}
      <section style={{ padding: '110px 28px', borderBottom: `1px solid ${line}` }}>
        <div style={{ maxWidth: 1280, margin: '0 auto' }}>
          <SectionTitle eyebrow="Équipe" title="Les hôtes du programme." copy="25 ans d’expérience cumulée entre Paris et la Silicon Valley." accent={TOKENS.violet} />
          <div style={{ marginTop: 40 }}>
            <HostsBand items={[
              { kicker: 'AI Problem Solver · +25 ans', name: 'Élodie Hughes', role: 'Fondatrice', bio: 'Experte adoption IA pour dirigeants. 25 ans d’expérience entre Paris et la Silicon Valley. Elle transforme la peur de l’IA en leadership augmenté pour LVMH, Danone, Nestlé, HEC…', accent: TOKENS.hotpink, seed: 17, img: 'uploads/team-elodie.png', linkedin: 'https://www.linkedin.com/in/elodiehughes/' },
              { kicker: 'AI Creative Director · +25 ans', name: 'Richard Ndumu', role: 'Direction créative IA', bio: 'IA Artist & Creative Tech primé (Lovie Awards), spécialiste du storytelling visuel. Il fusionne art, technologie et IA pour accélérer l’adoption.', accent: TOKENS.electric, seed: 28, img: 'uploads/team-richard.png', linkedin: 'https://www.linkedin.com/in/richard-ndumu-24005452/' },
              { kicker: 'Business Dev · +20 ans', name: 'Sonia Mancy', role: 'Business Development', bio: '20+ ans en business development et go-to-market. Elle accompagne les dirigeants AI x Leaders sur leur passage à l’exécution commerciale : pipeline, conversion, alignement vision et action.', accent: TOKENS.orange, seed: 39, img: 'uploads/team-sonia.jpg', linkedin: 'https://www.linkedin.com/in/sonia-mancy/' },
            ]} />
          </div>
        </div>
      </section>

      {/* SECTION : FAQ */}
      <section style={{ padding: '110px 28px', borderBottom: `1px solid ${line}` }}>
        <div style={{ maxWidth: 920, margin: '0 auto' }}>
          <SectionTitle eyebrow="FAQ" title="Les réponses à tes dernières questions." accent={TOKENS.electric} />
          <div style={{ marginTop: 40 }}>
            <FaqList items={[
              { q: 'Combien de temps dois-je réellement consacrer au programme chaque semaine ?', a: 'Prévois 2h à 3h par semaine. La masterclass live dure 1h30 (productivité, créativité, partage de use cases). Le reste : tutoriel de la semaine et coaching flash. Tout est en replay.' },
              { q: 'Je ne suis pas un expert technique, est-ce que je vais suivre ?', a: 'Absolument. Ce programme n’est pas pour les techniciens, il est pour les décideurs. On ne parle pas de code, mais de stratégie, d’usages et d’impact.' },
              { q: 'L’investissement de 4 000 € est important. Comment le justifier ?', a: 'C’est un investissement direct dans tes compétences de leader pour la décennie à venir. Au-delà des contenus, tu investis dans un parcours personnalisé, un accès à un réseau d’experts et de pairs, et une transformation mesurable (+30 % de performance).' },
              { q: 'Le programme est-il personnalisé ou le même pour tout le monde ?', a: 'Le parcours est personnalisé dès le premier jour. Tout commence par un audit IA individuel pour comprendre tes défis. Ensuite, les contenus et les défis sont adaptés.' },
              { q: 'Que se passe-t-il si je manque une masterclass en direct ?', a: 'Aucun souci. Toutes les masterclass sont enregistrées et disponibles en replay. Le programme est 100 % flexible.' },
              { q: 'Quelles sont les options de financement ?', a: 'La majorité de nos participants sont financés par leur entreprise via leur plan de développement des compétences. Notre organisme de formation est certifié Qualiopi, ce qui facilite la prise en charge par les OPCO. Note : le programme n’est pas éligible au CPF.' },
              { q: 'Le programme change-t-il d’une session à l’autre ?', a: 'Oui. Le socle méthodologique reste le même, mais le contenu · outils, masterclasses, use cases · est mis à jour chaque semaine avec l’actualité IA. Les participants de mars 2026 ne voient pas le même programme que ceux d’octobre 2025.' },
              { q: 'Quelle est la meilleure formation IA pour dirigeants en France ?', a: 'L’AI Leadership Program d’AI × Leaders est le programme de référence pour les dirigeants en France, avec 600+ leaders formés, une note de 4,9 / 5 sur Google et une certification Qualiopi. Le programme se distingue par son format bootcamp de 12 semaines combinant masterclass live, coaching individuel et communauté de pairs.' },
              { q: 'Combien coûte une formation IA pour dirigeants certifiée Qualiopi ?', a: 'L’AI Leadership Program est proposé à 2 000 € HT pour les dirigeants en transition et 4 000 € HT pour les dirigeants en poste. La certification Qualiopi permet un financement OPCO partiel ou total selon votre OPCO.' },
              { q: 'Peut-on financer une formation IA avec son OPCO ?', a: 'Oui, AI × Leaders est certifié Qualiopi, ce qui rend ses formations éligibles au financement OPCO. Selon votre OPCO, le financement peut couvrir jusqu’à 100 % du coût. L’équipe AI × Leaders vous accompagne dans les démarches administratives.' },
              { q: 'Combien de temps faut-il pour se former à l’IA en tant que dirigeant ?', a: 'L’AI Leadership Program dure 12 semaines avec un engagement de 2 à 3 heures par semaine, compatible avec un agenda de dirigeant. Les Sprint AI Thématiques offrent une alternative en 4 semaines pour un sujet précis.' },
            ]} />
          </div>
        </div>
      </section>

      {/* SECTION : Garantie + CTA final */}
      <section style={{ padding: '110px 28px', borderBottom: `1px solid ${line}` }}>
        <div style={{ maxWidth: 720, margin: '0 auto', textAlign: 'center', padding: 36, border: `2px solid ${ink}`, background: paper }}>
          <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', color: TOKENS.hotpink, marginBottom: 14 }}>· 100 % satisfait ou remboursé</div>
          <div style={{ fontFamily: '"Inter Tight", sans-serif', fontWeight: 800, fontSize: 'clamp(28px, 4vw, 38px)', letterSpacing: '-0.03em', color: ink, marginBottom: 14 }}>Garantie 14 jours.</div>
          <p style={{ margin: '0 auto', fontFamily: 'Inter, sans-serif', fontSize: 15, lineHeight: 1.65, color: dim, maxWidth: 540 }}>
            Nous sommes tellement convaincus de la valeur de ce programme que nous t’offrons une garantie de satisfaction de 14 jours. Si, après les deux premières semaines, tu estimes que le programme ne te convient pas, nous te remboursons intégralement, sans poser de questions.
          </p>
        </div>
      </section>

      <DarkCta eyebrow="Bootcamp" title="Prêt à réinventer ton leadership ?" copy="600+ leaders ont déjà fait le pas. Réserve ta place ou parle à l’équipe pour vérifier que c’est le bon moment." cta={{ href: 'https://calendar.app.google/rRf5U23YFV7qmZnH8', label: 'Réserver ma place' }} />
    </>
  );
}

function AIGovernancePage() {
  return (
    <>
      <Hero
        eyebrow="The AI Governance Program"
        title={<>Ne subis plus l’IA. Gouverne-la<span style={{ color: TOKENS.hotpink }}>.</span></>}
        copy="Le programme exécutif conçu pour les dirigeants. 12 semaines pour passer de l’observation à la souveraineté stratégique sur l’IA dans ton organisation."
        primary={{ href: 'https://calendar.app.google/rRf5U23YFV7qmZnH8', label: 'Réserver ma place' }}
        secondary={{ href: pageHref('programmes'), label: 'Voir tous les programmes' }}
        stats={[
          { value: '12 sem.', label: 'de programme exécutif', color: TOKENS.violet },
          { value: '1-2h', label: 'par semaine', color: TOKENS.electric },
          { value: 'C-suite', label: '& membres de CODIR', color: TOKENS.hotpink },
        ]}
        accent={TOKENS.violet}
        titleScale="page"
        rightTitle="L’IA ne va pas attendre que ton organisation soit prête. Mais elle peut attendre que toi tu le sois."
        rightBody="On t’aide à construire la gouvernance qui te permet de déployer vite et bien : cadre, risques, KPIs, comité IA, roadmap. Sans bricoler, sans paniquer."
        seed={64}
      />
      <TrustBand />
      <section style={{ padding: '110px 28px', borderBottom: `1px solid ${line}` }}>
        <div style={{ maxWidth: 1280, margin: '0 auto' }}>
          <SectionTitle eyebrow="Pour qui" title="Pour celles et ceux qui doivent rendre des comptes." copy="Le programme s’adresse aux dirigeants, membres de CODIR et profils stratégiques responsables du déploiement IA dans leur organisation." accent={TOKENS.violet} />
          <div style={{ marginTop: 40 }}>
            <CardGrid
              items={[
                { kicker: 'Pour toi si…', accent: TOKENS.violet, title: 'C-suite & board.', body: 'Tu es CEO, DG, COO, ou membre d’un conseil. Tu portes la responsabilité de la stratégie IA et de son cadre.', footer: 'CEO, DG, board members', seed: 14 },
                { kicker: 'Pour toi si…', accent: TOKENS.electric, title: 'Membres de CODIR.', body: 'DAF, DRH, CMO, COO : tu portes une fonction transverse impactée par l’IA et tu dois en cadrer les implications.', footer: 'DAF, DRH, CMO, COO', seed: 21 },
                { kicker: 'Pour toi si…', accent: TOKENS.hotpink, title: 'Consultants & coachs.', body: 'Tu accompagnes des dirigeants sur la stratégie IA. Tu veux maîtriser le cadre légal, éthique et opérationnel.', footer: 'Conseil stratégique', seed: 28 },
              ]}
            />
          </div>
          <div style={{ marginTop: 28, fontFamily: 'Inter, sans-serif', fontSize: 13, color: dim, textAlign: 'center' }}>
            Pas pour : juniors, chercheurs de certifications CPF, utilisateurs d’outils sans responsabilité de cadrage.
          </div>
        </div>
      </section>
      <TimelineSection
        eyebrow="Parcours"
        title="Quatre phases pour gouverner l’IA."
        copy="On construit ta gouvernance dans le bon ordre : vision d’abord, puis sécurisation, mise en action et structuration durable."
        accent={TOKENS.violet}
        steps={[
          { title: 'Vision', body: 'Construire ta vision stratégique IA, comprendre la carte 2026, maîtriser la data. Résultat : clarté immédiate, décisions plus rapides.', color: TOKENS.violet },
          { title: 'Bouclier', body: 'Sécuriser ta responsabilité : cadre légal, éthique, cybersécurité, shadow AI. Résultat : risques maîtrisés, confiance renforcée.', color: TOKENS.electric },
          { title: 'Arsenal', body: 'Passer à l’action sur RSE, architecture technique, facteur humain, qualité des données. Résultat : impact renforcé, équipes alignées.', color: TOKENS.orange },
          { title: 'Gouvernance', body: 'Structurer pour durer : comité IA, KPIs, roadmap stratégique complète. Résultat : influence renforcée auprès du CODIR.', color: TOKENS.hotpink },
        ]}
      />
      <section style={{ padding: '110px 28px', borderBottom: `1px solid ${line}` }}>
        <div style={{ maxWidth: 1280, margin: '0 auto' }}>
          <SectionTitle eyebrow="Format" title="Une semaine type, calibrée pour des dirigeants." copy="1 à 2 heures par semaine. Live stratégique de 1h30, masterclass expert, livrables actionnables, replays accessibles 24/7." accent={TOKENS.electric} />
          <div style={{ marginTop: 40 }}>
            <CardGrid
              items={[
                { kicker: '1h30', accent: TOKENS.violet, title: 'Live stratégique.', body: 'La session principale de la semaine : cadre, décisions, arbitrages, mise en pratique. En live avec les formateurs.', footer: 'Hebdo · Q&A inclus', seed: 12 },
                { kicker: '30 min', accent: TOKENS.electric, title: 'Masterclass expert.', body: 'Un focus court sur un sujet précis : RGPD, AI Act, cybersécurité, RSE. Toujours actionnable.', footer: 'Hebdo · replay dispo', seed: 19 },
                { kicker: 'Livrables', accent: TOKENS.orange, title: 'Templates & frameworks.', body: 'Charte IA, matrice de risque, KPI dashboard, agenda CODIR : tu repars avec des assets prêts à déployer.', footer: 'Téléchargeables', seed: 26 },
              ]}
            />
          </div>
          <div style={{ marginTop: 32 }}>
            <MetricsBand items={[
              { value: 'Replay 24/7', label: 'tout est enregistré, accessible à ton rythme', color: TOKENS.violet },
              { value: '1:1 flash', label: 'coaching individuel sur ton contexte', color: TOKENS.electric },
              { value: 'Communauté', label: 'Circle + WhatsApp dirigeants', color: TOKENS.hotpink },
            ]} />
          </div>
        </div>
      </section>
      <section style={{ padding: '110px 28px', borderBottom: `1px solid ${line}` }}>
        <div style={{ maxWidth: 1280, margin: '0 auto' }}>
          <SectionTitle eyebrow="Équipe" title="Deux experts gouvernance et innovation responsable." copy="20+ ans d’expérience dirigeante combinée. Ingénieur, MBA, experte en stratégie IA responsable." accent={TOKENS.violet} />
          <div style={{ marginTop: 40 }}>
            <HostsBand items={[
              { kicker: 'Lead formateur', name: 'Emmanuel Donati', role: 'Ingénieur · MBA · 20+ ans dirigeant', bio: 'Dirigeant depuis 20 ans, expert en gouvernance IA, cadrage stratégique et accompagnement des COMEX sur les enjeux de souveraineté numérique.', accent: TOKENS.violet, seed: 17 },
              { kicker: 'Co-formatrice', name: 'Daphnée Lucenet', role: 'Innovation responsable & stratégie IA', bio: 'Experte en innovation responsable et stratégie IA durable. Accompagne les dirigeants sur l’éthique, la RSE et l’alignement IA-impact organisationnel.', accent: TOKENS.electric, seed: 28 },
            ]} />
          </div>
        </div>
      </section>
      <section style={{ padding: '110px 28px', borderBottom: `1px solid ${line}` }}>
        <div style={{ maxWidth: 1280, margin: '0 auto' }}>
          <SectionTitle eyebrow="Tarifs" title="Deux profils, deux tarifs." copy="Tarif réduit pour les dirigeants en transition. Tarif standard pour ceux en poste, finançable OPCO via Qualiopi." accent={TOKENS.violet} />
          <div style={{ marginTop: 40 }}>
            <CardGrid
              items={[
                { kicker: 'Transition', accent: TOKENS.electric, title: '2 000 € HT.', body: 'Pour les dirigeants en transition. Accès intégral aux 12 semaines : live, masterclass, livrables, communauté, 1:1 flash. Justificatif France Travail.', footer: 'Engagement 12 semaines', seed: 13 },
                { kicker: 'En poste', accent: TOKENS.violet, title: '4 000 € HT.', body: 'Pour les dirigeants en poste. Accès intégral + financement OPCO/Qualiopi + 1 an d’abonnement masterclass actualité incluse.', footer: 'Engagement 12 semaines · OPCO éligible', seed: 22 },
              ]}
            />
          </div>
          <div style={{ marginTop: 36, padding: 28, border: `2px solid ${ink}`, background: paper, textAlign: 'center' }}>
            <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', color: TOKENS.hotpink, marginBottom: 8 }}>· 100 % satisfait ou remboursé</div>
            <div style={{ fontFamily: '"Inter Tight", sans-serif', fontWeight: 800, fontSize: 'clamp(24px, 3.4vw, 32px)', letterSpacing: '-0.02em', color: ink }}>Garantie 15 jours.</div>
            <p style={{ margin: '10px auto 0', fontFamily: 'Inter, sans-serif', fontSize: 14, color: dim, maxWidth: 540 }}>Si après les deux premières semaines le programme ne te convient pas, on te rembourse intégralement, sans questions.</p>
          </div>
        </div>
      </section>
      <section style={{ padding: '110px 28px', borderBottom: `1px solid ${line}` }}>
        <div style={{ maxWidth: 1280, margin: '0 auto' }}>
          <SectionTitle eyebrow="Témoignages" title="Ce qu’en disent les alumni." copy="Six retours sur la pédagogie et l’impact concret du programme." accent={TOKENS.violet} />
          <div style={{ marginTop: 40 }}>
            <TestimonialGrid items={[
              { name: 'Pierre Larregain', role: 'Responsable commercial', quote: 'Emmanuel maîtrise vraiment le sujet et rend facile la compréhension à la fois des enjeux, du choix ainsi que de l’utilisation de l’IA.' },
              { name: 'Catherine Petilon', role: 'CMO', quote: 'Pédagogue et pragmatique, Emmanuel sait rendre accessible l’IA et montrer comment concrètement utiliser l’IA pour créer de la valeur.' },
              { name: 'Sabine Picquet', role: 'Coach de dirigeants', quote: 'Emmanuel a cette capacité à vulgariser l’IA, à trouver les solutions IA qui correspondent vraiment à vos besoins, avec pragmatisme.' },
              { name: 'Catherine Colucci', role: 'Directrice Marketing, R&D & Innovation', quote: 'Emmanuel vous aide à saisir les enjeux, maîtriser les outils, et mettre en œuvre des applications utiles.' },
              { name: 'Valérie Cailliez', role: 'Prospectiviste', quote: 'Pédagogie exemplaire pour expliquer simplement des choses complexes. Des questions concrètes pour prendre de la hauteur et faire des choix avisés.' },
              { name: 'Caroline Kampf', role: 'Les Premières AURA', quote: 'L’intervention d’Emmanuel était très agréable à suivre, plein d’informations pertinentes, de bons tuyaux et d’échanges pratiques. Je recommande !' },
            ]} />
          </div>
        </div>
      </section>
      <section style={{ padding: '110px 28px', borderBottom: `1px solid ${line}` }}>
        <div style={{ maxWidth: 920, margin: '0 auto' }}>
          <SectionTitle eyebrow="FAQ" title="Tes questions, nos réponses." copy="Les questions les plus posées sur le programme Gouvernance." accent={TOKENS.electric} />
          <div style={{ marginTop: 40 }}>
            <FaqList items={[
              { q: 'Combien de temps par semaine dois-je consacrer au programme ?', a: 'Entre 1h et 2h par semaine. Les formats sont courts et actionnables : 1h30 de live stratégique + 30 min de masterclass expert, avec replays accessibles 24/7.' },
              { q: 'Je ne suis pas expert technique, vais-je suivre ?', a: 'Ce programme n’est pas pour les techniciens, il est pour les décideurs. On parle gouvernance, cadre, arbitrages et stratégie · pas code.' },
              { q: 'Comment justifier l’investissement de 4 000 € ?', a: 'Investissement direct en compétences de leader pour la décennie à venir. Parcours personnalisé, accès à un réseau d’experts et de pairs, livrables prêts à déployer.' },
              { q: 'Le programme est-il personnalisé ?', a: 'Oui. Le parcours est personnalisé dès le premier jour via un diagnostic individuel de ta situation et de tes priorités gouvernance.' },
              { q: 'Que faire si je manque une masterclass ?', a: 'Toutes les sessions sont enregistrées et disponibles en replay, accessibles 24/7. Le programme est 100 % flexible.' },
              { q: 'Quelles options de financement ?', a: 'Financement entreprise via plan de développement des compétences. Notre organisme est certifié Qualiopi, ce qui facilite la prise en charge OPCO. Note : non éligible CPF.' },
            ]} />
          </div>
        </div>
      </section>
      <DarkCta eyebrow="Gouvernance" title="Reprends la main sur la stratégie IA." copy="12 semaines pour construire ta gouvernance IA, ton cadre et ton influence auprès du COMEX. La prochaine cohorte démarre bientôt." cta={{ href: 'https://calendar.app.google/rRf5U23YFV7qmZnH8', label: 'Réserver ma place' }} />
    </>
  );
}

function SprintsPage() {
  return (
    <>
      <Hero
        eyebrow="Sprint AI Thématiques"
        title={<>Le chaînon manquant entre la masterclass et le bootcamp<span style={{ color: TOKENS.hotpink }}>.</span></>}
        copy="4 semaines, un sujet précis, des résultats concrets. Tu testes la méthode AI × Leaders sur un sujet qui compte vraiment pour toi."
        primary={{ href: pageHref('contact'), label: 'S’inscrire au prochain sprint' }}
        secondary={{ href: pageHref('programmes'), label: 'Voir tous les programmes' }}
        stats={[
          { value: '4 sem.', label: 'de formation intensive', color: TOKENS.electric },
          { value: '1h30', label: 'live hebdo + exercices', color: TOKENS.hotpink },
          { value: '800-1 500 €', label: 'HT selon le sprint', color: TOKENS.orange },
        ]}
        accent={TOKENS.electric}
        titleScale="page"
        rightImageSrc="uploads/sprints-hero.png"
        rightImageAlt="Sprint AI Thématiques · format intensif AI × Leaders"
        seed={60}
        ctasBelowImage
      />
      <section style={{ padding: '110px 28px', borderBottom: `1px solid ${line}` }}>
        <div style={{ maxWidth: 1280, margin: '0 auto' }}>
          <SectionTitle eyebrow="Catalogue" title="Quatre sprints disponibles." copy="Choisis le sujet qui te bloque le plus en ce moment. Chaque sprint dure 4 semaines et démarre par cohorte." accent={TOKENS.electric} />
          <div style={{ marginTop: 40 }}>
            <ProgramBand items={[
              {
                id: 'sprint-agents',
                tags: ['Sprint #1', '4 semaines', '1 200 € HT'],
                accent: TOKENS.electric,
                seed: 14,
                title: 'Maîtriser les agents IA.',
                body: 'Comprendre, créer et déployer des agents IA pour automatiser tes processus et augmenter tes équipes. Tu repars avec un agent fonctionnel sur un de tes use cases.',
                primary: { href: 'https://calendar.app.google/rRf5U23YFV7qmZnH8', label: 'S’inscrire au sprint Agents' },
                secondary: { href: pageHref('contact') + '#contact-form', label: 'Demander le détail' },
              },
              {
                id: 'sprint-strategy',
                tags: ['Sprint #2', '4 semaines', '1 000 € HT'],
                accent: TOKENS.hotpink,
                seed: 21,
                title: 'Créer ta stratégie IA.',
                body: 'Définir une feuille de route IA claire, alignée avec tes objectifs business et actionnable dès la fin du sprint. Pour fondateurs, C-suite et leaders stratégie.',
                primary: { href: 'https://calendar.app.google/rRf5U23YFV7qmZnH8', label: 'S’inscrire au sprint Stratégie' },
                secondary: { href: pageHref('contact') + '#contact-form', label: 'Demander le détail' },
              },
              {
                id: 'sprint-project',
                tags: ['Sprint #3', '4 semaines', '1 000 € HT'],
                accent: TOKENS.orange,
                seed: 28,
                title: 'Piloter ton premier projet IA.',
                body: 'De l’idée au déploiement : lancer un projet IA concret dans ton entreprise en 4 semaines. Cadrage, équipe, budget, risques, suivi. Tu pars avec un projet en cours.',
                primary: { href: 'https://calendar.app.google/rRf5U23YFV7qmZnH8', label: 'S’inscrire au sprint Projet' },
                secondary: { href: pageHref('contact') + '#contact-form', label: 'Demander le détail' },
              },
              {
                id: 'sprint-sales',
                tags: ['Sprint #4', '4 semaines', '800 € HT'],
                accent: TOKENS.violet,
                seed: 35,
                title: 'Intégrer l’IA dans ton process commercial.',
                body: 'Prospecter, qualifier, convertir : transforme ton cycle de vente avec l’IA comme alliée. Pour CCO, sales leaders et business developers.',
                primary: { href: 'https://calendar.app.google/rRf5U23YFV7qmZnH8', label: 'S’inscrire au sprint Sales' },
                secondary: { href: pageHref('contact') + '#contact-form', label: 'Demander le détail' },
              },
            ]} />
          </div>
        </div>
      </section>
      <section style={{ padding: '110px 28px', borderBottom: `1px solid ${line}` }}>
        <div style={{ maxWidth: 1280, margin: '0 auto' }}>
          <SectionTitle eyebrow="Format" title="Comment se passe un sprint." copy="Sessions live hebdomadaires, exercices pratiques, accès communauté. Pas de cas fictifs : tu travailles sur tes vrais sujets." accent={TOKENS.hotpink} />
          <div style={{ marginTop: 40 }}>
            <CardGrid items={[
              { kicker: '1h30 / semaine', accent: TOKENS.electric, title: 'Sessions live.', body: 'Une session hebdo en cohorte resserrée. Méthode, démos, mises en pratique, retours d’expérience.', footer: '4 sessions en 4 semaines', seed: 12 },
              { kicker: 'Hands-on', accent: TOKENS.hotpink, title: 'Travail sur tes vrais cas.', body: 'Pas de cas fictifs. On bosse sur tes problèmes business réels, avec feedback direct de l’équipe.', footer: 'Exercices pratiques entre sessions', seed: 19 },
              { kicker: 'Ask & Solve', accent: TOKENS.orange, title: 'Accès communauté.', body: 'Tu rejoins la communauté Ask & Solve des participants AI × Leaders pour échanger et chercher des solutions.', footer: 'Plateforme Circle', seed: 26 },
            ]} />
          </div>
          <div style={{ marginTop: 32 }}>
            <MetricsBand items={[
              { value: 'Cohorte', label: 'taille resserrée pour des échanges utiles', color: TOKENS.electric },
              { value: 'Qualiopi', label: 'certifié, finançable OPCO', color: TOKENS.hotpink },
              { value: 'Bridge', label: 'le pont idéal vers le bootcamp 12 semaines', color: TOKENS.orange },
            ]} />
          </div>
        </div>
      </section>
      <DarkCta eyebrow="Sprint" title="4 semaines pour bouger les lignes." copy="Choisis le sprint qui colle à ton sujet du moment. Tu sors avec un résultat concret et une nouvelle façon de bosser avec l’IA." cta={{ href: pageHref('contact'), label: 'S’inscrire au prochain sprint' }} />
    </>
  );
}

function TheCampPage() {
  return (
    <>
      <Hero
        eyebrow="The Camp"
        title={<>Le rendez-vous mensuel des alumni AI × Leaders<span style={{ color: TOKENS.hotpink }}>.</span></>}
        copy="1h30 par mois entre alumni pour rester à la pointe de l’IA, partager des cas concrets et garder le rythme. Plus un écosystème complet pour continuer à progresser."
        primary={{ href: pageHref('contact'), label: 'Je m’inscris à The Camp' }}
        secondary={{ href: pageHref('programmes'), label: 'Voir tous les programmes' }}
        stats={[
          { value: '1h30', label: 'par mois en live', color: TOKENS.violet },
          { value: '6 mois', label: 'engagement minimum', color: TOKENS.hotpink },
          { value: '5 juin 2026', label: 'lancement officiel', color: TOKENS.orange },
        ]}
        accent={TOKENS.violet}
        titleScale="page"
        rightImageSrc="uploads/the-camp-hero.png"
        rightImageAlt="The Camp · communauté alumni AI × Leaders en mouvement avec l'IA"
        ctasBelowImage
        seed={78}
      />
      <section style={{ padding: '110px 28px', borderBottom: `1px solid ${line}` }}>
        <div style={{ maxWidth: 1280, margin: '0 auto' }}>
          <SectionTitle eyebrow="Format" title="Une session par mois, pas plus, pas moins." copy="1 heure de décryptage actualité IA, 30 minutes de partage de cas concrets. En live, en cohorte alumni, hybride Paris ou visio." accent={TOKENS.violet} />
          <div style={{ marginTop: 40 }}>
            <CardGrid items={[
              { kicker: '1 heure', accent: TOKENS.violet, title: 'Décryptage actualité IA.', body: 'Les vraies nouveautés du mois, expliquées avec leur implication concrète pour ton leadership et ton business.', footer: 'Live mensuel', seed: 14 },
              { kicker: '30 minutes', accent: TOKENS.electric, title: 'Partage de cas alumni.', body: '2-3 alumni partagent un cas concret : ce qui a marché, ce qui a coincé, ce qu’ils en retirent. Apprentissage pair à pair.', footer: 'Live mensuel', seed: 21 },
              { kicker: 'Hybride', accent: TOKENS.hotpink, title: 'Visio ou présentiel Paris.', body: 'Tu choisis selon ton agenda et ta géographie. Les sessions présentielles ont lieu à Paris.', footer: 'Replay disponible', seed: 28 },
            ]} />
          </div>
        </div>
      </section>
      <section style={{ padding: '110px 28px', borderBottom: `1px solid ${line}` }}>
        <div style={{ maxWidth: 1280, margin: '0 auto' }}>
          <SectionTitle eyebrow="Inclus" title="Bien plus qu’une session mensuelle." copy="The Camp, c’est un écosystème complet : groupes apprenants, collectifs pro, communauté, afterworks trimestriels." accent={TOKENS.electric} />
          <div style={{ marginTop: 40 }}>
            <CardGrid items={[
              { kicker: 'Groupes apprenants', accent: TOKENS.violet, title: 'Approfondir entre alumni.', body: 'Sous-groupes thématiques pour creuser un sujet en commun (agents, sales, gouvernance, créa).', footer: 'Auto-animés', seed: 12 },
              { kicker: 'Collectifs', accent: TOKENS.electric, title: 'AI × Leaders pro.', body: 'Accès aux collectifs professionnels AI × Leaders : opportunités business, missions, mises en relation.', footer: 'Mises en relation', seed: 19 },
              { kicker: 'LinkedIn', accent: TOKENS.hotpink, title: 'Stratégie LinkedIn Avengers.', body: 'Système d’amplification entre membres pour faire grandir la visibilité de chacun.', footer: 'Coup de boost réciproque', seed: 26 },
              { kicker: 'Circle + WhatsApp', accent: TOKENS.orange, title: 'Espace privé.', body: 'Plateforme Circle pour les ressources + groupe WhatsApp pour les échanges quotidiens.', footer: 'Toujours actif', seed: 33 },
              { kicker: 'Afterworks', accent: TOKENS.violet, title: '1 par trimestre.', body: 'Un afterwork présentiel à Paris tous les 3 mois pour renforcer le réseau et célébrer les progrès.', footer: '4 par an', seed: 40 },
              { kicker: 'Qualiopi', accent: TOKENS.electric, title: 'Finançable OPCO.', body: 'L’engagement 6 mois rend le programme éligible aux financements OPCO via la certification Qualiopi.', footer: 'OPCO éligible', seed: 47 },
            ]} />
          </div>
        </div>
      </section>
      <section style={{ padding: '110px 28px', borderBottom: `1px solid ${line}` }}>
        <div style={{ maxWidth: 1280, margin: '0 auto' }}>
          <SectionTitle eyebrow="Tarifs" title="Deux profils, deux tarifs." copy="Engagement minimum de 6 mois. Tarif transition pour les alumni en repositionnement pro, tarif standard pour ceux en poste." accent={TOKENS.violet} />
          <div style={{ marginTop: 40 }}>
            <CardGrid items={[
              { kicker: 'Transition', accent: TOKENS.electric, title: '150 € HT / mois.', body: 'Pour les alumni en transition professionnelle. Engagement 6 mois (soit 900 € HT total). Contenu strictement identique à l’offre en poste.', footer: 'Engagement 6 mois · OPCO éligible', seed: 13 },
              { kicker: 'En poste', accent: TOKENS.violet, title: '300 € HT / mois.', body: 'Pour les alumni en poste. Engagement 6 mois (soit 1 800 € HT total). Financement OPCO via Qualiopi.', footer: 'Engagement 6 mois · OPCO éligible', seed: 22 },
            ]} />
          </div>
        </div>
      </section>
      <section style={{ padding: '110px 28px', borderBottom: `1px solid ${line}` }}>
        <div style={{ maxWidth: 920, margin: '0 auto' }}>
          <SectionTitle eyebrow="FAQ" title="Tes questions, nos réponses." copy="Les points qu’on nous pose le plus à propos de The Camp." accent={TOKENS.hotpink} />
          <div style={{ marginTop: 40 }}>
            <FaqList items={[
              { q: 'Je n’ai pas fait le bootcamp, je peux quand même m’inscrire ?', a: 'The Camp est réservé aux alumni du AI Leadership Program. En revanche, la première session du 5 juin est ouverte à tous les alumni qui hésitent à rejoindre.' },
              { q: 'Combien de temps ça prend par mois ?', a: '1h30 par mois pour la session. Plus les échanges WhatsApp et Circle selon ton envie (10-15 min/semaine en moyenne).' },
              { q: 'Et si je ne peux pas venir à une session ?', a: 'Les sessions sont enregistrées. Mais la vraie valeur c’est l’échange en live avec le groupe. The Camp n’est pas un programme de replays.' },
              { q: 'Pourquoi un engagement de 6 mois ?', a: 'Parce que c’est le temps nécessaire pour vraiment installer le rythme et tirer la valeur du collectif.' },
              { q: 'Mon OPCO peut financer The Camp ?', a: 'Oui. Le programme est éligible Qualiopi avec l’engagement 6 mois.' },
              { q: 'C’est en visio ou en présentiel ?', a: 'Les deux. Le format est hybride. Selon les sessions, tu peux venir sur place (Paris) ou te connecter en visio.' },
              { q: 'Quelle différence entre 150 € et 300 € ?', a: 'Le contenu est strictement identique. Le tarif 150 € / mois est réservé aux alumni en transition pro.' },
            ]} />
          </div>
        </div>
      </section>
      <DarkCta eyebrow="The Camp" title="Garde le momentum, mois après mois." copy="Tu as fait le bootcamp. Maintenant continue de progresser avec ta cohorte et un écosystème complet. Lancement le 5 juin 2026." cta={{ href: pageHref('contact'), label: 'Je m’inscris à The Camp' }} />
    </>
  );
}

function ContactForm() {
  const [state, setState] = React.useState({ prenom: '', nom: '', email: '', entreprise: '', sujet: 'Bootcamp AI Leadership Program', message: '', optin_newsletter: true });
  const [status, setStatus] = React.useState({ sending: false, ok: false, error: '' });
  const inputStyle = { width: '100%', background: paper, border: `1px solid ${ink}`, padding: '14px 16px', fontFamily: 'Inter, sans-serif', fontSize: 15, color: ink, outline: 'none', boxSizing: 'border-box' };
  const labelStyle = { display: 'block', fontFamily: 'JetBrains Mono, monospace', fontSize: 11, fontWeight: 600, letterSpacing: '0.14em', textTransform: 'uppercase', color: dim, marginBottom: 8 };
  const update = (k, v) => setState((s) => ({ ...s, [k]: v }));
  const submit = async (e) => {
    e.preventDefault();
    if (status.sending) return;
    if (!state.prenom || !state.nom || !state.email || !state.message) { setStatus({ sending: false, ok: false, error: 'Merci de remplir les champs obligatoires.' }); return; }
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(state.email)) { setStatus({ sending: false, ok: false, error: 'Email invalide.' }); return; }
    setStatus({ sending: true, ok: false, error: '' });
    try {
      const res = await fetch('/api/contact', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(state) });
      const data = await res.json();
      if (data.ok) setStatus({ sending: false, ok: true, error: '' });
      else setStatus({ sending: false, ok: false, error: data.error || 'Une erreur est survenue.' });
    } catch (err) {
      setStatus({ sending: false, ok: false, error: 'Erreur réseau. Réessaye.' });
    }
  };
  if (status.ok) {
    return (
      <div style={{ background: paper, border: `1px solid ${ink}`, padding: 48, textAlign: 'center' }}>
        <div style={{ display: 'inline-flex', alignItems: 'center', gap: 10, padding: '6px 12px', border: `1px solid ${ink}`, fontFamily: 'JetBrains Mono, monospace', fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', color: TOKENS.electric, marginBottom: 24 }}>
          <span style={{ width: 6, height: 6, background: TOKENS.electric }} />Message reçu
        </div>
        <h3 style={{ fontFamily: '"Inter Tight", sans-serif', fontWeight: 800, fontSize: 'clamp(28px, 4vw, 38px)', letterSpacing: '-0.03em', lineHeight: 1, margin: '0 0 16px', color: ink }}>Merci <span style={{ color: TOKENS.hotpink }}>{state.prenom}</span>. On revient vers toi sous 48h.</h3>
        <p style={{ fontFamily: 'Inter, sans-serif', fontSize: 16, lineHeight: 1.6, color: dim, maxWidth: 520, margin: '0 auto' }}>L'équipe a reçu ton message. Si c'est urgent, tu peux aussi nous joindre par email : <a href="mailto:contact@ai-x-leaders.com" style={{ color: ink, fontWeight: 600 }}>contact@ai-x-leaders.com</a></p>
      </div>
    );
  }
  return (
    <form onSubmit={submit} style={{ background: paper, border: `1px solid ${ink}`, padding: 'clamp(28px, 4vw, 48px)' }}>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: 20, marginBottom: 20 }}>
        <div>
          <label htmlFor="cf-prenom" style={labelStyle}>Prénom *</label>
          <input id="cf-prenom" type="text" required value={state.prenom} onChange={(e) => update('prenom', e.target.value)} style={inputStyle} placeholder="Marie" />
        </div>
        <div>
          <label htmlFor="cf-nom" style={labelStyle}>Nom *</label>
          <input id="cf-nom" type="text" required value={state.nom} onChange={(e) => update('nom', e.target.value)} style={inputStyle} placeholder="Dupont" />
        </div>
      </div>
      <div style={{ marginBottom: 20 }}>
        <label htmlFor="cf-email" style={labelStyle}>Email *</label>
        <input id="cf-email" type="email" required value={state.email} onChange={(e) => update('email', e.target.value)} style={inputStyle} placeholder="marie@exemple.com" />
      </div>
      <div style={{ marginBottom: 20 }}>
        <label htmlFor="cf-entreprise" style={labelStyle}>Entreprise</label>
        <input id="cf-entreprise" type="text" value={state.entreprise} onChange={(e) => update('entreprise', e.target.value)} style={inputStyle} placeholder="Société, fonction, ou indépendant" />
      </div>
      <div style={{ marginBottom: 20 }}>
        <label htmlFor="cf-sujet" style={labelStyle}>Sujet *</label>
        <select id="cf-sujet" value={state.sujet} onChange={(e) => update('sujet', e.target.value)} style={{ ...inputStyle, appearance: 'none', cursor: 'pointer', backgroundImage: `linear-gradient(45deg, transparent 50%, ${ink} 50%), linear-gradient(135deg, ${ink} 50%, transparent 50%)`, backgroundPosition: 'calc(100% - 22px) center, calc(100% - 16px) center', backgroundSize: '6px 6px, 6px 6px', backgroundRepeat: 'no-repeat', paddingRight: 42 }}>
          {['Bootcamp AI Leadership Program', 'AI Governance Program', 'Sprint AI Thématique', 'The Camp', 'Studio IA (entreprises)', 'Event IA', 'Lab (produits)', 'Masterclass mensuelles', 'Autre sujet'].map((s) => <option key={s} value={s}>{s}</option>)}
        </select>
      </div>
      <div style={{ marginBottom: 20 }}>
        <label htmlFor="cf-message" style={labelStyle}>Message *</label>
        <textarea id="cf-message" required rows={6} value={state.message} onChange={(e) => update('message', e.target.value)} style={{ ...inputStyle, resize: 'vertical', minHeight: 140, fontFamily: 'Inter, sans-serif' }} placeholder="Ton contexte, ton défi, ta question..." />
      </div>
      <label htmlFor="cf-optin" style={{ display: 'flex', alignItems: 'flex-start', gap: 12, cursor: 'pointer', marginBottom: 24, fontFamily: 'Inter, sans-serif', fontSize: 14, color: dim, lineHeight: 1.55 }}>
        <input id="cf-optin" type="checkbox" checked={state.optin_newsletter} onChange={(e) => update('optin_newsletter', e.target.checked)} style={{ width: 18, height: 18, marginTop: 2, accentColor: TOKENS.hotpink, flexShrink: 0 }} />
        <span>Je veux recevoir la newsletter AI x Leaders (1 mail par semaine, désinscription en 1 clic).</span>
      </label>
      {status.error ? (
        <div style={{ padding: '14px 18px', border: `1px solid ${TOKENS.hotpink}`, background: 'rgba(255,79,216,0.06)', fontFamily: 'Inter, sans-serif', fontSize: 14, color: TOKENS.hotpink, marginBottom: 20 }}>{status.error}</div>
      ) : null}
      <button type="submit" disabled={status.sending} style={{ display: 'inline-flex', alignItems: 'center', gap: 12, padding: '16px 28px', background: ink, color: paper, border: 'none', fontFamily: '"Inter Tight", sans-serif', fontSize: 14, fontWeight: 700, letterSpacing: '0.04em', textTransform: 'uppercase', cursor: status.sending ? 'wait' : 'pointer', opacity: status.sending ? 0.6 : 1, transition: 'opacity 0.2s' }}>
        {status.sending ? 'Envoi en cours…' : 'Envoyer le message'} <span style={{ color: TOKENS.hotpink }}>→</span>
      </button>
      <p style={{ marginTop: 18, fontFamily: 'Inter, sans-serif', fontSize: 12, color: dim, lineHeight: 1.55 }}>En soumettant ce formulaire, tu acceptes que ton email soit utilisé par AI x Leaders pour te répondre. Tes données ne sont partagées avec personne.</p>
    </form>
  );
}

function MasterclassTrouverUnJobPage() {
  const [state, setState] = React.useState({ prenom: '', nom: '', email: '', optin_newsletter: true });
  const [status, setStatus] = React.useState({ sending: false, ok: false, error: '' });
  React.useEffect(() => {
    try {
      const stored = sessionStorage.getItem('trouver_access_v2');
      if (stored) {
        const data = JSON.parse(stored);
        if (data && data.ts && (Date.now() - data.ts) < 24 * 60 * 60 * 1000) {
          setStatus({ sending: false, ok: true, error: '' });
          setState((s) => ({ ...s, prenom: data.prenom || '' }));
        }
      }
    } catch (e) {}
  }, []);
  const inputStyle = { width: '100%', background: paper, border: `1px solid ${ink}`, padding: '14px 16px', fontFamily: 'Inter, sans-serif', fontSize: 15, color: ink, outline: 'none', boxSizing: 'border-box' };
  const labelStyle = { display: 'block', fontFamily: 'JetBrains Mono, monospace', fontSize: 11, fontWeight: 600, letterSpacing: '0.14em', textTransform: 'uppercase', color: dim, marginBottom: 8 };
  const update = (k, v) => setState((s) => ({ ...s, [k]: v }));
  const submit = async (e) => {
    e.preventDefault();
    if (status.sending) return;
    if (!state.prenom || !state.nom || !state.email) { setStatus({ sending: false, ok: false, error: 'Merci de remplir tous les champs obligatoires.' }); return; }
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(state.email)) { setStatus({ sending: false, ok: false, error: 'Cet email ne semble pas valide.' }); return; }
    setStatus({ sending: true, ok: false, error: '' });
    try {
      const res = await fetch('/api/trouver-un-job', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(state) });
      const data = await res.json();
      if (data.ok) {
        setStatus({ sending: false, ok: true, error: '' });
        try { sessionStorage.setItem('trouver_access_v2', JSON.stringify({ prenom: state.prenom, ts: Date.now() })); } catch (e) {}
      } else {
        setStatus({ sending: false, ok: false, error: data.error || 'Une erreur est survenue.' });
      }
    } catch (err) {
      setStatus({ sending: false, ok: false, error: 'Erreur réseau. Réessaye.' });
    }
  };
  return (
    <>
      <section style={{ padding: '90px 28px 60px', borderBottom: `1px solid ${line}` }}>
        <div style={{ maxWidth: 920, margin: '0 auto' }}>
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 10, padding: '6px 12px', border: `1px solid ${ink}`, fontFamily: 'JetBrains Mono, monospace', fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', color: TOKENS.hotpink, marginBottom: 24 }}>
            <span style={{ width: 6, height: 6, background: TOKENS.hotpink }} />Masterclass AI × Leaders
          </div>
          <h1 style={{ fontFamily: '"Inter Tight", sans-serif', fontWeight: 800, fontSize: 'clamp(44px, 7vw, 80px)', letterSpacing: '-0.045em', lineHeight: 0.95, margin: '0 0 20px', color: ink }}>
            Trouver un <em style={{ color: TOKENS.hotpink, fontStyle: 'italic' }}>job</em> sans postuler à <em style={{ color: TOKENS.hotpink, fontStyle: 'italic' }}>une seule</em> annonce<span style={{ color: TOKENS.hotpink }}>.</span>
          </h1>
          <p style={{ fontFamily: 'Inter, sans-serif', fontSize: 18, lineHeight: 1.55, color: dim, margin: '0 0 14px', maxWidth: 680 }}>La masterclass qui te montre comment activer ton réseau avec l'IA, et les outils pour passer à l'action tout de suite.</p>
          <p style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 12, letterSpacing: '0.14em', textTransform: 'uppercase', color: ink, margin: 0 }}><span style={{ color: TOKENS.hotpink }}>Lundi 19 mai 2026</span> · 12h</p>
        </div>
      </section>
      <section style={{ padding: '0 28px 80px', borderBottom: `1px solid ${line}` }}>
        <div style={{ maxWidth: 920, margin: '0 auto' }}>
          <img src="/images/masterclass-job-sans-postuler.png" alt="Masterclass : Un job sans postuler" style={{ width: '100%', display: 'block', border: `1px solid ${ink}` }} />
        </div>
      </section>
      <section style={{ padding: '90px 28px', borderBottom: `1px solid ${line}`, background: '#FAFAFA' }}>
        <div style={{ maxWidth: 760, margin: '0 auto' }}>
          {status.ok ? (
            <div style={{ background: paper, border: `1px solid ${ink}`, padding: 'clamp(28px, 4vw, 48px)' }}>
              <div style={{ textAlign: 'center', marginBottom: 32 }}>
                <div style={{ display: 'inline-flex', alignItems: 'center', gap: 10, padding: '6px 12px', border: `1px solid ${ink}`, fontFamily: 'JetBrains Mono, monospace', fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', color: TOKENS.electric, marginBottom: 24 }}>
                  <span style={{ width: 6, height: 6, background: TOKENS.electric }} />Accès débloqué
                </div>
                <h2 style={{ fontFamily: '"Inter Tight", sans-serif', fontWeight: 800, fontSize: 'clamp(30px, 4vw, 42px)', letterSpacing: '-0.03em', lineHeight: 1, margin: '0 0 12px', color: ink }}>Merci {state.prenom ? <span style={{ color: TOKENS.hotpink }}>{state.prenom}</span> : '!'}<span style={{ color: TOKENS.hotpink }}>.</span></h2>
                <p style={{ fontFamily: 'Inter, sans-serif', fontSize: 16, lineHeight: 1.6, color: dim, margin: 0 }}>Voici les éléments de la masterclass <em>Trouver un job sans postuler à une seule offre d'emploi</em>.</p>
              </div>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr', gap: 14 }}>
                {[
                  { icon: '🎤', title: 'La présentation de la masterclass', desc: 'Trouver un job sans postuler · 19 mai 2026', href: '/trouver-un-job/presentation.html', accent: TOKENS.hotpink },
                  { icon: '🧠', title: 'La skill « Le Terrain »', desc: 'Carte d\'activation visuelle, à installer dans Claude (.skill)', href: '/trouver-un-job/le-terrain-masterclass.skill', accent: TOKENS.electric, download: true },
                  { icon: '📊', title: 'Le dashboard modèle', desc: 'L\'exemple complet d\'un dashboard de recherche piloté par IA', href: '/trouver-un-job/dashboard-sonia.html', accent: TOKENS.violet },
                ].map((r) => (
                  <a key={r.title} href={r.href} target="_blank" rel="noopener noreferrer" {...(r.download ? { download: true } : {})} style={{ display: 'flex', alignItems: 'center', gap: 18, background: paper, border: `1px solid ${ink}`, padding: '20px 24px', color: ink, textDecoration: 'none', transition: 'background 0.2s' }}>
                    <div style={{ width: 48, height: 48, border: `1px solid ${ink}`, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 22, flexShrink: 0, background: paper }}>{r.icon}</div>
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <div style={{ fontFamily: '"Inter Tight", sans-serif', fontWeight: 700, fontSize: 16, color: ink, lineHeight: 1.2, marginBottom: 4 }}>{r.title}</div>
                      <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 13, color: dim, lineHeight: 1.4 }}>{r.desc}</div>
                    </div>
                    <span style={{ color: r.accent, fontSize: 20 }}>{r.download ? '↓' : '→'}</span>
                  </a>
                ))}
              </div>
            </div>
          ) : (
            <form onSubmit={submit} style={{ background: paper, border: `1px solid ${ink}`, padding: 'clamp(28px, 4vw, 48px)' }}>
              <div style={{ marginBottom: 28 }}>
                <div style={{ display: 'inline-flex', alignItems: 'center', gap: 10, padding: '6px 12px', border: `1px solid ${ink}`, fontFamily: 'JetBrains Mono, monospace', fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', color: TOKENS.hotpink, marginBottom: 16 }}>
                  <span style={{ width: 6, height: 6, background: TOKENS.hotpink }} />Cadeau
                </div>
                <h2 style={{ fontFamily: '"Inter Tight", sans-serif', fontWeight: 800, fontSize: 'clamp(26px, 3.5vw, 32px)', letterSpacing: '-0.02em', lineHeight: 1.1, margin: '0 0 14px', color: ink }}>Ce que tu vas récupérer<span style={{ color: TOKENS.hotpink }}>.</span></h2>
                <p style={{ fontFamily: 'Inter, sans-serif', fontSize: 15, lineHeight: 1.65, color: dim, margin: '0 0 8px' }}>En t'inscrivant, tu recevras :</p>
                <ul style={{ margin: 0, paddingLeft: 22, fontFamily: 'Inter, sans-serif', fontSize: 15, lineHeight: 1.75, color: dim }}>
                  <li>La <strong style={{ color: ink }}>présentation complète</strong> de la masterclass</li>
                  <li>La skill <strong style={{ color: ink }}>Le Terrain</strong> : carte d'activation visuelle de ton réseau</li>
                  <li>Le <strong style={{ color: ink }}>dashboard modèle</strong> pour piloter ta recherche</li>
                </ul>
              </div>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: 20, marginBottom: 20 }}>
                <div>
                  <label htmlFor="tj-prenom" style={labelStyle}>Prénom *</label>
                  <input id="tj-prenom" type="text" required value={state.prenom} onChange={(e) => update('prenom', e.target.value)} style={inputStyle} placeholder="Marie" />
                </div>
                <div>
                  <label htmlFor="tj-nom" style={labelStyle}>Nom *</label>
                  <input id="tj-nom" type="text" required value={state.nom} onChange={(e) => update('nom', e.target.value)} style={inputStyle} placeholder="Dupont" />
                </div>
              </div>
              <div style={{ marginBottom: 20 }}>
                <label htmlFor="tj-email" style={labelStyle}>Email *</label>
                <input id="tj-email" type="email" required value={state.email} onChange={(e) => update('email', e.target.value)} style={inputStyle} placeholder="marie@exemple.com" />
              </div>
              <label htmlFor="tj-optin" style={{ display: 'flex', alignItems: 'flex-start', gap: 12, cursor: 'pointer', marginBottom: 24, fontFamily: 'Inter, sans-serif', fontSize: 14, color: dim, lineHeight: 1.55 }}>
                <input id="tj-optin" type="checkbox" checked={state.optin_newsletter} onChange={(e) => update('optin_newsletter', e.target.checked)} style={{ width: 18, height: 18, marginTop: 2, accentColor: TOKENS.hotpink, flexShrink: 0 }} />
                <span>Je veux recevoir la newsletter <a href="https://aixleaders.substack.com" target="_blank" rel="noopener" style={{ color: ink, fontWeight: 600 }}>AI x Leaders</a> (1 mail/semaine, désinscription en 1 clic).</span>
              </label>
              {status.error ? (
                <div style={{ padding: '14px 18px', border: `1px solid ${TOKENS.hotpink}`, background: 'rgba(255,79,216,0.06)', fontFamily: 'Inter, sans-serif', fontSize: 14, color: TOKENS.hotpink, marginBottom: 20 }}>{status.error}</div>
              ) : null}
              <button type="submit" disabled={status.sending} style={{ display: 'inline-flex', alignItems: 'center', gap: 12, padding: '16px 28px', background: ink, color: paper, border: 'none', fontFamily: '"Inter Tight", sans-serif', fontSize: 14, fontWeight: 700, letterSpacing: '0.04em', textTransform: 'uppercase', cursor: status.sending ? 'wait' : 'pointer', opacity: status.sending ? 0.6 : 1 }}>
                {status.sending ? 'Envoi en cours…' : 'Accéder aux ressources'} <span style={{ color: TOKENS.hotpink }}>→</span>
              </button>
              <p style={{ marginTop: 18, fontFamily: 'Inter, sans-serif', fontSize: 12, color: dim, lineHeight: 1.55 }}>En soumettant ce formulaire, tu acceptes que ton email soit utilisé par AI x Leaders pour t'envoyer les ressources. Pas de spam.</p>
            </form>
          )}
        </div>
      </section>
      {status.ok ? (
        <section style={{ padding: '90px 28px', borderBottom: `1px solid ${line}` }}>
          <div style={{ maxWidth: 920, margin: '0 auto' }}>
            <div style={{ background: ink, color: paper, padding: 'clamp(36px, 5vw, 56px)' }}>
              <div style={{ display: 'inline-flex', alignItems: 'center', gap: 10, padding: '6px 12px', border: `1px solid ${paper}`, fontFamily: 'JetBrains Mono, monospace', fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', color: paper, marginBottom: 24 }}>
                <span style={{ width: 6, height: 6, background: TOKENS.hotpink }} />Prochaine session · 27 mai
              </div>
              <h3 style={{ fontFamily: '"Inter Tight", sans-serif', fontWeight: 800, fontSize: 'clamp(28px, 4vw, 38px)', letterSpacing: '-0.03em', lineHeight: 1, margin: '0 0 14px' }}>Tu veux aller plus loin avec l'IA<span style={{ color: TOKENS.hotpink }}>?</span></h3>
              <p style={{ fontFamily: 'Inter, sans-serif', fontSize: 16, lineHeight: 1.65, opacity: 0.85, maxWidth: 520, margin: '0 0 28px' }}>Le <strong>AI Leadership Program</strong> est notre bootcamp par intelligence collective pour les dirigeants C-level. 3 mois pour passer de spectateur à pilote de l'IA. Prochaine session : <strong style={{ color: TOKENS.hotpink }}>27 mai</strong>.</p>
              <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
                <a href={pageHref('aiLeadership')} style={{ background: paper, color: ink, padding: '14px 22px', fontFamily: '"Inter Tight", sans-serif', fontSize: 13, fontWeight: 700, letterSpacing: '0.04em', textTransform: 'uppercase', textDecoration: 'none', display: 'inline-flex', alignItems: 'center', gap: 8 }}>Voir le programme <span style={{ color: TOKENS.hotpink }}>→</span></a>
                <a href="https://calendar.google.com/calendar/u/0/appointments/schedules/AcZssZ0_q5-x-ioV1u1LX14OWc0173SZ-PggEc4mIoloDaCO-YkaCGJ8TN6y-vdkCDlGhutsUXpMvR-w" target="_blank" rel="noopener" style={{ background: 'transparent', color: paper, border: `1px solid ${paper}`, padding: '14px 22px', fontFamily: '"Inter Tight", sans-serif', fontSize: 13, fontWeight: 700, letterSpacing: '0.04em', textTransform: 'uppercase', textDecoration: 'none', display: 'inline-flex', alignItems: 'center', gap: 8 }}>RDV pour rejoindre</a>
              </div>
            </div>
          </div>
        </section>
      ) : null}
    </>
  );
}

function ContactPage() {
  return (
    <>
      <Hero
        eyebrow="Contact"
        title={<>Une question ? On revient vers toi sous 48h<span style={{ color: TOKENS.hotpink }}>.</span></>}
        copy="Programmes, événements, services entreprises, masterclass, Lab : on est dispo pour échanger sur ce qui te concerne. Email, appel découverte ou rendez-vous direct."
        primary={{ href: '#contact-form', label: 'Remplir le formulaire' }}
        secondary={{ href: 'https://calendar.app.google/rRf5U23YFV7qmZnH8', label: 'Réserver un appel 30 min' }}
        stats={[
          { value: '48h', label: 'temps de réponse moyen', color: TOKENS.hotpink },
          { value: '30 min', label: 'd’appel découverte gratuit', color: TOKENS.electric },
          { value: 'Lyon', label: 'siège · interventions partout', color: TOKENS.orange },
        ]}
        accent={TOKENS.hotpink}
        titleScale="page"
        rightTitle="Le bon point d’entrée dépend de ton contexte. On t’aide à le trouver en 30 minutes."
        rightBody="Si tu hésites entre un programme individuel et un dispositif équipe, entre un format court et un parcours long, ou si tu veux briefer un événement, on cadre ensemble."
        seed={91}
      />
      <section id="contact-form" style={{ padding: '110px 28px', borderBottom: `1px solid ${line}`, background: '#FAFAFA', scrollMarginTop: 80 }}>
        <div style={{ maxWidth: 760, margin: '0 auto' }}>
          <SectionTitle eyebrow="Formulaire" title={<>Dis-nous en plus<span style={{ color: TOKENS.hotpink }}>.</span></>} copy="Décris ton contexte et le sujet qui t'intéresse. On revient vers toi sous 48 heures." accent={TOKENS.hotpink} center />
          <div style={{ marginTop: 40 }}>
            <ContactForm />
          </div>
        </div>
      </section>
      <section style={{ padding: '110px 28px', borderBottom: `1px solid ${line}` }}>
        <div style={{ maxWidth: 1280, margin: '0 auto' }}>
          <SectionTitle eyebrow="Trois voies de contact" title="Choisis le canal qui te convient." copy="Email pour les questions précises. Google Calendar pour un échange direct. Coordonnées si tu préfères passer par le téléphone ou la lettre." accent={TOKENS.electric} />
          <div style={{ marginTop: 40 }}>
            <CardGrid
              items={[
                { kicker: 'Email', accent: TOKENS.hotpink, title: 'contact@ai-x-leaders.com', body: 'Pour toute question sur les programmes, événements, services entreprises ou candidature au bootcamp. Réponse sous 48 heures.', footer: 'elodie@ai-x-leaders.com pour Élodie directement', seed: 12 },
                { kicker: 'Agenda', accent: TOKENS.electric, title: 'Appel découverte 30 min.', body: 'Si tu veux échanger directement avec l’équipe sur ton contexte, choisis un créneau qui te convient sur l’agenda Google.', footer: 'calendar.app.google/rRf5U23YFV7qmZnH8', seed: 19 },
                { kicker: 'Adresse', accent: TOKENS.orange, title: '14 rue Artaud, 69004 Lyon.', body: 'Siège social. Pour les rendez-vous physiques sur Paris ou ailleurs, on s’adapte à ton calendrier et tes contraintes géographiques.', footer: 'BFC Group SAS · SIREN 830 940 979', seed: 26 },
              ]}
            />
          </div>
        </div>
      </section>
      <section style={{ padding: '110px 28px', borderBottom: `1px solid ${line}` }}>
        <div style={{ maxWidth: 960, margin: '0 auto', textAlign: 'center' }}>
          <SectionTitle eyebrow="Communautés" title="Reste connecté entre deux échanges." copy="Notre newsletter hebdo, notre communauté Circle pour les abonnés masterclass, notre WhatsApp alumni : choisis ton format." accent={TOKENS.violet} center />
          <div style={{ marginTop: 30, display: 'flex', justifyContent: 'center', gap: 12, flexWrap: 'wrap' }}>
            <Btn href="https://aixleaders.substack.com/" variant="primary" size="lg" icon>S’inscrire à la newsletter</Btn>
            <Btn href="https://www.linkedin.com/company/ai-x-leaders" variant="ghost" size="lg">Suivre sur LinkedIn</Btn>
          </div>
        </div>
      </section>
      <DarkCta eyebrow="Pressé ?" title="Réserve directement 30 minutes." copy="Si tu sais déjà ce que tu veux explorer, autant gagner du temps. Choisis un créneau sur l’agenda Google et on cale ça." cta={{ href: 'https://calendar.app.google/rRf5U23YFV7qmZnH8', label: 'Voir les créneaux dispo' }} />
    </>
  );
}

function LegalPage({ eyebrow, title, lastUpdated, intro, sections }) {
  return (
    <>
      <section style={{ padding: '110px 28px 80px', borderBottom: `1px solid ${line}` }}>
        <div style={{ maxWidth: 920, margin: '0 auto' }}>
          <Eyebrow color={TOKENS.violet}>{eyebrow}</Eyebrow>
          <h1 style={{ fontFamily: '"Inter Tight", sans-serif', fontWeight: 800, fontSize: 'clamp(42px, 6vw, 76px)', letterSpacing: '-0.05em', lineHeight: 0.95, margin: '22px 0 18px', color: ink }}>{title}</h1>
          <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 12, letterSpacing: '0.14em', textTransform: 'uppercase', color: dim }}>Dernière mise à jour : {lastUpdated}</div>
          {intro ? <p style={{ margin: '32px 0 0', fontFamily: 'Inter, sans-serif', fontSize: 17, lineHeight: 1.65, color: dim, maxWidth: 720 }}>{intro}</p> : null}
        </div>
      </section>
      <section style={{ padding: '60px 28px 110px' }}>
        <div style={{ maxWidth: 920, margin: '0 auto', display: 'flex', flexDirection: 'column', gap: 56 }}>
          {sections.map((s, idx) => (
            <div key={idx} style={{ borderLeft: `2px solid ${TOKENS.hotpink}`, paddingLeft: 24 }}>
              <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', color: dim, marginBottom: 6 }}>{String(idx + 1).padStart(2, '0')}</div>
              <h2 style={{ fontFamily: '"Inter Tight", sans-serif', fontWeight: 800, fontSize: 'clamp(26px, 3.4vw, 34px)', letterSpacing: '-0.03em', lineHeight: 1.05, margin: '0 0 14px', color: ink }}>{s.title}</h2>
              <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 15, lineHeight: 1.72, color: ink, whiteSpace: 'pre-wrap' }}>{s.body}</div>
            </div>
          ))}
        </div>
      </section>
    </>
  );
}

function CGVPage() {
  return (
    <LegalPage
      eyebrow="Légal"
      title="Conditions générales de vente."
      lastUpdated="18 mars 2026"
      intro="Les présentes CGV s’appliquent à tous les services et produits proposés par AI × Leaders / BFC Group SAS : bootcamps, masterclass, coaching, événements, services Studio IA, produits du Lab. Toute inscription vaut acceptation des présentes."
      sections={[
        { title: 'Objet et champ d’application', body: 'Les présentes Conditions Générales de Vente (CGV) régissent toutes les ventes de services et produits proposés par AI × Leaders, exploités par BFC Group SAS. Elles s’appliquent à tous les programmes de formation, abonnements masterclass, services de coaching et conseil, prestations d’événementiel, produits IA (NegoBrain, Story Studio, etc.) et services Studio IA B2B. Toute commande, inscription ou utilisation de nos services emporte acceptation pleine et entière des présentes CGV.' },
        { title: 'Inscription et processus de commande', body: 'L’inscription nécessite des informations exactes et complètes : nom complet, email, téléphone, organisation (le cas échéant) et coordonnées de paiement. AI × Leaders se réserve le droit de refuser une inscription en cas d’informations fausses ou de violation des présentes CGV.' },
        { title: 'Prix et conditions de paiement', body: 'Les prix sont indiqués en euros, soumis à la TVA française applicable. Moyens de paiement acceptés : virement bancaire, carte (Visa, Mastercard), Stripe.\n\nBootcamps et coaching : 50 % d’acompte à l’inscription, solde dû 7 jours avant le début du programme.\n\nMasterclass : paiement intégral à l’inscription, accès immédiat.\n\nÉvénements : devis sur mesure, 30 % d’acompte pour réserver la date, solde 14 jours avant.\n\nFactures dues sous 30 jours.' },
        { title: 'Retard de paiement', body: 'En cas de non-paiement à échéance : relance sous 14 jours, puis pénalité de 10 % de la somme due en cas de retard prolongé. Intérêts au taux légal (5 % annuel) au-delà de 30 jours. Les frais de recouvrement peuvent être facturés au client.' },
        { title: 'Droit de rétractation', body: 'Conformément au droit français de la consommation, les particuliers (non-professionnels) disposent d’un délai de 14 jours pour exercer leur droit de rétractation. Demande à envoyer par écrit à elodie@ai-x-leaders.com avec le numéro d’inscription.\n\nExceptions : services déjà commencés (masterclass suivies, sessions de coaching réalisées), contenus numériques déjà consultés, services personnalisés, événements ayant déjà eu lieu.' },
        { title: 'Annulation et report', body: 'Annulation client (bootcamps, sprints, The Camp) :\n\nPlus de 30 jours avant le début : remboursement intégral (hors frais de réservation non remboursables).\n\n15 à 30 jours avant : 30 % conservés, 70 % remboursés.\n\nMoins de 15 jours : pas de remboursement, mais avoir valable 12 mois.\n\nReport vers une cohorte ultérieure : sans frais si demandé 30+ jours avant le début, 15 % de frais entre 15 et 30 jours, impossible à moins de 15 jours.' },
        { title: 'Exécution des prestations', body: 'Les bootcamps et programmes sont délivrés principalement en ligne via Circle et Zoom, avec quelques sessions présentielles à Paris pour certaines cohortes. Les enregistrements sont accessibles 12 mois après le programme. Le coaching se fait en visio ou en présentiel à Paris. Les masterclass mensuelles sont en live Zoom, replay disponible sous 24h pour les abonnés.' },
        { title: 'Propriété intellectuelle', body: 'L’ensemble des contenus créés par AI × Leaders (supports de cours, enregistrements, outils, méthodologies, rapports) reste la propriété exclusive d’AI × Leaders / BFC Group SAS. Le client bénéficie d’une licence personnelle, non transférable et non exclusive, à usage strictement individuel ou interne (pour les licences groupe).' },
        { title: 'Limitation de responsabilité', body: 'AI × Leaders fournit ses services « en l’état », sans garantie de résultats spécifiques. La responsabilité est limitée au montant payé pour le service en question. Exceptions : dommages corporels par négligence, fraude ou faute lourde, violation des lois de protection des consommateurs.' },
        { title: 'Données personnelles et RGPD', body: 'Les données client sont collectées et traitées conformément à la loi française et au RGPD. Voir la Politique de Confidentialité pour le détail des données collectées, traitements, durées de conservation et droits des utilisateurs.' },
        { title: 'Litiges et droit applicable', body: 'Les présentes CGV sont régies par le droit français. Tout litige sera résolu par : négociation amiable (30 jours), médiation, puis tribunal compétent à Lyon. Les consommateurs conservent leur droit de saisir le tribunal d’instance.' },
        { title: 'Force majeure et modifications', body: 'AI × Leaders n’est pas responsable des défaillances dues à des cas de force majeure (catastrophes, pandémies, mesures gouvernementales, défaillances d’infrastructure). Les présentes CGV peuvent être modifiées à tout moment, prise d’effet 14 jours après publication. Contact : elodie@ai-x-leaders.com · 14 rue Artaud, 69004 Lyon.' },
      ]}
    />
  );
}

function MentionsPage() {
  return (
    <LegalPage
      eyebrow="Légal"
      title="Mentions légales."
      lastUpdated="18 mars 2026"
      intro="Informations légales relatives au site ai-x-leaders.com, conformément à la loi française pour la confiance dans l’économie numérique (LCEN)."
      sections={[
        { title: 'Éditeur du site', body: 'BFC GROUP SAS\nSIREN : 830 940 979\n14 rue Artaud, 69004 Lyon, France\nEmail : contact@ai-x-leaders.com\n\nDirectrice de la publication : Élodie Hughes, fondatrice et CEO.\nContact webmaster : elodie@ai-x-leaders.com' },
        { title: 'Hébergement', body: 'Cloudflare, Inc.\n101 Townsend Street\nSan Francisco, CA 94107, USA\nwww.cloudflare.com\n\nL’hébergeur assure l’infrastructure, le DNS, la sécurité (protection DDoS) et la distribution de contenu (CDN).' },
        { title: 'Propriété intellectuelle', body: 'L’ensemble du contenu du site ai-x-leaders.com (textes, images, vidéos, contenus de formation, méthodologies, outils, logos, design) est la propriété exclusive d’AI × Leaders / BFC Group SAS. © 2016-2026. Tous droits réservés.\n\nUsage autorisé : consultation et lecture pour usage personnel non commercial, partage de liens vers le site.\n\nUsage interdit : reproduction, distribution, modification, scraping systématique, retrait des mentions de copyright, usage commercial, création d’œuvres dérivées, utilisation dans des produits concurrents.' },
        { title: 'Limitation de responsabilité', body: 'AI × Leaders met tout en œuvre pour assurer l’exactitude et la mise à jour des informations. Toutefois, le site est fourni « en l’état », sans garantie. Des erreurs ou omissions peuvent subsister. Les liens vers des sites externes sont fournis pour information : AI × Leaders ne contrôle pas leurs contenus.' },
        { title: 'Liens hypertextes', body: 'Les liens externes vers ai-x-leaders.com sont autorisés sous conditions : le lien pointe vers la page d’accueil ou les pages principales, il ne dénature pas AI × Leaders ou ses services, le site source est conforme à la loi. AI × Leaders se réserve le droit de demander la suppression d’un lien.' },
        { title: 'Cookies et données', body: 'Ce site utilise des cookies pour améliorer l’expérience, analyser le trafic, mémoriser les préférences et activer le marketing. Trois catégories : nécessaires (sans consentement, indispensables), analytiques (Google Analytics, avec consentement), marketing (Facebook Pixel, avec consentement).\n\nGestion : paramètres du navigateur, bandeau cookies en visite, contact à elodie@ai-x-leaders.com.' },
        { title: 'Données personnelles et RGPD', body: 'Pour le détail du traitement des données personnelles, consultez la Politique de Confidentialité. Résumé : données collectées pour des finalités identifiées, traitement conforme au RGPD, droits utilisateurs (accès, rectification, effacement, portabilité), aucune vente à des tiers, sous-traitants soigneusement sélectionnés. Contact : elodie@ai-x-leaders.com.' },
        { title: 'Droit applicable et juridiction', body: 'Les présentes mentions légales et l’ensemble des conditions du site sont régies par le droit français (Code civil, RGPD, droit de la consommation, code de la propriété intellectuelle). Tribunaux compétents : Lyon, France.' },
        { title: 'Contact', body: 'Pour toute question légale, signalement de violation ou demande de retrait :\nEmail : elodie@ai-x-leaders.com\nAdresse postale : 14 rue Artaud, 69004 Lyon, France.' },
      ]}
    />
  );
}

function PrivacyPage() {
  return (
    <LegalPage
      eyebrow="Légal"
      title="Politique de confidentialité."
      lastUpdated="18 mars 2026"
      intro="AI × Leaders (BFC Group SAS) respecte ta vie privée et s’engage à protéger tes données personnelles, conformément à la loi française et au RGPD. Cette politique explique ce qu’on collecte, pourquoi, comment, et tes droits."
      sections={[
        { title: 'Responsable du traitement', body: 'AI × Leaders / BFC GROUP SAS\n14 rue Artaud, 69004 Lyon, France\nSIREN : 830 940 979\nEmail : elodie@ai-x-leaders.com\n\nDélégué à la protection des données : elodie@ai-x-leaders.com\nDélai de réponse : 30 jours.' },
        { title: 'Données collectées', body: 'Données fournies directement : nom, email, téléphone, organisation, fonction, informations de paiement (traitées via Stripe, non stockées), historique de communication, contenu publié dans la communauté Circle.\n\nDonnées collectées automatiquement : type de navigateur, OS, adresse IP, pages visitées, durée de visite, source de provenance, type d’appareil. Cookies (nécessaires, analytiques, marketing).\n\nDonnées plateforme apprentissage : présence aux masterclass, taux de complétion vidéo, participation communautaire.\n\nDonnées sensibles : non collectées sauf nécessité (accessibilité, accommodements santé).' },
        { title: 'Base légale du traitement', body: 'Exécution du contrat (article 6.1.b RGPD) : inscription aux programmes, paiement, accès aux plateformes.\n\nObligation légale (article 6.1.c RGPD) : comptabilité, factures (conservation 10 ans), certification Qualiopi, financement OPCO.\n\nIntérêt légitime (article 6.1.f RGPD) : analytics, marketing avec opt-out, prévention de la fraude, gestion de la relation client.\n\nConsentement (article 6.1.a RGPD) : newsletter, cookies analytiques et marketing, publication dans la communauté, photographies événementielles.' },
        { title: 'Utilisation des données', body: 'Délivrance de services (inscription, accès aux plateformes, scheduling), communication (mises à jour, factures, support), marketing avec consentement (newsletter, invitations à de nouveaux programmes), analytics (amélioration du site et des programmes), gestion de la communauté Circle, obligations légales (comptabilité, Qualiopi, OPCO).' },
        { title: 'Destinataires des données', body: 'Interne : équipe AI × Leaders, coachs, gestionnaires de communauté, comptabilité, support.\n\nSous-traitants : Circle (communauté, US), Zoom (visio), SendGrid (emails), Calendly (rendez-vous), Stripe (paiements PCI-DSS), Cloudflare (hébergement), Google Analytics, Meta/Facebook (pixel), Mailchimp ou équivalent (marketing email).\n\nTous les sous-traitants ont signé un DPA conforme au RGPD. Aucune vente de données à des tiers.\n\nTransferts hors UE (US notamment) : Clauses Contractuelles Types (SCC), analyses d’impact (DPIA), décisions d’adéquation quand disponibles.' },
        { title: 'Durée de conservation', body: 'Données d’identité : durée du contrat + 3 ans.\n\nDonnées de paiement et factures : 10 ans (obligation fiscale française).\n\nDonnées d’apprentissage : durée du contrat + 3 ans.\n\nCookies : session (fin de session), analytiques (13-14 mois), marketing (6-12 mois).\n\nNewsletter : 3 ans d’engagement, ou jusqu’à désinscription (puis 30 jours).\n\nÉvénements : 3 ans pour les listes de présence.\n\nLitiges et conservation légale : jusqu’à résolution.' },
        { title: 'Tes droits RGPD', body: 'Droit d’accès : connaître les données détenues, recevoir une copie.\n\nDroit de rectification : corriger les données inexactes.\n\nDroit à l’effacement (à l’oubli) : demander la suppression (sauf obligations légales).\n\nDroit à la portabilité : recevoir tes données dans un format lisible par machine.\n\nDroit à la limitation : limiter l’utilisation de tes données.\n\nDroit d’opposition : t’opposer au marketing, au profilage, aux traitements basés sur l’intérêt légitime.\n\nDroit de retirer ton consentement à tout moment.\n\nDroits post-mortem : possibilité de définir le devenir de tes données après ton décès.\n\nExercice : email à elodie@ai-x-leaders.com avec ton identité, le droit invoqué et la nature précise de ta demande. Réponse sous 30 jours.' },
        { title: 'Sécurité', body: 'Mesures techniques : chiffrement HTTPS/TLS, chiffrement des données sensibles au repos, contrôles d’accès stricts, infrastructure Cloudflare (firewall, détection d’intrusion), audits de sécurité annuels, scans de vulnérabilités continus.\n\nMesures organisationnelles : formation à la protection des données, NDA signés par tous les collaborateurs, accès restreints aux seules personnes autorisées, procédure de gestion des incidents.\n\nLimites : aucun système n’est 100 % sécurisé. Recommandations : mots de passe forts, 2FA, ne pas partager d’infos sensibles.' },
        { title: 'Cookies', body: 'Cookies nécessaires (sans consentement) : identification de session, sécurité, fonctionnement de la plateforme, gestion du consentement RGPD.\n\nCookies analytiques (avec consentement) : Google Analytics, métriques de performance, anonymisés et agrégés. Durée : 13-14 mois.\n\nCookies marketing (avec consentement) : Facebook Pixel, Google Ads, retargeting. Durée : variable selon le fournisseur.\n\nGestion : bandeau cookies à la première visite, lien préférences en pied de page, paramètres du navigateur, contact elodie@ai-x-leaders.com.' },
        { title: 'Plaintes et CNIL', body: 'En cas de désaccord avec notre réponse :\n\n1) Demande de réexamen interne : elodie@ai-x-leaders.com (sous 30 jours).\n\n2) Plainte CNIL (Commission Nationale de l’Informatique et des Libertés) : www.cnil.fr, gratuite. 3 Place de Fontenoy, 75007 Paris.\n\n3) Recours juridique : action devant les tribunaux français pour violation de la protection des données.' },
        { title: 'Mises à jour', body: 'Dernière mise à jour : 18 mars 2026. Cette politique peut évoluer périodiquement. Les changements significatifs feront l’objet d’une notification par email. Les versions précédentes sont disponibles sur demande à elodie@ai-x-leaders.com.' },
      ]}
    />
  );
}

function SitePage() {
  const currentKey = window.AIX_SITE_PAGE && SITE_PAGES[window.AIX_SITE_PAGE] ? window.AIX_SITE_PAGE : 'home';
  React.useEffect(() => {
    document.title = SITE_PAGES[currentKey].title;
  }, [currentKey]);

  const pages = {
    home: HomePage,
    programmes: ProgrammesPage,
    aiLeadership: AILeadershipPage,
    aiGovernance: AIGovernancePage,
    sprints: SprintsPage,
    theCamp: TheCampPage,
    studio: StudioPage,
    event: EventPage,
    ressources: RessourcesPage,
    lab: LabPage,
    about: AboutPage,
    contact: ContactPage,
    cgv: CGVPage,
    mentions: MentionsPage,
    privacy: PrivacyPage,
    masterclassTrouverUnJob: MasterclassTrouverUnJobPage,
  };

  const CurrentPage = pages[currentKey] || HomePage;

  return (
    <div style={{ background: paper, color: ink, minHeight: '100vh' }}>
      <SiteNav currentKey={currentKey} />
      <CurrentPage />
      <SiteFooter />
    </div>
  );
}

Object.assign(window, { SITE_PAGES, SitePage });

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