// ============================================================
// OSCILADOR — App principal: Header + composición + Tweaks
// ============================================================

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroVariant": "typo",
  "diferenciadorVariant": "mega",
  "serviciosVariant": "cards",
  "membresiasVariant": "stage",
  "galeriaVariant": "masonry",
  "showMarquee": true,
  "showReglas": true,
  "showFAQ": true
}/*EDITMODE-END*/;

// ──────────────── WhatsApp floating button
function WAFloatBtn() {
  const [visible, setVisible] = React.useState(false);
  React.useEffect(() => {
    const t = setTimeout(() => setVisible(true), 2000);
    return () => clearTimeout(t);
  }, []);
  return (
    <a
      href="https://wa.me/59167165251"
      target="_blank"
      rel="noopener noreferrer"
      className={`wa-float${visible ? " visible" : ""}`}
      aria-label="Contactar por WhatsApp"
    >
      <WhatsAppIcon size={22} />
      <span className="wa-float-label">WhatsApp</span>
    </a>
  );
}

// ──────────────── Header
function Header() {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 20);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <header className={`hdr ${scrolled ? "scrolled" : ""}`}>
      <div className="container hdr-inner">
        <Logo />
        <nav className="hdr-nav">
          <a href="#instructor">Instructor</a>
          <a href="#servicios">Servicios</a>
          <a href="#membresias">Membresías</a>
          <a href="#sala">La sala</a>
          <a href="#faq">FAQ</a>
        </nav>
        <a href="#reservar" onClick={(e) => { e.preventDefault(); window.dispatchEvent(new Event("openBooking")); }} className="btn btn-ghost" style={{ height: 44, padding: "0 18px" }}>
          Solicitar reserva
          <Arrow size={12} />
        </a>
      </div>
    </header>
  );
}

// ──────────────── App
function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  const marqueeItems = [
    "PIONEER CDJ-3000",
    "DJM-A9",
    "LA PAZ · BOLIVIA",
    "APERTURA 06 · 07 · 2026",
    "RESERVA EN CAL + WHATSAPP",
    "CUPOS LIMITADOS",
    "BS 100 / HORA · SALA",
    "BS 250 / HORA · CLASE",
    "PRIMER CDJ-3000 ABIERTO A PRÁCTICA EN LA PAZ",
  ];

  return (
    <>
      <Header />
      <main>
        <Hero variant={t.heroVariant} />
        {t.showMarquee && <Marquee items={marqueeItems} />}
        <Diferenciador variant={t.diferenciadorVariant} />
        <SectionDivider from="01 / EL EQUIPO" to="02 / INSTRUCTOR" target="#instructor" />
        <SectionInstructor />
        <SectionDivider from="02 / INSTRUCTOR" to="03 / OFERTA" target="#servicios" />
        <Servicios variant={t.serviciosVariant} />
        <SectionDivider from="03 / OFERTA" to="04 / MEMBRESÍAS" target="#membresias" />
        <Membresias variant={t.membresiasVariant} />
        <SectionDivider from="04 / MEMBRESÍAS" to="05 / EL ESPACIO" target="#sala" />
        <Galeria variant={t.galeriaVariant} />
        {t.showReglas && <SectionDivider from="05 / EL ESPACIO" to="06 / OPERATIVA" target="#reglas" />}
        {t.showReglas && <Reglas />}
        {t.showFAQ && <SectionDivider from={t.showReglas ? "06 / OPERATIVA" : "05 / EL ESPACIO"} to="07 / PREGUNTAS" target="#faq" />}
        {t.showFAQ && <FAQ />}
        <CTAFinal />
      </main>
      <Footer />

      <TweaksPanel title="Tweaks · Oscilador">
        <TweakSection label="Hero" />
        <TweakRadio
          label="Variante"
          value={t.heroVariant}
          options={[
            { value: "typo",  label: "Tipo" },
            { value: "photo", label: "Foto" },
            { value: "split", label: "Split" },
          ]}
          onChange={(v) => setTweak("heroVariant", v)}
        />

        <TweakSection label="Diferenciador (CDJ-3000)" />
        <TweakRadio
          label="Variante"
          value={t.diferenciadorVariant}
          options={[
            { value: "mega",      label: "Mega" },
            { value: "statement", label: "Frase" },
            { value: "rider",     label: "Rider" },
          ]}
          onChange={(v) => setTweak("diferenciadorVariant", v)}
        />

        <TweakSection label="Servicios" />
        <TweakRadio
          label="Variante"
          value={t.serviciosVariant}
          options={[
            { value: "cards",    label: "Cards" },
            { value: "rows",     label: "Filas" },
            { value: "numbered", label: "Numerada" },
          ]}
          onChange={(v) => setTweak("serviciosVariant", v)}
        />

        <TweakSection label="Membresías" />
        <TweakRadio
          label="Variante"
          value={t.membresiasVariant}
          options={[
            { value: "grid",  label: "Grid" },
            { value: "stage", label: "Stage" },
            { value: "table", label: "Tabla" },
          ]}
          onChange={(v) => setTweak("membresiasVariant", v)}
        />

        <TweakSection label="Galería" />
        <TweakRadio
          label="Variante"
          value={t.galeriaVariant}
          options={[
            { value: "masonry", label: "Masonry" },
            { value: "scroll",  label: "Scroll" },
            { value: "stack",   label: "Stack" },
          ]}
          onChange={(v) => setTweak("galeriaVariant", v)}
        />

        <TweakSection label="Extras" />
        <TweakToggle
          label="Marquee técnico"
          value={t.showMarquee}
          onChange={(v) => setTweak("showMarquee", v)}
        />
        <TweakToggle
          label="Reglas de la sala"
          value={t.showReglas}
          onChange={(v) => setTweak("showReglas", v)}
        />
        <TweakToggle
          label="FAQ"
          value={t.showFAQ}
          onChange={(v) => setTweak("showFAQ", v)}
        />
      </TweaksPanel>
      <BookingOverlay />
      <BookingConfirmed />
      <WAFloatBtn />
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);
