// ============================================================
// OSCILADOR — Sección Instructor + Curso del Mes
// CLA-110 + CLA-111
// ============================================================

const LEXAND_BIO = {
  es: "Lexand es un DJ y productor boliviano reconocido por sus producciones de techno con una vibra hipnótica y progresiva. " +
    "Su esencia de baterista se percibe claramente en sus mezclas, sets y producciones, que suelen destacar por su fuerza rítmica y energía. " +
    "Ha firmado con sellos de Alemania, Rusia, Francia, Turquía, México, Grecia y Bolivia, y sus producciones han sido publicadas en sellos como Voltage Records, Music4Aliens Black, Pure Dope Digital, Smashead Records, HEARec, VOLX y Ohm Resistance. " +
    "También ha compartido cabina con artistas internacionales como Que Sakamoto, Valentina Spirito, AXL, Veronique, Unklevon, Marco Effe, Beico y Blancah, entre otros, y se ha presentado en países como Japón, México y Perú.",
  en: "Lexand is a Bolivian DJ/producer known for his techno productions with hypnotic and progressive vibes. " +
    "His drummer spirit can be appreciated in his mixes, DJ sets, and productions, which tend to be highly rhythmic and energetic. " +
    "He has signed with labels from Germany, Russia, France, Turkey, Mexico, Greece, Bolivia, and his productions can be found on labels such as Voltage Records, Music4Aliens Black, Pure Dope Digital, Smashead Records, HEARec, VOLX, and Ohm Resistance. " +
    "He has shared the booth with international artists such as Que Sakamoto, Valentina Spirito, AXL, Veronique, Unklevon, Marco Effe, Beico, Blancah among others and has performed in countries like Japan, Mexico, and Peru.",
};

const LEXAND_SOCIAL = [
  { label: "Instagram",  href: "https://www.instagram.com/lexand.music/" },
  { label: "Soundcloud", href: "https://soundcloud.com/lexand-music" },
  { label: "Facebook",   href: "https://www.facebook.com/lexand.music" },
  { label: "Mixcloud",   href: "https://www.mixcloud.com/Lexand/" },
];

function SectionInstructor() {
  const [bioLang, setBioLang] = React.useState("es");
  return (
    <section className="section" id="instructor">
      <div className="container">

        {/* ── Instructor residente ── */}
        <SectionHead
          num="02 / INSTRUCTOR"
          eyebrow="QUIEN ENSEÑA"
          title="De la cabina a la sala."
          titleClass="h-3"
          sub="Una hora con el instructor. Tu set, tus errores, corrección en directo."
        />

        <div className="inst-grid">

          {/* Foto */}
          <Reveal>
            <div className="inst-photo-wrap">
              <img
                src="assets/images/lexand-profile.jpg"
                alt="Lexand — instructor residente Oscilador Academy"
                className="inst-photo"
              />
            </div>
          </Reveal>

          {/* Bio */}
          <Reveal delay={160}>
            <div className="inst-info">
              <span className="tag" style={{ marginBottom: 16, display: "inline-block" }}>RESIDENTE</span>
              <h3
                className="display"
                style={{
                  fontSize: "clamp(40px, 5.5vw, 72px)",
                  lineHeight: 0.92,
                  letterSpacing: "-0.03em",
                  marginBottom: 20,
                }}
              >
                LEXAND
              </h3>

              {/* DJ Info */}
              <div style={{
                display: "grid",
                gridTemplateColumns: "auto 1fr",
                columnGap: 20,
                rowGap: 6,
                padding: "14px 0",
                borderTop: "1px solid var(--line)",
                borderBottom: "1px solid var(--line)",
                marginBottom: 20,
              }}>
                {[
                  ["DJ desde",   "2013"],
                  ["Género",     "Techno"],
                  ["Subgéneros", "Deep Tech · Minimal · Progressive · Hard Groove"],
                  ["Formato",    "Digital"],
                ].map(([k, v]) => (
                  <React.Fragment key={k}>
                    <span className="mono" style={{ fontSize: 9, color: "rgba(184,184,184,0.4)", letterSpacing: "0.12em", textTransform: "uppercase", whiteSpace: "nowrap", paddingTop: 1 }}>{k}</span>
                    <span className="mono" style={{ fontSize: 11, color: "var(--silver)", letterSpacing: "0.04em" }}>{v}</span>
                  </React.Fragment>
                ))}
              </div>

              {/* Bio lang toggle */}
              <div style={{ display: "inline-flex", border: "1px solid var(--line)", marginBottom: 14 }}>
                {["es", "en"].map(l => (
                  <button
                    key={l}
                    onClick={() => setBioLang(l)}
                    className="mono"
                    style={{
                      background: bioLang === l ? "var(--white)" : "transparent",
                      border: "none",
                      borderRight: l === "es" ? "1px solid var(--line)" : "none",
                      cursor: "pointer",
                      fontSize: 10,
                      letterSpacing: "0.12em",
                      color: bioLang === l ? "var(--black)" : "rgba(184,184,184,0.45)",
                      padding: "7px 16px",
                      textTransform: "uppercase",
                      transition: "background 180ms, color 180ms",
                      minWidth: 44,
                      minHeight: 32,
                      lineHeight: 1,
                    }}
                  >
                    {l.toUpperCase()}
                  </button>
                ))}
              </div>
              <p
                className="muted"
                style={{ fontSize: 16, lineHeight: 1.65, maxWidth: "44ch", marginBottom: 28 }}
              >
                {LEXAND_BIO[bioLang]}
              </p>

              {/* Social */}
              <div
                style={{
                  display: "flex",
                  flexWrap: "wrap",
                  gap: "8px 20px",
                  paddingTop: 20,
                  borderTop: "1px solid var(--line)",
                  marginBottom: 28,
                }}
              >
                {LEXAND_SOCIAL.map(({ label, href }) => (
                  <a
                    key={label}
                    href={href}
                    target="_blank"
                    rel="noopener"
                    className="mono"
                    style={{
                      color: "var(--silver)",
                      fontSize: 12,
                      display: "inline-flex",
                      alignItems: "center",
                      gap: 6,
                      textDecoration: "none",
                      letterSpacing: "0.08em",
                    }}
                    onMouseEnter={(e) => { e.currentTarget.style.color = "var(--white)"; }}
                    onMouseLeave={(e) => { e.currentTarget.style.color = "var(--silver)"; }}
                  >
                    {label}
                    <Arrow size={10} />
                  </a>
                ))}
              </div>

              {/* CTA */}
              <a
                href="#reservar"
                onClick={(e) => { e.preventDefault(); window.dispatchEvent(new CustomEvent("openBooking", { detail: { tag: "CLASE" } })); }}
                className="btn btn-ghost"
                style={{ height: 46, padding: "0 20px" }}
              >
                Reservar clase personal
                <Arrow size={12} />
              </a>
            </div>
          </Reveal>
        </div>

        {/* ── Slot Profesor del Mes ── */}
        <Reveal delay={80}>
          <div className="inst-guest">
            <span className="mono" style={{ fontSize: 10, color: "rgba(184,184,184,0.4)", letterSpacing: "0.14em" }}>
              PROFESOR DEL MES
            </span>
            <p
              className="muted"
              style={{ fontSize: 14, marginTop: 8, lineHeight: 1.5 }}
            >
              Un instructor invitado por módulo. Se anuncia antes del lanzamiento.
            </p>
          </div>
        </Reveal>

        {/* ── Curso del Mes ── */}
        <Reveal delay={120}>
          <div className="curso-block" id="curso">
            <div className="curso-head">
              <span className="tag">CURSO · JULIO 2026</span>
              <span
                className="mono"
                style={{ fontSize: 10, color: "rgba(184,184,184,0.4)", letterSpacing: "0.14em" }}
              >
                GRUPOS REDUCIDOS · CUPOS LIMITADOS
              </span>
            </div>

            <h3
              className="display"
              style={{
                fontSize: "clamp(28px, 4vw, 48px)",
                lineHeight: 1,
                letterSpacing: "-0.02em",
                margin: "18px 0 12px",
              }}
            >
              Próximamente.
            </h3>

            <p
              className="muted"
              style={{ fontSize: 15, lineHeight: 1.6, maxWidth: "44ch", marginBottom: 24 }}
            >
              El primer curso grupal se anuncia antes del 13 de junio.
              Grupos reducidos, un instructor distinto cada mes.
            </p>

            <div
              style={{
                display: "flex",
                alignItems: "baseline",
                gap: 6,
                marginBottom: 28,
              }}
            >
              <span
                className="mono"
                style={{
                  fontSize: "clamp(28px, 3.5vw, 44px)",
                  color: "var(--white)",
                  lineHeight: 1,
                  letterSpacing: "-0.02em",
                }}
              >
                Bs 1.200
              </span>
              <span className="mono" style={{ color: "var(--silver)", fontSize: 13 }}>
                / precio de apertura
              </span>
              <span
                className="mono"
                style={{
                  color: "rgba(184,184,184,0.45)",
                  fontSize: 12,
                  marginLeft: 8,
                  textDecoration: "line-through",
                }}
              >
                Bs 1.500
              </span>
            </div>

            <a
              href={`https://wa.me/59167165251?text=${encodeURIComponent("Hola, quiero recibir aviso cuando abra el Curso del Mes de julio.")}`}
              target="_blank"
              rel="noopener"
              className="btn btn-ghost"
              style={{ height: 46, padding: "0 20px" }}
            >
              <WhatsAppIcon size={16} />
              Avisar cuando esté disponible
              <Arrow size={12} />
            </a>
          </div>
        </Reveal>

      </div>

      <style>{`
        /* ── Instructor grid ── */
        .inst-grid {
          display: grid;
          grid-template-columns: 1fr;
          gap: 40px;
          margin-top: 56px;
        }
        @media (min-width: 860px) {
          .inst-grid { grid-template-columns: 380px 1fr; gap: 64px; align-items: start; }
        }

        /* ── Photo ── */
        .inst-photo-wrap {
          width: 100%;
          aspect-ratio: 1 / 1;
          overflow: hidden;
          max-width: 380px;
        }
        .inst-photo {
          width: 100%;
          height: 100%;
          object-fit: cover;
          object-position: center top;
          filter: grayscale(100%);
          display: block;
        }

        /* ── Info ── */
        .inst-info { display: flex; flex-direction: column; justify-content: center; }

        /* ── Guest slot ── */
        .inst-guest {
          margin-top: 40px;
          padding: 24px;
          border: 1px solid var(--line);
          border-left: 2px solid rgba(184,184,184,0.2);
        }

        /* ── Curso del Mes ── */
        .curso-block {
          margin-top: 56px;
          padding: clamp(28px, 4vw, 48px);
          border: 1px solid var(--line);
          border-top: 2px solid var(--white);
        }
        .curso-head {
          display: flex;
          align-items: center;
          gap: 16px;
          flex-wrap: wrap;
        }
      `}</style>
    </section>
  );
}

Object.assign(window, { SectionInstructor });