function Hero({ accent, onDemo }) {
  const [hover, setHover] = React.useState(null);

  const bars = [
    { label: '2019', value: 72, hint: '72 400 salariés' },
    { label: '2020', value: 68, hint: '68 100 salariés' },
    { label: '2021', value: 75, hint: '75 900 salariés' },
    { label: '2022', value: 83, hint: '83 200 salariés' },
    { label: '2023', value: 89, hint: '89 700 salariés' },
    { label: '2024', value: 94, hint: '94 300 salariés' },
    { label: '2025', value: 101, hint: '101 200 salariés', highlight: true },
  ];

  return (
    <section className="hero">
      <div className="hero-grid">
        <div className="hero-copy">
          <h1 className="hero-title">
            La donnée <em>emploi-formation</em><br />
            transformée en décisions.
          </h1>
          <p className="hero-lede">
            Komète agrège et fait parler <strong>plus de 100 sources publiques et privées</strong> pour
            équiper les observatoires, branches, régions et entreprises avec des tableaux de bord
            sur-mesure — et désormais un assistant IA spécialisé.
          </p>
          <div className="hero-ctas">
            <button className="btn btn-primary" onClick={onDemo}
              style={{ background: accent.accent, borderColor: accent.accent }}>
              Être contacté par un expert
              <span className="arr">→</span>
            </button>
            <a className="btn btn-ghost" href="#contact">
              Accéder à une version gratuite de Komète
            </a>
          </div>
          <div className="hero-stats">
            <Stat n="100+" label="sources de données" />
            <Stat n="15+" label="plateformes en production" />
            <Stat n="10 ans" label="d'expertise produit" />
          </div>
        </div>

        <div className="hero-viz">
          <div className="hero-byline">
            <span>Une solution</span>
            <a href="https://www.kyu.fr" target="_blank" rel="noopener" aria-label="KYU — cabinet de conseil">
              <img src="assets/logo-kyu.svg" alt="KYU" style={{ height: 20, objectFit: 'contain' }} />
            </a>
          </div>
          <div className="viz-card">
            <div className="viz-head">
              <div className="viz-tabs">
                <span className="tab active">Salariés</span>
                <span className="tab">Entreprises</span>
                <span className="tab">Formation</span>
              </div>
              <span className="viz-badge">LIVE · Source DSN/INSEE</span>
            </div>
            <div className="viz-title">
              Évolution des effectifs — <span style={{ color: accent.accent }}>Branche services</span>
            </div>
            <div className="viz-chart">
              {bars.map((b, i) =>
                <div key={b.label}
                  className={`bar-col${b.highlight ? ' highlight' : ''}${hover === i ? ' hovered' : ''}`}
                  onMouseEnter={() => setHover(i)}
                  onMouseLeave={() => setHover(null)}>
                  <div className="bar-tip" style={{ opacity: hover === i ? 1 : 0 }}>
                    {b.hint}
                  </div>
                  <div className="bar-fill" style={{
                    height: `${b.value}%`,
                    background: b.highlight ? accent.accent : '#C9C2D8',
                    animationDelay: `${i * 80}ms`,
                  }} />
                  <div className="bar-label">{b.label}</div>
                </div>
              )}
            </div>
            <div className="viz-foot">
              <div className="viz-foot-item">
                <span className="tri-up" style={{ color: accent.accent }}>▲ 7,3%</span>
                <span>vs 2024</span>
              </div>
              <div className="viz-filter">
                <span className="chip">Filtre : NAF 82.99Z</span>
                <span className="chip">Région : IDF</span>
              </div>
            </div>
          </div>

          <div className="viz-sidecard">
            <div className="side-row">
              <div className="side-label">Tension recrutement</div>
              <div className="side-val">
                <div className="gauge">
                  <div className="gauge-fill" style={{ width: '78%', background: accent.accent }} />
                </div>
                <span>78</span>
              </div>
            </div>
            <div className="side-row">
              <div className="side-label">Offres actives</div>
              <div className="side-val">
                <span className="big">12 847</span>
                <span className="tiny up" style={{ color: accent.accent }}>+12%</span>
              </div>
            </div>
            <div className="side-row">
              <div className="side-label">Métiers en tension</div>
              <div className="side-val small-chips">
                <span className="mini-chip">Dev. logiciel</span>
                <span className="mini-chip">Data eng.</span>
                <span className="mini-chip">+14</span>
              </div>
            </div>
          </div>

          <div className="freemium-ribbon">
            <KometeStar size={22} color={accent.accent} />
            <div>
              <div className="rib-title">Essai Freemium disponible</div>
              <div className="rib-sub">Connectez-vous à une version bridée · Sans engagement</div>
            </div>
            <button className="rib-cta" style={{ color: accent.accent, borderColor: accent.accent }}>
              <a href="https://demov2.komete.app/" target="_blank" rel="noopener" aria-label="Komète — version de démonstration">
                Essayer →
              </a>
            </button>
          </div>
        </div>
      </div>
    </section>
  );
}

function Stat({ n, label }) {
  return (
    <div className="stat">
      <div className="stat-n">{n}</div>
      <div className="stat-l">{label}</div>
    </div>
  );
}

Object.assign(window, { Hero });