/* global React */
const { useState, useEffect, useRef } = React;

/* =========================================================
   LOGO COMPONENT (inline SVG)
========================================================= */
const Picto = ({ size = 32, variant = 'sapin', radius }) => {
  const fill = variant === 'sapin' ? '#1F4D3E' :
  variant === 'menthe' ? '#B8E6CF' :
  variant === 'profond' ? '#0F3329' :
  variant === 'blanc' ? '#FFFFFF' :
  '#1F4D3E';
  const stroke = variant === 'menthe' ? '#1F4D3E' : '#FFFFFF';
  const rx = radius ?? Math.round(size * 14 / 64);
  return (
    <svg width={size} height={size} viewBox="0 0 64 64" style={{ display: 'block', flexShrink: 0 }}>
      <rect width="64" height="64" rx="14" fill={fill} />
      <path d="M 14 32 Q 28 60, 50 20" stroke={stroke} strokeWidth="6" strokeLinecap="round" fill="none" />
    </svg>);

};

const Logo = ({ size = 32, dark = false }) =>
<span className="logo-wrap">
    <Picto size={size} variant={dark ? 'blanc' : 'sapin'} />
    <span className="logo-text" style={{ color: dark ? '#FFFFFF' : '#1F2937' }}>virage</span>
  </span>;


/* =========================================================
   HEADER
========================================================= */
const NAV_ITEMS = [
  { label: 'Produit', href: '/produit' },
  { label: 'Tarifs', href: '/tarifs' },
  { label: 'Manifeste', href: '/manifeste' },
  { label: 'Newsletter', href: '/newsletter' },
  { label: 'FAQ', href: '/faq' },
];

const isActiveNav = (href) => {
  if (typeof window === 'undefined') return false;
  const path = window.location.pathname.replace(/\/$/, '') || '/';
  return path === href || path === href + '.html';
};

const Header = () => {
  const [scrolled, setScrolled] = useState(false);
  const [menuOpen, setMenuOpen] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 12);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <header style={{
      position: 'sticky', top: 0, zIndex: 50,
      background: scrolled || menuOpen ? 'rgba(245, 241, 234, 0.95)' : 'transparent',
      backdropFilter: scrolled || menuOpen ? 'blur(12px)' : 'none',
      borderBottom: scrolled || menuOpen ? '1px solid var(--hairline)' : '1px solid transparent',
      transition: 'all 220ms ease'
    }}>
      <div className="container" style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        height: 76
      }}>
        <a href="/" aria-label="Virage — accueil" style={{ display: 'inline-flex', alignItems: 'center', gap: 14 }}>
          <Logo size={36} />
          <span style={{
            fontSize: 12, color: 'var(--texte-mute)', fontWeight: 500,
            paddingLeft: 14, borderLeft: '1px solid var(--hairline-strong)',
            letterSpacing: '-0.005em', lineHeight: 1.3, maxWidth: 180
          }} className="header-tagline">
            Plateforme collaborative<br />de formation IA
          </span>
        </a>
        <nav style={{ display: 'flex', gap: 4, alignItems: 'center' }} className="header-nav">
          {NAV_ITEMS.map((item) => {
            const active = isActiveNav(item.href);
            return (
              <a key={item.href} href={item.href} className="btn-ghost" style={{
                padding: '10px 16px', fontSize: 15, fontWeight: active ? 600 : 500,
                color: active ? 'var(--vert-sapin)' : 'var(--texte)',
                borderRadius: 999, transition: 'color 150ms ease'
              }}
              onMouseOver={(e) => e.currentTarget.style.color = 'var(--vert-sapin)'}
              onMouseOut={(e) => e.currentTarget.style.color = active ? 'var(--vert-sapin)' : 'var(--texte)'}>
                {item.label}
              </a>
            );
          })}
        </nav>
        <div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
          <a href="https://app.virage.dev/login" className="btn btn-ghost" style={{ fontSize: 15 }}>Se connecter</a>
          <a href="#demo" onClick={(e) => { e.preventDefault(); window.openVirageDemo(); }} className="btn btn-primary">
            Demander une démo
            <svg className="arrow" width="14" height="14" viewBox="0 0 14 14" fill="none">
              <path d="M2 7h10M8 3l4 4-4 4" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
            </svg>
          </a>
          <button
            aria-label="Menu"
            aria-expanded={menuOpen}
            onClick={() => setMenuOpen((v) => !v)}
            className="header-burger"
            style={{
              display: 'none', alignItems: 'center', justifyContent: 'center',
              width: 40, height: 40, borderRadius: 999, color: 'var(--texte)'
            }}>
            <svg width="22" height="22" viewBox="0 0 22 22" fill="none">
              {menuOpen ? (
                <path d="M5 5l12 12M17 5L5 17" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" />
              ) : (
                <>
                  <path d="M3 7h16" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" />
                  <path d="M3 15h16" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" />
                </>
              )}
            </svg>
          </button>
        </div>
      </div>

      {menuOpen && (
        <div className="header-mobile-menu" style={{
          padding: '8px 0 24px',
          borderTop: '1px solid var(--hairline)',
          background: 'rgba(245, 241, 234, 0.95)'
        }}>
          <div className="container" style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
            {NAV_ITEMS.map((item) => {
              const active = isActiveNav(item.href);
              return (
                <a key={item.href} href={item.href} style={{
                  padding: '14px 12px', fontSize: 17, fontWeight: 600,
                  color: active ? 'var(--vert-sapin)' : 'var(--texte)',
                  borderBottom: '1px solid var(--hairline)'
                }}>{item.label}</a>
              );
            })}
            <a href="https://app.virage.dev/login" style={{
              padding: '14px 12px', fontSize: 17, fontWeight: 500,
              color: 'var(--texte-soft)', borderBottom: '1px solid var(--hairline)'
            }}>Se connecter</a>
            <a href="#demo" onClick={(e) => { e.preventDefault(); setMenuOpen(false); window.openVirageDemo(); }}
              className="btn btn-primary" style={{ marginTop: 12, justifyContent: 'center' }}>
              Demander une démo
            </a>
          </div>
        </div>
      )}
    </header>);

};

/* =========================================================
   HERO
========================================================= */
const HeroPill = () =>
<div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', alignItems: 'center' }}>
    <div className="pill" style={{
    background: 'var(--accent-soft)', borderColor: 'transparent',
    color: 'var(--accent)', fontWeight: 600
  }}>
      <span style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--accent)', display: 'inline-block' }} />
      <span>Plateforme collaborative · Formation IA</span>
    </div>
    <div className="pill" style={{ background: 'var(--blanc)' }}>
      <span style={{ position: 'relative', display: 'inline-block', width: 6, height: 6 }}>
        <span className="pill-dot" style={{ position: 'absolute', inset: 0 }} />
        <span style={{ position: 'absolute', inset: 0, borderRadius: '50%', background: 'var(--vert-sapin)', animation: 'pulse 1.8s ease-out infinite' }} />
      </span>
      <span>Principe de gamification</span>
    </div>
  </div>;


const PlatformMockup = () => {
  const [activeNav, setActiveNav] = useState('aujourdhui');
  const [activeCourse, setActiveCourse] = useState(0);

  // Auto-rotate active course every 3.5s until user clicks
  const [userTook, setUserTook] = useState(false);
  useEffect(() => {
    if (userTook) return;
    const id = setInterval(() => setActiveCourse((c) => (c + 1) % 3), 3500);
    return () => clearInterval(id);
  }, [userTook]);

  // Inline icons for sidebar
  const navIcon = (kind) => {
    const c = 'currentColor';
    if (kind === 'home') return <path d="M3 11l9-8 9 8v9a1 1 0 01-1 1h-5v-7H10v7H4a1 1 0 01-1-1v-9z" fill={c} />;
    if (kind === 'book') return <path d="M5 4h10a3 3 0 013 3v13H8a3 3 0 01-3-3V4z" fill={c} />;
    if (kind === 'team') return <g fill={c}><circle cx="9" cy="9" r="3" /><circle cx="17" cy="10" r="2.4" /><path d="M3 19c.5-3 3-5 6-5s5.5 2 6 5H3z" /><path d="M14.5 19c.3-2 2-3.5 4-3.5s3.2 1.3 3.5 3.5h-7.5z" /></g>;
    if (kind === 'cal') return <g fill={c}><rect x="3.5" y="5" width="17" height="15" rx="2.5" /><rect x="3.5" y="5" width="17" height="4" rx="2.5" opacity="0.6" /></g>;
    if (kind === 'chart') return <g fill={c}><rect x="4" y="13" width="3" height="7" rx="1" /><rect x="9.5" y="9" width="3" height="11" rx="1" /><rect x="15" y="6" width="3" height="14" rx="1" /></g>;
    if (kind === 'set') return <g fill={c}><circle cx="12" cy="12" r="3" /><path d="M12 2l1.5 3L16 4l-.5 3.2L18 8l-1.7 2.5L18 13l-2.7 1.3.5 3-2.7-1L12 19l-1.5-3-3 1 .5-3.2L4 13l2-2.5L4 8l3-1 .5-3 3 .5L12 2z" opacity=".25" /></g>;
    return null;
  };

  const navItems = [
  { key: 'aujourdhui', label: "Aujourd'hui", icon: 'home' },
  { key: 'parcours', label: 'Mes parcours', icon: 'book' },
  { key: 'equipe', label: 'Mon équipe', icon: 'team' },
  { key: 'agenda', label: 'Agenda', icon: 'cal' },
  { key: 'progres', label: 'Progrès', icon: 'chart' }];


  // Courses (the main content)
  const courses = [
  { title: 'Prompts pour la compta', tag: 'Métier · Finance', pct: 78, total: 12, done: 9, bg: 'var(--vert-menthe-soft)', accent: 'var(--vert-sapin)', team: 'Équipe Compta · 8' },
  { title: 'IA pour relances clients', tag: 'Métier · Commerce', pct: 42, total: 14, done: 6, bg: '#FBE4DA', accent: '#E5704B', team: 'Équipe Sales · 6' },
  { title: 'Synthèse de réunion', tag: 'Transverse', pct: 100, total: 8, done: 8, bg: 'var(--creme-deep)', accent: 'var(--texte)', team: '12 collègues' }];


  // Today's events (right column)
  const events = [
  { time: '10:30', title: 'Défi du jour', kind: 'défi', color: 'var(--vert-sapin)', bg: 'var(--vert-menthe-soft)' },
  { time: '14:00', title: 'Atelier équipe Compta', kind: 'atelier', color: '#E5704B', bg: '#FBE4DA' },
  { time: '17:00', title: 'Validation manager', kind: 'validation', color: 'var(--texte)', bg: 'var(--creme-deep)' }];


  const cur = courses[activeCourse];

  return (
    <div style={{ position: 'relative', width: '100%', minHeight: 540 }}>
      {/* Backdrop blob */}
      <div style={{
        position: 'absolute', inset: '4% 0% 4% 0%',
        background: 'radial-gradient(circle at 70% 30%, rgba(184, 230, 207, 0.55) 0%, rgba(184, 230, 207, 0) 60%)',
        filter: 'blur(8px)', zIndex: 0
      }} />

      {/* App window */}
      <div className="card" style={{
        position: 'relative',
        padding: 0, overflow: 'hidden',
        boxShadow: '0 30px 80px -30px rgba(15, 51, 41, 0.4)',
        display: 'grid',
        gridTemplateColumns: '64px 1fr',
        minHeight: 540
      }}>
        {/* SIDEBAR */}
        <aside style={{
          background: 'var(--vert-sapin-deep, #0F3329)',
          padding: '20px 12px',
          display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8
        }}>
          {/* Logo mark */}
          <div style={{ marginBottom: 14 }}>
            <Picto size={32} variant="menthe" />
          </div>
          {navItems.map((n) => {
            const active = activeNav === n.key;
            return (
              <button key={n.key} type="button" onClick={() => setActiveNav(n.key)} title={n.label} style={{
                all: 'unset', cursor: 'pointer', boxSizing: 'border-box',
                width: 40, height: 40, borderRadius: 11,
                display: 'grid', placeItems: 'center',
                background: active ? 'rgba(184, 230, 207, 0.18)' : 'transparent',
                color: active ? '#B8E6CF' : 'rgba(255,255,255,0.5)',
                transition: 'all 180ms ease'
              }}
              onMouseOver={(e) => {if (!active) e.currentTarget.style.color = 'rgba(255,255,255,0.85)';}}
              onMouseOut={(e) => {if (!active) e.currentTarget.style.color = 'rgba(255,255,255,0.5)';}}>
                <svg width="20" height="20" viewBox="0 0 24 24">
                  {navIcon(n.icon)}
                </svg>
              </button>);

          })}
          <div style={{ flex: 1 }} />
          <button type="button" title="Paramètres" style={{
            all: 'unset', cursor: 'pointer',
            width: 40, height: 40, borderRadius: 11, display: 'grid', placeItems: 'center',
            color: 'rgba(255,255,255,0.5)'
          }}>
            <svg width="20" height="20" viewBox="0 0 24 24">{navIcon('set')}</svg>
          </button>
          {/* Avatar */}
          <div style={{
            width: 36, height: 36, borderRadius: '50%',
            background: 'var(--accent)',
            display: 'grid', placeItems: 'center',
            color: '#fff', fontWeight: 700, fontSize: 13,
            border: '2px solid rgba(184, 230, 207, 0.3)'
          }}>MC</div>
        </aside>

        {/* MAIN CONTENT */}
        <div style={{ background: 'var(--blanc)', display: 'grid', gridTemplateRows: 'auto 1fr', minWidth: 0 }}>
          {/* Top bar */}
          <div style={{
            padding: '16px 22px',
            borderBottom: '1px solid var(--hairline)',
            display: 'flex', alignItems: 'center', gap: 16
          }}>
            <div style={{ flex: 1, position: 'relative' }}>
              <div style={{
                background: 'var(--creme)', borderRadius: 10,
                padding: '8px 12px 8px 34px', fontSize: 13, color: 'var(--texte-mute)',
                position: 'relative'
              }}>
                Rechercher un prompt, un parcours, un collègue…
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" style={{ position: 'absolute', left: 12, top: '50%', transform: 'translateY(-50%)' }}>
                  <circle cx="11" cy="11" r="7" stroke="currentColor" strokeWidth="2" />
                  <path d="M16 16l4 4" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
                </svg>
              </div>
            </div>
            {/* Streak */}
            <div style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '6px 12px', background: 'var(--accent-soft)', borderRadius: 999 }}>
              <span style={{ fontSize: 14 }}>🔥</span>
              <span style={{ fontSize: 13, fontWeight: 700, color: 'var(--accent)' }}>12</span>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
              <span style={{ fontSize: 13, fontWeight: 600 }}>Marie C.</span>
              <span style={{ fontSize: 11, color: 'var(--texte-mute)', padding: '2px 6px', background: 'var(--vert-menthe-soft)', borderRadius: 4, fontWeight: 600 }}>Praticien</span>
            </div>
          </div>

          {/* Body grid: courses + side */}
          <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 0.9fr', gap: 0, minWidth: 0 }}>
            {/* Courses column */}
            <div style={{ padding: 22, borderRight: '1px solid var(--hairline)', minWidth: 0 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 14 }}>
                <div>
                  <div style={{ fontSize: 11, color: 'var(--texte-mute)', textTransform: 'uppercase', letterSpacing: '0.08em', fontWeight: 600 }}>Mes parcours</div>
                  <div style={{ fontSize: 17, fontWeight: 700, marginTop: 2, letterSpacing: '-0.01em' }}>3 en cours</div>
                </div>
                <div style={{ fontSize: 12, color: 'var(--texte-mute)' }}>cette semaine</div>
              </div>

              {/* Course cards stack */}
              <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                {courses.map((c, i) => {
                  const isActive = i === activeCourse;
                  return (
                    <button key={i} type="button" onClick={() => {setUserTook(true);setActiveCourse(i);}} style={{
                      all: 'unset', cursor: 'pointer', boxSizing: 'border-box',
                      padding: 14, borderRadius: 14,
                      background: c.bg,
                      border: isActive ? '2px solid ' + c.accent : '2px solid transparent',
                      transition: 'all 220ms ease',
                      display: 'block'
                    }}>
                      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 8 }}>
                        <div style={{ minWidth: 0, flex: 1 }}>
                          <div style={{ fontSize: 10, fontWeight: 600, color: c.accent, textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 4 }}>{c.tag}</div>
                          <div style={{ fontSize: 14, fontWeight: 700, color: 'var(--texte)', letterSpacing: '-0.01em', lineHeight: 1.25 }}>{c.title}</div>
                        </div>
                        {/* Validation pill — Virage logo shape with swoosh */}
                        {c.pct === 100 &&
                        <div style={{
                          width: 24, height: 24, borderRadius: 5,
                          background: c.accent, display: 'grid', placeItems: 'center', flexShrink: 0
                        }}>
                            <svg width="22" height="22" viewBox="0 0 64 64" fill="none">
                              <path d="M 14 32 Q 28 60, 50 20" stroke="#FFFFFF" strokeWidth="6" strokeLinecap="round" fill="none" />
                            </svg>
                          </div>
                        }
                      </div>
                      <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                        <div style={{ flex: 1, height: 5, borderRadius: 999, background: 'rgba(255,255,255,0.55)', overflow: 'hidden' }}>
                          <div style={{
                            height: '100%', width: c.pct + '%', borderRadius: 999, background: c.accent,
                            transition: 'width 600ms cubic-bezier(.5,.1,.2,1)'
                          }} />
                        </div>
                        <div style={{ fontSize: 11, fontWeight: 700, color: c.accent, minWidth: 28 }}>{c.pct}%</div>
                      </div>
                      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 8, fontSize: 11, color: 'var(--texte-mute)' }}>
                        <span>{c.done}/{c.total} modules</span>
                        <span style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
                          <span>👥</span>{c.team}
                        </span>
                      </div>
                    </button>);

                })}
              </div>

              {/* Today's challenge call-to-action */}
              <div style={{
                marginTop: 14, padding: '12px 14px', borderRadius: 12,
                background: 'var(--vert-sapin)', color: '#fff',
                display: 'flex', alignItems: 'center', gap: 12
              }}>
                <div style={{
                  width: 32, height: 32, borderRadius: 8,
                  background: 'rgba(184, 230, 207, 0.2)',
                  display: 'grid', placeItems: 'center', flexShrink: 0
                }}>
                  <svg width="16" height="16" viewBox="0 0 64 64" fill="none">
                    <path d="M 14 32 Q 28 60, 50 20" stroke="#B8E6CF" strokeWidth="6" strokeLinecap="round" fill="none" />
                  </svg>
                </div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontSize: 12, opacity: 0.7 }}>Défi du jour · 5 min</div>
                  <div style={{ fontSize: 13, fontWeight: 600, letterSpacing: '-0.01em' }}>Reformuler un brief client avec l'IA</div>
                </div>
                <span style={{
                  fontSize: 11, fontWeight: 600,
                  padding: '4px 10px', borderRadius: 999,
                  background: 'var(--accent)',
                  color: '#fff'
                }}>Démarrer</span>
              </div>
            </div>

            {/* Side panel: Today's agenda */}
            <div style={{ padding: 22, background: 'var(--creme)', minWidth: 0, fontFamily: "Outfit" }}>
              <div style={{ marginBottom: 14 }}>
                <div style={{ fontSize: 11, color: 'var(--texte-mute)', textTransform: 'uppercase', letterSpacing: '0.08em', fontWeight: 600 }}>Aujourd'hui</div>
                <div style={{ fontSize: 17, fontWeight: 700, marginTop: 2, letterSpacing: '-0.01em' }}>Jeu. 14 mai</div>
              </div>

              <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                {events.map((e, i) =>
                <div key={i} style={{
                  background: 'var(--blanc)', borderRadius: 10,
                  padding: '10px 12px',
                  border: '1px solid var(--hairline)'
                }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 4 }}>
                      <div style={{ width: 4, height: 14, borderRadius: 2, background: e.color }} />
                      <span style={{ fontSize: 11, fontWeight: 600, color: 'var(--texte-mute)' }}>{e.time}</span>
                      <span style={{
                      fontSize: 9, fontWeight: 700,
                      padding: '2px 6px', borderRadius: 4,
                      background: e.bg, color: e.color,
                      textTransform: 'uppercase', letterSpacing: '0.05em'
                    }}>{e.kind}</span>
                    </div>
                    <div style={{ fontSize: 12, fontWeight: 600, color: 'var(--texte)', letterSpacing: '-0.005em' }}>{e.title}</div>
                  </div>
                )}
              </div>

              {/* Team activity */}
              <div style={{ marginTop: 18, paddingTop: 16, borderTop: '1px solid var(--hairline)' }}>
                <div style={{ fontSize: 11, color: 'var(--texte-mute)', textTransform: 'uppercase', letterSpacing: '0.08em', fontWeight: 600, marginBottom: 10 }}>Équipe en ligne</div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                  <div style={{ display: 'flex' }}>
                    {['#1F4D3E', '#E5704B', '#B8E6CF', '#0F3329'].map((c, i) =>
                    <div key={i} style={{
                      width: 28, height: 28, borderRadius: '50%',
                      background: c, border: '2px solid var(--creme)',
                      marginLeft: i === 0 ? 0 : -8,
                      display: 'grid', placeItems: 'center',
                      fontSize: 10, fontWeight: 700,
                      color: c === '#B8E6CF' ? '#1F4D3E' : '#fff'
                    }}>{['M', 'J', 'S', 'L'][i]}</div>
                    )}
                  </div>
                  <div style={{ fontSize: 11, color: 'var(--texte-mute)' }}>
                    <span style={{ fontWeight: 600, color: 'var(--texte)' }}>4 collègues</span> au même niveau
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>);

};

const Hero = ({ tweaks }) =>
<section style={{ paddingTop: 48, paddingBottom: 80, position: 'relative', overflow: 'hidden' }}>
    {/* Soft background curve hint */}
    <svg style={{ position: 'absolute', top: 60, right: -120, width: 520, height: 520, opacity: 0.07, pointerEvents: 'none' }} viewBox="0 0 64 64">
      <path d="M 14 32 Q 28 60, 50 20" stroke="#1F4D3E" strokeWidth="2" fill="none" strokeLinecap="round" />
    </svg>

    <div className="container hero-grid" style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 0.95fr) minmax(0, 1.1fr)', gap: 48, alignItems: 'center' }}>
      {/* LEFT — text block */}
      <div className="fade-in">
        <HeroPill />
        <h1 className="t-display" style={{ marginTop: 24, marginBottom: 0, fontSize: 'clamp(36px, 4.6vw, 64px)' }}>
          Accompagnez vos équipes<br />dans le virage IA
        </h1>
        <p style={{
        fontStyle: 'italic', fontWeight: 500,
        fontSize: 'clamp(22px, 2.4vw, 30px)', lineHeight: 1.2,
        color: 'var(--vert-sapin)',
        marginTop: 18, marginBottom: 24,
        letterSpacing: '-0.015em'
      }}>L'IA pour tous. Niveau par niveau.

      </p>
        <p className="t-body-lg" style={{ maxWidth: 540, marginBottom: 28 }}>
          La <strong style={{ color: 'var(--texte)', fontWeight: 600 }}>plateforme collaborative</strong> qui forme toutes vos équipes à
          l'IA <strong style={{ color: 'var(--texte)', fontWeight: 600 }}>ensemble</strong>, sur des cas réels métier, validés par leurs pairs.
          Cinq minutes par jour. À hauteur d'humain.
        </p>

        <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
          <a href="#demo" onClick={(e) => { e.preventDefault(); window.openVirageDemo(); }} className="btn btn-primary" style={{ padding: '16px 26px', fontSize: 16 }}>
            Demander une démo
            <svg className="arrow" width="14" height="14" viewBox="0 0 14 14" fill="none">
              <path d="M2 7h10M8 3l4 4-4 4" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
            </svg>
          </a>
          <a href="#newsletter" className="btn btn-secondary" style={{ padding: '16px 26px', fontSize: 16 }}>
            Recevoir la newsletter
          </a>
        </div>

        {/* Trust strip */}
        <div style={{ marginTop: 32, display: 'flex', gap: 24, alignItems: 'center', flexWrap: 'wrap' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
              <path d="M8 1L10 5.5L15 6L11.5 9.5L12.5 14.5L8 12L3.5 14.5L4.5 9.5L1 6L6 5.5L8 1Z" fill="#1F4D3E" />
            </svg>
            <span style={{ fontSize: 14, fontWeight: 500 }}>Qualiopi certifié</span>
          </div>
          <div style={{ width: 1, height: 16, background: 'var(--hairline-strong)' }} />
          <span style={{ fontSize: 14, color: 'var(--texte-mute)' }}>IA accessible à tous</span>
          <div style={{ width: 1, height: 16, background: 'var(--hairline-strong)' }} />
          <span style={{ fontSize: 14, color: 'var(--texte-mute)' }}>E-learning</span>
        </div>
      </div>

      {/* RIGHT — Platform mockup */}
      <div className="fade-in" style={{ position: 'relative', minWidth: 0 }}>
        <PlatformMockup />
      </div>
    </div>
  </section>;


window.Picto = Picto;
window.Logo = Logo;
window.Header = Header;
window.Hero = Hero;