function Hero({ onPrimary, onSecondary }) {
  const videoRef = React.useRef(null);

  React.useEffect(() => {
    const v = videoRef.current;
    if (!v) return;
    v.muted = true;
    v.playsInline = true;
    const tryPlay = () => {
      const p = v.play();
      if (p && typeof p.then === 'function') {
        p.catch(() => { /* autoplay blocked — poster image stays */ });
      }
    };
    if (v.readyState >= 2) tryPlay();
    else v.addEventListener('loadeddata', tryPlay, { once: true });
  }, []);

  return (
    <section className="hero">
      <video
        ref={videoRef}
        className="bg-video"
        src="assets/video/hero.mp4"
        autoPlay
        muted
        loop
        playsInline
        preload="auto"
        disablePictureInPicture
        onCanPlay={(e) => { e.currentTarget.classList.add('is-ready'); }}
        onError={(e) => { e.currentTarget.style.display = 'none'; }}
      />
      <div className="bg" style={{ backgroundImage: "url('assets/img/hero.jpg')" }} />
      <div className="overlay" />
      <div className="inner">
        <span className="eyebrow-tag">
          <i data-lucide="globe" style={{ width: 14, height: 14 }}></i>
          Capítulo Latinoamericano de HARDI · Desde 1958
        </span>
        <h1>
          Bienvenidos a HARDI LATAM.<br/>
          Somos su <em>ventaja competitiva</em>.
        </h1>
        <p className="lead">
          Conectamos a fabricantes, distribuidores y contratistas HVACR de Latinoamérica
          con la inteligencia de mercado, los entrenamientos y la red de relaciones que
          necesitan para crecer con rentabilidad.
        </p>
        <div className="actions">
          <button className="btn btn-accent" onClick={onPrimary}>
            Conoce a nuestra Junta Directiva
            <i data-lucide="arrow-right" style={{ width: 16, height: 16 }}></i>
          </button>
          <button className="btn btn-secondary" onClick={onSecondary}>
            Explorar los 4 Pilares
          </button>
        </div>
      </div>
    </section>
  );
}