// Hero.jsx — combined: cosmic backdrop (v2) + side-by-side text/card layout.
function Hero({ onCta }) {
  return (
    <section id="hero" className="sn-section sn-hero sn-hero-combo">
      <GlobeScene />
      <div className="sn-hero-combo-inner">
        <div className="sn-hero-combo-text">
          <p className="sn-kicker sn-kicker-pill">
            <span className="sn-kicker-dot"></span>
            Joining a global movement · 60+ ciudades
          </p>
          <h1 className="sn-display">
            Tu identidad digital,<br />
            <span className="sn-aurora-text">conectada al mundo</span>
          </h1>
          <p className="sn-lede">
            Comparte tu tarjeta al instante por Bluetooth, QR o link. Una sola identidad
            que viaja contigo, sea cual sea el evento, la ciudad o el continente.
          </p>
          <div className="sn-cta-row">
            <button className="sn-btn-primary" onClick={() => onCta && onCta("download")}>
              <Icon.Apple size={16} />
              Descargar para iOS
              <Icon.ArrowRight size={14} />
            </button>
            <button className="sn-btn-secondary" onClick={() => onCta && onCta("how")}>
              Ver cómo funciona
              <span className="muted">→</span>
            </button>
          </div>
          <div className="sn-stats-row sn-stats-inline">
            <div className="sn-stat"><div className="sn-stat-num">42K</div><div className="sn-stat-lbl">tarjetas</div></div>
            <div className="sn-stat-divider"></div>
            <div className="sn-stat"><div className="sn-stat-num">61</div><div className="sn-stat-lbl">países</div></div>
            <div className="sn-stat-divider"></div>
            <div className="sn-stat"><div className="sn-stat-num">3.4s</div><div className="sn-stat-lbl">share</div></div>
          </div>
        </div>
        <div className="sn-hero-combo-card">
          <Card tilt={true} />
        </div>
      </div>
    </section>
  );
}

window.Hero = Hero;