// Hero.jsx
function Hero({ onCta }) {
  return (
    <section className="hero" id="top">
      <div className="wrap hero-grid">
        <div>
          <p className="eyebrow reveal">Édition Executive · Programme en 2 jours</p>
          <h1 className="reveal">
            L'IA ne se délègue pas — elle commence par la <em>transformation du dirigeant.</em>
          </h1>
          <p className="lead reveal">
            La plupart des programmes laissent leurs participants mieux informés, pas
            transformés. En deux jours, AI Leadership Compass provoque une bascule concrète
            dans la manière dont vous exercez votre responsabilité.
          </p>
          <div className="hero-cta reveal">
            <button className="btn btn-gold" onClick={onCta}>
              Réserver une cohorte
              <i data-lucide="arrow-right"></i>
            </button>
            <a className="btn btn-ghost" href="#spine">Voir le programme</a>
          </div>
          <div className="hero-meta reveal">
            <div><div className="hm-k">2 jours</div><div className="hm-v">Playbook + Accélérateur</div></div>
            <div><div className="hm-k">6–8</div><div className="hm-v">dirigeants par cohorte</div></div>
            <div><div className="hm-k">4</div><div className="hm-v">actifs, pas un compte rendu</div></div>
          </div>
        </div>
        <div className="hero-art reveal">
          <LogoMark size={320} />
        </div>
      </div>
    </section>
  );
}
Object.assign(window, { Hero });