// ── Hero V2 — editorial serif headline, real-product 3D montage ──
function Mk2Hero({ onCTA }) {
  return (
    <section style={{ padding: '72px 0 120px', position: 'relative', overflow: 'hidden' }}>
      {/* subtle warm wash */}
      <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(ellipse 80% 60% at 50% 0%, rgba(232,218,203,0.55), transparent 70%)', pointerEvents: 'none' }}/>
      <div className="mk2-container" style={{ position: 'relative', textAlign: 'center' }}>
        <div className="mk2-pill mk2-fade-up" style={{ marginBottom: 32 }}>
          <span style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--mk2-ember)' }}/>
          Simulation IA conversationnelle — pour vos équipes et candidats
        </div>
        <h1 className="mk2-display mk2-fade-up" style={{
          fontSize: 'clamp(44px, 7.5vw, 92px)',
          maxWidth: 960, margin: '0 auto 28px',
          animationDelay: '.08s',
        }}>
          Formez, évaluez,<br/>
          <span className="mk2-italic" style={{ color: 'var(--mk2-ember)' }}>face à une IA</span> qui écoute vraiment.
        </h1>
        <p className="mk2-body mk2-fade-up" style={{
          fontSize: 18, maxWidth: 620, margin: '0 auto 40px',
          animationDelay: '.16s',
        }}>
          Miikaa place vos apprenants et candidats en visioconférence avec une IA qui réagit, ressent la nuance, et vous restitue ce que vos collaborateurs savent <em style={{ fontFamily: 'var(--mk2-serif-italic)', fontWeight: 400 }}>vraiment</em> faire — au-delà du déclaratif.
        </p>
        <div className="mk2-fade-up" style={{
          display: 'flex', justifyContent: 'center', gap: 12,
          animationDelay: '.24s',
        }}>
          <button className="mk2-btn mk2-btn-primary" onClick={() => onCTA?.()} style={{ padding: '14px 28px', fontSize: 15 }}>
            Réserver une démo
            <Mk2Arrow size={16}/>
          </button>
          <button className="mk2-btn mk2-btn-secondary" style={{ padding: '14px 24px', fontSize: 15 }}>
            <Mk2Play size={14}/> Voir en 90 secondes
          </button>
        </div>
        <div className="mk2-caption" style={{ marginTop: 20, fontSize: 13 }}>
          Sans engagement · Réponse sous 24 h · Disponible en FR et EN
        </div>
      </div>

      {/* Product montage — real screenshots in 3D stack */}
      <div className="mk2-container" style={{ marginTop: 88, position: 'relative' }}>
        <Mk2ProductStack/>
      </div>
    </section>
  );
}

function Mk2ProductStack() {
  return (
    <div style={{
      position: 'relative',
      width: '100%',
      maxWidth: 1180,
      margin: '0 auto',
      perspective: '2400px',
      perspectiveOrigin: '50% 30%',
      paddingTop: 40, paddingBottom: 60,
    }}>
      {/* Warm glow behind */}
      <div aria-hidden style={{
        position: 'absolute', left: '50%', top: '55%', transform: 'translate(-50%,-50%)',
        width: '85%', height: '85%',
        background: 'radial-gradient(ellipse at center, rgba(200,90,60,0.18), rgba(232,218,203,0.25) 40%, transparent 70%)',
        filter: 'blur(40px)', pointerEvents: 'none', zIndex: 0,
      }}/>

      <div style={{
        position: 'relative',
        transformStyle: 'preserve-3d',
        height: 640,
      }}>
        {/* BACK LEFT — Personas (tilted away) */}
        <div className="mk2-fade-up" style={{
          position: 'absolute',
          left: '-4%', top: 60,
          width: '46%',
          transform: 'rotateY(18deg) rotateX(6deg) translateZ(-60px)',
          transformOrigin: 'right center',
          animationDelay: '.5s',
          filter: 'drop-shadow(0 40px 40px rgba(63,48,30,.22))',
          zIndex: 1,
        }}>
          <Mk2BrowserFrame label="miikaa.app/personas" accent="var(--mk2-ocean)">
            <img src="assets/app-personas-zoom.png" alt="Gestion des personas IA dans Miikaa"
                 style={{ width: '100%', display: 'block' }}/>
          </Mk2BrowserFrame>
          <Mk2Callout
            style={{ position: 'absolute', top: -18, right: -20, background: 'var(--mk2-paper)' }}
            icon="dot" color="var(--mk2-ocean)"
            title="9 personas"
            caption="IA hostiles, amicales, sceptiques"
          />
        </div>

        {/* BACK RIGHT — Scenarios */}
        <div className="mk2-fade-up" style={{
          position: 'absolute',
          right: '-4%', top: 110,
          width: '44%',
          transform: 'rotateY(-16deg) rotateX(5deg) translateZ(-40px)',
          transformOrigin: 'left center',
          animationDelay: '.7s',
          filter: 'drop-shadow(0 40px 40px rgba(63,48,30,.22))',
          zIndex: 1,
        }}>
          <Mk2BrowserFrame label="miikaa.app/scenarios" accent="var(--mk2-ember)">
            <img src="assets/app-scenarios.png" alt="Scénarios de formation dans Miikaa"
                 style={{ width: '100%', display: 'block' }}/>
          </Mk2BrowserFrame>
          <Mk2Callout
            style={{ position: 'absolute', bottom: -20, left: -20, background: 'var(--mk2-paper)' }}
            icon="spark" color="var(--mk2-ember)"
            title="Scénarios sur-mesure"
            caption="Recrutement, onboarding, vente…"
          />
        </div>

        {/* FRONT — Main dashboard */}
        <div className="mk2-fade-up" style={{
          position: 'absolute',
          left: '50%', top: 0,
          width: '64%',
          transform: 'translateX(-50%) rotateX(3deg)',
          animationDelay: '.35s',
          zIndex: 2,
        }}>
          <Mk2BrowserFrame
            label="miikaa.app · Tableau de bord"
            accent="var(--mk2-ember)"
            elevated
          >
            {/* Vidéo de démo produit — autoplay, mute, loop pour un effet « pulse » dans le hero.
                Le poster reste affiché tant que la vidéo n'a pas démarré. */}
            <video
              src="assets/dashboard-demo.mp4"
              poster="assets/app-dashboard-sidebar.png"
              preload="metadata"
              autoPlay
              loop
              muted
              playsInline
              controls
              style={{ width: '100%', display: 'block', background: '#000' }}
            />
          </Mk2BrowserFrame>

          {/* Floating skill chip */}
          <div className="mk2-fade-up" style={{
            position: 'absolute',
            right: -40, top: '44%',
            background: 'var(--mk2-ink)',
            color: 'var(--mk2-text-dark)',
            padding: '14px 18px',
            borderRadius: 14,
            boxShadow: '0 24px 48px -12px rgba(20,17,14,.45)',
            display: 'flex', alignItems: 'center', gap: 12,
            transform: 'rotate(3deg)',
            animationDelay: '1s',
            zIndex: 5,
          }}>
            <div style={{
              width: 40, height: 40, borderRadius: 10,
              background: 'linear-gradient(135deg, var(--mk2-ember), var(--mk2-amber))',
              display: 'grid', placeItems: 'center', flexShrink: 0,
            }}>
              <Mk2Waveform size={18} color="#14110E"/>
            </div>
            <div>
              <div style={{ fontSize: 10, letterSpacing: '.14em', textTransform: 'uppercase', color: 'var(--mk2-muted-dark)', marginBottom: 2 }}>
                Score en direct
              </div>
              <div style={{ fontFamily: 'var(--mk2-serif)', fontSize: 22, fontVariationSettings: '"opsz" 48', lineHeight: 1 }}>
                87<span style={{ color: 'var(--mk2-muted-dark)', fontSize: 13 }}>/100</span>
              </div>
            </div>
          </div>

          {/* Floating transcript callout — bulle texte décorative à gauche du dashboard. */}
          <div className="mk2-fade-up" style={{
            position: 'absolute',
            left: -46, bottom: '14%',
            width: 260,
            borderRadius: 14,
            background: 'var(--mk2-paper)',
            border: '1px solid var(--mk2-hair)',
            boxShadow: '0 18px 40px -10px rgba(63,48,30,.25)',
            padding: '14px 16px',
            transform: 'rotate(-2.5deg)',
            animationDelay: '1.15s',
            zIndex: 5,
          }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 }}>
              <span style={{ width: 8, height: 8, borderRadius: '50%', background: 'var(--mk2-ember)' }}/>
              <span style={{ fontSize: 10, letterSpacing: '.14em', textTransform: 'uppercase', color: 'var(--mk2-muted)', fontFamily: 'var(--mk2-mono)' }}>En direct</span>
            </div>
            <div style={{ fontFamily: 'var(--mk2-serif)', fontSize: 15, lineHeight: 1.35, color: 'var(--mk2-text)' }}>
              « Pouvez-vous me parler d'un cas où vous avez dû gérer un client mécontent&nbsp;? »
            </div>
          </div>
        </div>
      </div>

      {/* Floor reflection */}
      <div aria-hidden style={{
        position: 'absolute', left: '12%', right: '12%', bottom: 10,
        height: 40,
        background: 'radial-gradient(ellipse at center, rgba(20,17,14,0.18), transparent 70%)',
        filter: 'blur(8px)', pointerEvents: 'none',
      }}/>

      {/* Trust footer */}
      <div style={{ position: 'relative', marginTop: 20, display: 'flex', justifyContent: 'center' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, background: 'var(--mk2-paper)', border: '1px solid var(--mk2-hair)', padding: '6px 14px', borderRadius: 9999, fontSize: 12, color: 'var(--mk2-muted)', boxShadow: 'var(--mk2-shadow-sm)' }}>
          <span style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--mk2-sage)' }}/>
          Utilisé par des équipes L&D et RH exigeantes
        </div>
      </div>
    </div>
  );
}

// ── Reusable browser frame for product screenshots ──
function Mk2BrowserFrame({ label, accent = 'var(--mk2-ember)', children, elevated = false }) {
  return (
    <div style={{
      background: '#fff',
      border: '1px solid var(--mk2-hair)',
      borderRadius: 14,
      overflow: 'hidden',
      boxShadow: elevated
        ? '0 50px 100px -30px rgba(63,48,30,.35), 0 20px 40px -20px rgba(63,48,30,.15)'
        : '0 30px 60px -20px rgba(63,48,30,.28)',
    }}>
      {/* Chrome bar */}
      <div style={{
        height: 34,
        background: 'linear-gradient(180deg, #FBF8F3, #F2EBDF)',
        borderBottom: '1px solid var(--mk2-hair)',
        display: 'flex', alignItems: 'center', gap: 12, padding: '0 14px',
        position: 'relative',
      }}>
        <div style={{ display: 'flex', gap: 6 }}>
          <span style={{ width: 10, height: 10, borderRadius: '50%', background: '#E8746B' }}/>
          <span style={{ width: 10, height: 10, borderRadius: '50%', background: '#E8C06B' }}/>
          <span style={{ width: 10, height: 10, borderRadius: '50%', background: '#7FB27E' }}/>
        </div>
        <div style={{
          position: 'absolute', left: '50%', transform: 'translateX(-50%)',
          display: 'flex', alignItems: 'center', gap: 6,
          background: 'var(--mk2-canvas)',
          border: '1px solid var(--mk2-hair)',
          padding: '3px 12px', borderRadius: 9999,
          fontSize: 11, color: 'var(--mk2-muted)',
          fontFamily: 'var(--mk2-mono)',
        }}>
          <span style={{ width: 4, height: 4, borderRadius: '50%', background: accent }}/>
          {label}
        </div>
      </div>
      {children}
    </div>
  );
}

// ── Floating callout chip next to product shots ──
function Mk2Callout({ icon, color, title, caption, style }) {
  return (
    <div className="mk2-fade-up" style={{
      display: 'flex', alignItems: 'center', gap: 10,
      padding: '10px 14px',
      background: 'var(--mk2-paper)',
      border: '1px solid var(--mk2-hair)',
      borderRadius: 14,
      boxShadow: '0 18px 36px -10px rgba(63,48,30,.22)',
      animationDelay: '.9s',
      ...style,
    }}>
      <div style={{
        width: 28, height: 28, borderRadius: 8,
        background: color, flexShrink: 0,
        display: 'grid', placeItems: 'center',
        color: '#fff',
      }}>
        {icon === 'spark' ? <Mk2Sparkle size={14}/> : <span style={{ width: 8, height: 8, borderRadius: '50%', background: '#fff' }}/>}
      </div>
      <div>
        <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--mk2-text)', lineHeight: 1.2 }}>
          {title}
        </div>
        <div style={{ fontSize: 11, color: 'var(--mk2-muted)', marginTop: 2 }}>
          {caption}
        </div>
      </div>
    </div>
  );
}

window.Mk2Hero = Mk2Hero;
window.Mk2ProductStack = Mk2ProductStack;
window.Mk2BrowserFrame = Mk2BrowserFrame;
window.Mk2Callout = Mk2Callout;