/* global React */

// ===== HOME HERO — fullscreen video + claim =====
function HomeHero() {
  return (
    <section className="home-hero" id="top">
      <div className="hero-video-wrap">
        <video
          className="hero-video"
          src="assets/vamonenef1.mp4"
          poster="assets/autoF1.png"
          autoPlay muted loop playsInline
        ></video>
        <div className="hero-video-overlay"></div>
      </div>

      <div className="container home-hero-content">
        <div className="eyebrow eyebrow-light">
          <span className="dot-live"></span>
          Plataforma urbana oficial · Buenos Aires
        </div>
        <h1 className="display home-hero-title">
          <span className="line">La Fórmula 1</span>
          <span className="line accent-line">en Argentina</span>
        </h1>
        <p className="home-hero-lead">
          Experiencia urbana, simuladores y activaciones masivas.
          <br/>Buenos Aires entra en modo F1.
        </p>
        <div className="home-hero-ctas">
          <a href="#formatos" className="btn btn-primary">Descubrí la experiencia →</a>
          <a href="Bar.html" className="btn btn-ghost">Ir al box</a>
        </div>
      </div>

      <div className="home-hero-scroll">
        <span>SCROLL</span>
        <div className="scroll-line"></div>
      </div>

      <div className="home-hero-meta">
        <div className="meta-item"><span className="num">2</span><span className="lbl">Formatos</span></div>
        <div className="meta-item"><span className="num">+5</span><span className="lbl">Locaciones</span></div>
        <div className="meta-item"><span className="num">24/7</span><span className="lbl">Contenido</span></div>
      </div>
    </section>
  );
}

window.HomeHero = HomeHero;