// ============================================================
// OSCILADOR — Diferenciador (3 variantes)
// El equipo que vas a encontrar en cualquier cabina
// ============================================================

function DifV1MegaEquip() {
  return (
    <section className="section" id="diferenciador" style={{ overflow: "hidden" }}>
      <div className="container">
        <Reveal>
          <Eyebrow num="01 / EL EQUIPO">LO QUE HAY EN CABINA</Eyebrow>
        </Reveal>
        <Reveal delay={120}>
          <div style={{
            display: "grid",
            gridTemplateColumns: "1fr",
            gap: "clamp(24px, 4vw, 48px)",
            marginTop: 40,
          }}>
            <h2 className="display h-2" style={{ maxWidth: "18ch" }}>
              Practica con los <em style={{ color: "var(--silver)", fontStyle: "normal" }}>CDJ-3000.</em>
            </h2>
          </div>
        </Reveal>
        <div style={{
          display: "grid",
          gridTemplateColumns: "1fr",
          gap: 32,
          marginTop: 64,
          paddingTop: 32,
          borderTop: "1px solid var(--line)",
        }}
        className="dif-bottom-grid">
          <Reveal delay={240}>
            <p className="muted" style={{ fontSize: 17, lineHeight: 1.5, maxWidth: "42ch" }}>
              El reproductor que vas a encontrar en cualquier cabina.
              Aquí lo usas por hora, sin ataduras.
            </p>
          </Reveal>
          <Reveal delay={360}>
            <div className="rider" style={{ borderTop: 0 }}>
              <div className="rider-row" style={{ paddingTop: 0 }}>
                <span className="num">A1</span>
                <b>2× CDJ-3000</b>
                <span className="muted" style={{ fontSize: 14 }}>Pioneer DJ · setup en cabina</span>
              </div>
              <div className="rider-row">
                <span className="num">A2</span>
                <b>1× DJM-A9</b>
                <span className="muted" style={{ fontSize: 14 }}>Mixer de festivales</span>
              </div>
              <div className="rider-row" style={{ borderBottom: 0 }}>
                <span className="num">A3</span>
                <b>Reserva por hora</b>
                <span className="muted" style={{ fontSize: 14 }}>Sin matrícula, sin teoría obligatoria</span>
              </div>
            </div>
          </Reveal>
        </div>
      </div>
      <style>{`
        @media (min-width: 880px) {
          .dif-bottom-grid { grid-template-columns: 1fr 1.4fr; gap: 80px; align-items: start; }
        }
      `}</style>
    </section>
  );
}

function DifV2Statement() {
  return (
    <section className="section" id="diferenciador">
      <div className="container">
        <Reveal>
          <Eyebrow num="01 / EL EQUIPO">POR QUÉ ESTAMOS</Eyebrow>
        </Reveal>

        <div style={{ marginTop: 48, display: "grid", gap: "clamp(8px, 1.4vw, 18px)" }}>
          <Reveal delay={80}>
            <h2 className="display h-1" style={{ lineHeight: 0.94 }}>
              Los mismos<br/>CDJ-3000
            </h2>
          </Reveal>
          <Reveal delay={200}>
            <h2 className="display h-1" style={{ lineHeight: 0.94, color: "var(--silver)" }}>
              que están en
            </h2>
          </Reveal>
          <Reveal delay={320}>
            <h2 className="display h-1" style={{ lineHeight: 0.94 }}>
              la cabina.
            </h2>
          </Reveal>
        </div>

        <Reveal delay={500}>
          <div style={{
            marginTop: 80,
            paddingTop: 32,
            borderTop: "1px solid var(--line)",
            display: "grid",
            gap: 40,
            gridTemplateColumns: "1fr",
          }} className="dif-foot">
            <p className="muted" style={{ fontSize: 17, lineHeight: 1.55, maxWidth: "48ch" }}>
              Un controlador no te prepara igual. Aquí tocas en el mismo
              equipo que hay en el evento.
            </p>
            <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
              <span className="mono">ESTÁNDAR DE CABINA</span>
              <b style={{ fontFamily: "var(--font-display)", fontSize: 22, letterSpacing: "-0.01em" }}>
                CDJ-3000 + DJM-A9 — lo que suena en festivales y clubs.
              </b>
            </div>
          </div>
        </Reveal>
        <style>{`
          @media (min-width: 880px) {
            .dif-foot { grid-template-columns: 1fr 1fr; gap: 80px; }
          }
        `}</style>
      </div>
    </section>
  );
}

function DifV3Rider() {
  return (
    <section className="section" id="diferenciador">
      <div className="container">
        <div className="sec-head">
          <Reveal>
            <div>
              <Eyebrow num="01 / EL EQUIPO">EL EQUIPO QUE IMPORTA</Eyebrow>
              <h2 className="display h-3" style={{ marginTop: 18 }}>
                Toca con lo<br/>
                que ya está<br/>
                <em style={{ fontStyle: "normal", color: "var(--silver)" }}>en cabina.</em>
              </h2>
            </div>
          </Reveal>
          <Reveal delay={120}>
            <p className="muted" style={{ fontSize: 16, lineHeight: 1.55, maxWidth: "44ch" }}>
              El software no reemplaza tener la mano en el equipo.
              Misma configuración que en festivales, por hora.
            </p>
          </Reveal>
        </div>

        <div className="dif-rows">
          <Reveal delay={80}>
            <div className="dif-row">
              <span className="dif-rownum">A1 / EQUIPO</span>
              <div className="dif-rowhead">2× CDJ-3000<br/>+ DJM-A9</div>
              <p className="dif-rowbody">
                Pioneer DJ. La configuración que vas a encontrar en
                festivales y clubs.
              </p>
            </div>
          </Reveal>
          <Reveal delay={160}>
            <div className="dif-row">
              <span className="dif-rownum">A2 / ACCESO</span>
              <div className="dif-rowhead">Reserva<br/>por hora</div>
              <p className="dif-rowbody">
                Sin matrícula, sin teoría obligatoria. Bs 100/hora para tener
                la sala completa.
              </p>
            </div>
          </Reveal>
          <Reveal delay={240}>
            <div className="dif-row">
              <span className="dif-rownum">A3 / SALA</span>
              <div className="dif-rowhead">Cabina<br/>dedicada</div>
              <p className="dif-rowbody">
                Baja luz, monitoreo profesional, sin distracciones.
                Tu hora, tu música.
              </p>
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

function Diferenciador({ variant }) {
  if (variant === "statement") return <DifV2Statement />;
  if (variant === "rider")     return <DifV3Rider />;
  return <DifV1MegaEquip />;
}

Object.assign(window, { Diferenciador });