/* global React */

// ===== NAV =====
function Nav() {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 30);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <nav className={`nav ${scrolled ? 'scrolled' : ''}`}>
      <div className="container nav-inner">
        <a href="#top" className="nav-logo">
          <img src="assets/logo.png" alt="Vamo' Nene" />
          <div className="brand-mark">
            <span className="top">Vamo' Nene</span>
            <span className="bot">Bar Temático</span>
          </div>
        </a>
        <div className="nav-links">
          <a href="#nosotros">Nosotros</a>
          <a href="#configurador">Armá tu noche</a>
          <a href="#galeria">Galería</a>
          <a href="#contacto">Contacto</a>
          <a href="#faq">FAQ</a>
        </div>
        <div className="nav-cta">
          <a href="https://wa.me/5491100000000?text=Hola%20Vamo%20Nene%2C%20quiero%20reservar" target="_blank" rel="noopener" className="btn btn-ghost">WhatsApp</a>
          <a href="#configurador" className="btn btn-primary">Reservar</a>
        </div>
      </div>
    </nav>
  );
}

// ===== HERO =====
function Hero({ heroStyle }) {
  return (
    <section className="hero" id="top">
      <div className="hero-bg">
        {heroStyle === 'photo' && <img src="assets/bar1.jpg" alt="" />}
        {heroStyle === 'video' && <img src="assets/zonabar.jpg" alt="" />}
        {heroStyle === 'hud' && <img src="assets/simus.jpg" alt="" />}
      </div>
      <div className="container hero-content">
        <div className="eyebrow">Bar Temático · Fórmula 1 · Buenos Aires</div>
        <h1 className="display">
          <span className="line-1">No mirás la F1.</span>
          <span className="line-2">La vivís, nene.</span>
        </h1>
        <p className="lead">
          Simuladores profesionales por escudería, picadas para compartir, los GP en pantalla
          gigante y el aguante de los que la sienten. Largá tu noche distinta.
        </p>
        <div className="hero-ctas">
          <a href="#configurador" className="btn btn-primary">Armá tu noche →</a>
          <a href="#galeria" className="btn btn-ghost">Ver el lugar</a>
        </div>
      </div>
      <div className="hero-meta">
        <div className="live"><span className="dot"></span>Box abierto · Hoy 19:00 — 03:00</div>
        <div>4 escuderías · 8 simuladores · Cocina hasta 02:00</div>
      </div>
    </section>
  );
}

// ===== MARQUEE =====
function Marquee() {
  const items = ['Vamo\u2019 nene !!', '🏁 Pole position en boxes', 'Ferrari · Red Bull · McLaren · Mercedes', 'Watch parties cada GP', 'Picadas + tragos + simuladores', 'Largá tu noche distinta'];
  const all = [...items, ...items];
  return (
    <div className="marquee">
      <div className="marquee-track">
        {all.map((t, i) => <span key={i}>{t}</span>)}
      </div>
    </div>
  );
}

window.Nav = Nav;
window.Hero = Hero;
window.Marquee = Marquee;