// ============================================================
// OSCILADOR — Hero (3 variantes)
// ============================================================

function HeroV1Typography() {
  // Pure typography on black with subtle wave background
  return (
    <section className="hero" id="top">
      <div className="hero-media" aria-hidden="true">
        <picture>
          <source media="(max-width: 760px)" srcSet="assets/images/hero-cabina-mobile-4x5.png" />
          <img
            src="assets/images/hero-cabina-desktop-16x9.png"
            alt="Cabina de práctica con setup profesional de DJ"
            style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: "center center", opacity: 0.72, display: "block" }}
          />
        </picture>
      </div>
      <div className="hero-wavebg">
        <WaveSVG width={1400} height={140} strokeWidth={1.2} stroke="rgba(255,255,255,0.45)" />
      </div>
      <div className="container">
        <div className="hero-grid">
          <Reveal>
            <div className="eyebrow">
              <span style={{ color: "rgba(184,184,184,0.5)" }}>00 / INTRO</span>
              <span>LA PAZ — BOLIVIA</span>
            </div>
          </Reveal>
          <Reveal delay={120}>
            <h1 className="display hero-headline">
              Tu sala.<br/>
              Tu hora.<br/>
              Tu set.
            </h1>
          </Reveal>
          <Reveal delay={240}>
            <p className="muted" style={{ fontSize: "clamp(16px, 1.6vw, 22px)", maxWidth: "52ch", lineHeight: 1.45 }}>
              Experimenta los CDJ-3000 y el DJM-A9 en una cabina privada. El mismo setup que encuentras en cualquier festival, disponible por hora.
            </p>
          </Reveal>
          <Reveal delay={360} style={{ display: "flex", gap: 16, flexWrap: "wrap", marginTop: 8 }}>
            <a href="#reservar" onClick={(e) => { e.preventDefault(); window.dispatchEvent(new Event("openBooking")); }} className="btn btn-signal btn-lg">
              Solicitar reserva
              <Arrow size={16} />
            </a>
            <a href="#servicios" className="btn btn-ghost btn-lg">
              Ver servicios
            </a>
          </Reveal>
          <Reveal delay={500} as="div" className="hero-meta">
            <div className="hero-meta-item">
              <span className="mono">EQUIPO</span>
              <b>CDJ-3000 × 2 + DJM-A9</b>
            </div>
            <div className="hero-meta-item">
              <span className="mono">APERTURA</span>
              <b>06 · 07 · 2026</b>
            </div>
            <div className="hero-meta-item">
              <span className="mono">UBICACIÓN</span>
              <b>LA PAZ — BOLIVIA</b>
            </div>
            <div className="hero-meta-item">
              <span className="mono">RESERVAS</span>
              <b>CAL + WHATSAPP</b>
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

function HeroV2Photo() {
  // Full-bleed photo with overlay
  return (
    <section className="hero" id="top">
      <div className="hero-bg-photo">
        <Photo id="HERO-BG-01" caption="Plano general sala — CDJ-3000 baja luz" style={{ width: "100%", height: "100%", borderRadius: 0, border: 0 }} />
      </div>
      <div className="container">
        <div className="hero-grid">
          <Reveal>
            <div className="eyebrow">
              <span style={{ color: "rgba(184,184,184,0.5)" }}>00 / INTRO</span>
              <span>LA PAZ — BOLIVIA</span>
            </div>
          </Reveal>
          <Reveal delay={120}>
            <h1 className="display hero-headline">
              Tu sala.<br/>
              Tu hora.<br/>
              Tu set.
            </h1>
          </Reveal>
          <Reveal delay={240}>
            <p className="muted" style={{ fontSize: "clamp(16px, 1.6vw, 22px)", maxWidth: "52ch", lineHeight: 1.45 }}>
              Experimenta los CDJ-3000 y el DJM-A9 en una cabina privada. El mismo setup que encuentras en cualquier festival, disponible por hora.
            </p>
          </Reveal>
          <Reveal delay={360} style={{ display: "flex", gap: 16, flexWrap: "wrap", marginTop: 8 }}>
            <a href="#reservar" onClick={(e) => { e.preventDefault(); window.dispatchEvent(new Event("openBooking")); }} className="btn btn-signal btn-lg">
              Solicitar reserva
              <Arrow size={16} />
            </a>
            <a href="#servicios" className="btn btn-ghost btn-lg">
              Ver servicios
            </a>
          </Reveal>
          <Reveal delay={500} as="div" className="hero-meta">
            <div className="hero-meta-item">
              <span className="mono">EQUIPO</span>
              <b>CDJ-3000 × 2 + DJM-A9</b>
            </div>
            <div className="hero-meta-item">
              <span className="mono">APERTURA</span>
              <b>06 · 07 · 2026</b>
            </div>
            <div className="hero-meta-item">
              <span className="mono">UBICACIÓN</span>
              <b>LA PAZ — BOLIVIA</b>
            </div>
            <div className="hero-meta-item">
              <span className="mono">RESERVAS</span>
              <b>CAL + WHATSAPP</b>
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

function HeroV3Split() {
  // Split: left tipography, right vertical photo (rider style)
  return (
    <section className="hero" id="top">
      <div className="container" style={{ width: "100%" }}>
        <div className="hero-split">
          <div>
            <Reveal>
              <div className="eyebrow">
                <span style={{ color: "rgba(184,184,184,0.5)" }}>00 / INTRO</span>
                <span>LA PAZ — BOLIVIA</span>
              </div>
            </Reveal>
            <Reveal delay={120}>
              <h1 className="display hero-headline" style={{ marginTop: 24 }}>
                Tu sala.<br/>
                Tu hora.<br/>
                <em>Tu set.</em>
              </h1>
            </Reveal>
            <Reveal delay={240}>
              <p className="muted" style={{ fontSize: "clamp(16px, 1.4vw, 20px)", maxWidth: "44ch", lineHeight: 1.45, marginTop: 28 }}>
                Experimenta los CDJ-3000 y el DJM-A9 en una cabina privada. El mismo setup que encuentras en cualquier festival, disponible por hora.
              </p>
            </Reveal>
            <Reveal delay={360} style={{ display: "flex", gap: 16, flexWrap: "wrap", marginTop: 32 }}>
              <a href="#reservar" onClick={(e) => { e.preventDefault(); window.dispatchEvent(new Event("openBooking")); }} className="btn btn-signal btn-lg">
                Solicitar reserva
                <Arrow size={16} />
              </a>
              <a href="#servicios" className="btn btn-ghost btn-lg">
                Ver servicios
              </a>
            </Reveal>
          </div>
          <Reveal delay={180}>
            <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
              <Photo id="HERO-IMG-01" caption="Close-up CDJ-3000 jog wheel" className="hero-photo" />
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
                <div className="mono" style={{ display: "flex", flexDirection: "column", gap: 4 }}>
                  <span style={{ color: "rgba(184,184,184,0.5)" }}>FRAME 01/04</span>
                  <span style={{ color: "var(--white)" }}>SALA</span>
                </div>
                <div className="mono" style={{ display: "flex", flexDirection: "column", gap: 4, textAlign: "right" }}>
                  <span style={{ color: "rgba(184,184,184,0.5)" }}>APERTURA</span>
                  <span style={{ color: "var(--white)" }}>06 · 07 · 2026</span>
                </div>
              </div>
            </div>
          </Reveal>
        </div>
        <Reveal delay={500} as="div" className="hero-meta" style={{ marginTop: 80 }}>
          <div className="hero-meta-item">
            <span className="mono">EQUIPO</span>
            <b>CDJ-3000 × 2 + DJM-A9</b>
          </div>
          <div className="hero-meta-item">
            <span className="mono">CLASES</span>
            <b>BS 250/HORA</b>
          </div>
          <div className="hero-meta-item">
            <span className="mono">PRÁCTICA</span>
            <b>BS 100/HORA</b>
          </div>
          <div className="hero-meta-item">
            <span className="mono">ALQUILER</span>
            <b>BS 2.500/NOCHE</b>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function Hero({ variant }) {
  if (variant === "photo") return <HeroV2Photo />;
  if (variant === "split") return <HeroV3Split />;
  return <HeroV1Typography />;
}

Object.assign(window, { Hero, HeroV1Typography, HeroV2Photo, HeroV3Split });