// ============================================================
// OSCILADOR — Galería (3 variantes) + Reglas + FAQ + CTA + Footer
// ============================================================

const GAL_DATA = [
  { id: "SLA-001", caption: "Plano general · sala en baja luz" },
  { id: "SLA-002", caption: "Close-up jog wheel · CDJ-3000" },
  { id: "SLA-003", caption: "Pantalla CDJ-3000" },
  { id: "SLA-004", caption: "DJM-A9 · faders y EQ" },
  { id: "SLA-005", caption: "Cabina · vista DJ" },
];

const GAL_SRC = {
  "SLA-001": "assets/images/sala-001-plano-general-cabina.png",
  "SLA-002": "assets/images/sala-002-closeup-jog-wheel-cdj.png",
  "SLA-003": "assets/images/sala-003-pantalla-cdj-track-cargado.png",
  "SLA-004": "assets/images/sala-004-closeup-mixer-djm-a9.png",
  "SLA-005": "assets/images/sala-005-setup-top-down-completo.png",
};

function GalV1Masonry() {
  return (
    <section className="section" id="sala">
      <div className="container">
        <SectionHead
          num="04 / EL ESPACIO"
          eyebrow="LA SALA"
          title="CDJ-3000 × 2. DJM-A9."
          titleClass="h-3"
          sub="El mismo setup que se usa en festivales. Cabina dedicada, baja luz, monitoreo profesional."
        />
        <div className="gal-grid">
          <Reveal delay={0} className="gal-1"><Photo id={GAL_DATA[4].id} caption="Setup completo" src={GAL_SRC["SLA-005"]} /></Reveal>
          <Reveal delay={80} className="gal-2"><Photo id={GAL_DATA[1].id} caption={GAL_DATA[1].caption} src={GAL_SRC[GAL_DATA[1].id]} /></Reveal>
          <Reveal delay={160} className="gal-3"><Photo id={GAL_DATA[2].id} caption={GAL_DATA[2].caption} src={GAL_SRC[GAL_DATA[2].id]} /></Reveal>
          <Reveal delay={240} className="gal-4"><Photo id={GAL_DATA[3].id} caption={GAL_DATA[3].caption} src={GAL_SRC[GAL_DATA[3].id]} /></Reveal>
        </div>
      </div>
    </section>
  );
}

function GalV2Scroll() {
  return (
    <section className="section" id="sala">
      <div className="container">
        <SectionHead
          num="04 / EL ESPACIO"
          eyebrow="LA SALA"
          title="CDJ-3000 × 2. DJM-A9."
          titleClass="h-3"
          sub="El mismo setup que se usa en festivales. Desliza para ver más."
        />
        <Reveal>
          <div className="gal-scroll">
            {GAL_DATA.map((g, i) => (
              <Photo key={g.id} id={g.id} caption={g.caption} />
            ))}
          </div>
        </Reveal>
        <Reveal delay={120}>
          <div className="mono" style={{ marginTop: 24, display: "flex", justifyContent: "space-between" }}>
            <span>← DESLIZAR</span>
            <span style={{ color: "rgba(184,184,184,0.5)" }}>{GAL_DATA.length} FRAMES</span>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function GalV3Stack() {
  return (
    <section className="section" id="sala">
      <div className="container">
        <SectionHead
          num="04 / EL ESPACIO"
          eyebrow="LA SALA"
          title="CDJ-3000 × 2. DJM-A9."
          titleClass="h-3"
          sub="El mismo setup que se usa en festivales. Cabina dedicada, baja luz, monitoreo profesional."
        />
        <div className="gal-stack">
          {GAL_DATA.slice(0, 3).map((g, i) => (
            <Reveal delay={i * 80} key={g.id}>
              <Photo id={g.id} caption={g.caption} />
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function Galeria({ variant }) {
  if (variant === "scroll") return <GalV2Scroll />;
  if (variant === "stack")  return <GalV3Stack />;
  return <GalV1Masonry />;
}

// ============================================================
// REGLAS DE LA SALA (rider técnico)
// ============================================================
function Reglas() {
  const rules = [
    ["R01", "Reserva por hora", "La sala se reserva por bloques de una hora. Llega 15 minutos antes."],
    ["R02", "USB propio", "Ven con tu música organizada en USB FAT32 o exFAT. Tenemos Rekordbox disponible."],
    ["R03", "Cancelación", "Avisa con al menos 4 horas de anticipación. Sin reembolso — puedes reprogramar dentro de los 7 días siguientes."],
    ["R04", "Hasta 2 personas", "1 persona: Bs 100/h. 2 personas participando (B2B, práctica conjunta): Bs 150/h. Si la segunda persona solo acompaña sin tocar, no hay cargo extra."],
    ["R05", "Audífonos", "Contamos con un set básico de audífonos. Para mejor experiencia, trae los tuyos."],
    ["R06", "Pago", "Solo QR o transferencia. No aceptamos efectivo; el pago confirma el slot y cierra la reserva."],
  ];
  return (
    <section className="section" id="reglas">
      <div className="container">
        <SectionHead
          num="05 / OPERATIVA"
          eyebrow="RIDER DE LA SALA"
          title="Reglas claras. Sin letra chica."
          titleClass="h-3"
          sub="Cómo funciona Oscilador. Pocas reglas, todas para que entres y salgas concentrado."
        />
        <div className="rider">
          {rules.map(([num, title, desc], i) => (
            <Reveal delay={i * 50} key={num}>
              <div className="rider-row">
                <span className="num">{num}</span>
                <b>{title}</b>
                <p className="muted" style={{ fontSize: 14, lineHeight: 1.5 }}>{desc}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============================================================
// FAQ
// ============================================================
function FAQItem({ q, a, defaultOpen = false }) {
  const [open, setOpen] = React.useState(defaultOpen);
  return (
    <div className={`faq-item ${open ? "open" : ""}`} onClick={() => setOpen(!open)}>
      <div className="faq-q">
        <span>{q}</span>
        <span className="faq-toggle" style={{ transition: "transform .3s ease" }}>+</span>
      </div>
      <div className="faq-a">{a}</div>
    </div>
  );
}

function FAQ() {
  return (
    <section className="section" id="faq">
      <div className="container">
        <SectionHead
          num="06 / PREGUNTAS"
          eyebrow="DUDAS FRECUENTES"
          title="Lo que solemos responder."
          titleClass="h-3"
        />
        <div>
          <FAQItem
            defaultOpen
            q="¿Necesito experiencia previa para reservar la sala?"
            a="No hace falta experiencia. Cualquiera puede reservar. Eso sí: si nunca tocaste los CDJ-3000, mejor empieza con una clase para no terminar pagando por hora aprendiendo botones."
          />
          <FAQItem
            q="¿Puedo ir con alguien más?"
            a="Sí, de a dos. Si el otro también toca (B2B o práctica compartida), son Bs 150/h en total. Si viene solo a acompañarte y no toca, no se cobra extra."
          />
          <FAQItem
            q="¿Qué se incluye en el alquiler para eventos?"
            a="2× CDJ-3000, DJM-A9, cables y monitoreo. El traslado va incluido, y mandamos un encargado técnico con el equipo. El setup no queda solo en ningún momento. Solo dentro de La Paz por ahora."
          />
          <FAQItem
            q="¿Cómo confirman las reservas?"
            a="Elige tu servicio y reserva en el calendario. Te mandamos el QR por WhatsApp, pagas y el slot queda confirmado."
          />
          <FAQItem
            q="¿Cuántas membresías hay disponibles?"
            a="Los cupos son fijos por plan. Cuando se llenan, abrimos lista de espera para el mes siguiente."
          />
          <FAQItem
            q="¿Cuál es la política de cancelación?"
            a="No realizamos devoluciones. Si cancelas con al menos 4 horas de anticipación, puedes reprogramar tu sesión en cualquier momento dentro de los 7 días siguientes a la cancelación."
          />
        </div>
      </div>
    </section>
  );
}

// ============================================================
// CTA FINAL
// ============================================================
function CTAFinal() {
  return (
    <section className="cta-final" id="reservar">
      <div className="cta-final-bg" aria-hidden="true">
        <WaveSVG width={2200} height={300} strokeWidth={1.4} stroke="rgba(255,255,255,0.7)" />
      </div>
      <div className="container" style={{ position: "relative", zIndex: 1 }}>
        <Reveal>
          <Eyebrow num="07 / RESERVA">LISTO PARA PRACTICAR</Eyebrow>
        </Reveal>
        <Reveal delay={120}>
          <h2 className="display" style={{ fontSize: "var(--display-2)", marginTop: 24, maxWidth: "16ch", marginLeft: "auto", marginRight: "auto" }}>
            ¿Listo para<br/>practicar?
          </h2>
        </Reveal>
        <Reveal delay={240}>
          <p className="muted" style={{ fontSize: 18, marginTop: 28, maxWidth: "42ch", marginLeft: "auto", marginRight: "auto", lineHeight: 1.55 }}>
            Elige tu servicio, reserva en el calendario, paga por WhatsApp. QR o transferencia. Cupos limitados.
          </p>
        </Reveal>
        <Reveal delay={360} style={{ marginTop: 48, display: "flex", justifyContent: "center" }}>
          <a
            href="#reservar"
            onClick={(e) => { e.preventDefault(); window.dispatchEvent(new Event("openBooking")); }}
            className="btn btn-signal btn-lg"
          >
            Solicitar reserva
            <Arrow size={16} />
          </a>
        </Reveal>
        <Reveal delay={480}>
          <div className="mono" style={{ marginTop: 28 }}>CONFIRMACIÓN EN MENOS DE 24H · SIN PAGO POR TARJETA · QR VÍA WHATSAPP</div>
        </Reveal>
      </div>
    </section>
  );
}

// ============================================================
// FOOTER
// ============================================================
function Footer() {
  return (
    <footer className="foot">
      <div className="container">
        <div className="foot-grid">
          <div>
            <Logo />
            <p style={{ marginTop: 22, lineHeight: 1.6, maxWidth: "32ch", color: "var(--silver)" }}>
              Academia de DJ y sala de práctica profesional. Calacoto, La Paz.
              Apertura 06 · 07 · 2026.
            </p>
          </div>
          <div>
            <h6>Navegación</h6>
            <ul style={{ listStyle: "none", display: "flex", flexDirection: "column", gap: 10 }}>
              <li><a href="#servicios">Servicios</a></li>
              <li><a href="#membresias">Membresías</a></li>
              <li><a href="#sala">La sala</a></li>
              <li><a href="#faq">FAQ</a></li>
            </ul>
          </div>
          <div>
            <h6>Contacto</h6>
            <ul style={{ listStyle: "none", display: "flex", flexDirection: "column", gap: 10 }}>
              <li><a href="https://wa.me/59167165251">WhatsApp</a></li>
              <li><a href="https://instagram.com/oscilador.bo">@oscilador.bo</a></li>
              <li><a href="mailto:hola@oscilador.bo">hola@oscilador.bo</a></li>
            </ul>
          </div>
          <div>
            <h6>Sala</h6>
            <ul style={{ listStyle: "none", display: "flex", flexDirection: "column", gap: 10 }}>
              <li>Calacoto, c/ Julio Patiño 1373, timbre 6</li>
              <li>Lun–Vie · 11:00–19:00</li>
              <li>Apertura: 06 · 07 · 2026</li>
            </ul>
          </div>
        </div>
        <div className="foot-bottom">
          <span>© 2026 OSCILADOR ACADEMY · LA PAZ / BOLIVIA</span>
          <div style={{ display: "flex", gap: 16, alignItems: "center" }}>
            <a href="assets/contracts/contrato-sala-ensayo-v2.pdf" target="_blank" rel="noopener noreferrer" style={{ color: "rgba(184,184,184,0.45)" }}>CONTRATO SALA</a>
            <span style={{ color: "rgba(184,184,184,0.25)" }}>·</span>
            <a href="assets/contracts/contrato-alquiler-equipos-v2.pdf" target="_blank" rel="noopener noreferrer" style={{ color: "rgba(184,184,184,0.45)" }}>CONTRATO EQUIPOS</a>
          </div>
          <span>SISTEMA · V0.1 · LANDING</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Galeria, Reglas, FAQ, CTAFinal, Footer });