// ============================================================
// OSCILADOR - Pagina Curso Agosto
// ============================================================

const COURSE_AGOSTO_WA_TEXT = "Hola, quiero información para inscribirme al Curso Agosto 2026 con Lexand. Vi que son 12 sesiones, lunes/miércoles/viernes de 14:00 a 16:00, con precio de lanzamiento Bs 1.300.";
const COURSE_AGOSTO_WA_URL = `https://wa.me/59167165251?text=${encodeURIComponent(COURSE_AGOSTO_WA_TEXT)}`;
const COURSE_AGOSTO_AVAILABLE_SPOTS = 4;
const COURSE_AGOSTO_DEADLINE_LABEL = "Lunes 27 de julio";
const COURSE_AGOSTO_DEADLINE_LONG = "Inscripciones abiertas hasta el lunes 27 de julio de 2026.";
const COURSE_LEXAND_BIO = "Lexand es un DJ y productor boliviano reconocido por producciones de techno con una vibra hipnótica y progresiva. Su esencia de baterista se percibe en mezclas, sets y producciones con fuerza rítmica y energía. Ha firmado con sellos de Alemania, Rusia, Francia, Turquía, México, Grecia y Bolivia, y ha compartido cabina con artistas internacionales en Japón, México y Perú.";
const COURSE_LEXAND_STATS = [
  ["DJ desde", "2013"],
  ["Género", "Techno"],
  ["Subgéneros", "Deep Tech · Minimal · Progressive · Hard Groove"],
];
const COURSE_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 setMetaContent(selector, value) {
  const el = document.querySelector(selector);
  if (el) el.setAttribute("content", value);
}

function CursoAgostoPage() {
  React.useEffect(() => {
    document.title = "Curso Agosto 2026 | Oscilador Academy";
    setMetaContent("meta[name='description']", "Curso grupal de agosto de Oscilador Academy con Lexand en La Paz. Lunes, miércoles y viernes de 14:00 a 16:00. 12 sesiones. Inscripciones hasta el lunes 27 de julio.");
    setMetaContent("meta[property='og:url']", "https://oscilador.net/curso-agosto");
    setMetaContent("meta[property='og:title']", "Curso Agosto 2026 | Oscilador Academy");
    setMetaContent("meta[property='og:description']", "Curso grupal de agosto con Lexand. 12 sesiones de 2 horas para niveles básico e intermedio.");
    setMetaContent("meta[name='twitter:title']", "Curso Agosto 2026 | Oscilador Academy");
    setMetaContent("meta[name='twitter:description']", "Curso grupal de agosto con Lexand. Lunes, miércoles y viernes de 14:00 a 16:00.");
    const canonical = document.querySelector("link[rel='canonical']");
    if (canonical) canonical.setAttribute("href", "https://oscilador.net/curso-agosto");
  }, []);

  const facts = [
    ["Nivel", "Básico e intermedio"],
    ["Días", "Lunes · miércoles · viernes"],
    ["Horario", "14:00–16:00"],
    ["Duración", "12 sesiones · 2 h por sesión"],
    ["Cupo", `${COURSE_AGOSTO_AVAILABLE_SPOTS} cupos disponibles`],
    ["Cierre de inscripción", COURSE_AGOSTO_DEADLINE_LABEL],
    ["Inversión", "Bs 1.300 lanzamiento"],
  ];

  const contentBlocks = [
    ["01", "Contexto y géneros", "Repaso ágil por la historia de la electrónica y corrientes principales como house, techno y trance, entendiendo cómo la tecnología moldeó cada sonido."],
    ["02", "Equipamiento profesional", "Familiarización con CDJ-3000, controladores y mezcladoras. Conexiones, flujo de señal y accesorios para evitar imprevistos técnicos."],
    ["03", "Beatmatching y mezcla", "Ajuste de tempo y fase sin depender del sync. Ecualización, efectos y transiciones armónicas para mezclas limpias y fluidas."],
    ["04", "Preparación pre-show", "Curación musical, organización de playlists por energía y clave, y checklist técnica antes de una presentación."],
    ["05", "Producción aplicada", "Nociones básicas de DAWs, síntesis y manejo de samples para incorporar recursos propios dentro de tus sets."],
    ["06", "Identidad y estilo", "Construcción de un sonido personal a partir de tus referencias, sin perder autenticidad ni conexión con la pista."],
    ["07", "Promoción y marca", "Estrategias concretas para posicionar tu alias en redes y plataformas con una imagen coherente."],
    ["08", "Práctica y evaluación", "Sesiones con equipo real, simulación de escenario y retroalimentación personalizada por parte de Lexand."],
  ];

  const scheduleBlocks = [
    ["Lunes", "14:00–16:00", "Clase grupal"],
    ["Miércoles", "14:00–16:00", "Clase grupal"],
    ["Viernes", "14:00–16:00", "Clase grupal"],
  ];

  return (
    <>
      <window.Header currentPage="curso" />
      <main className="course-page">
        <section className="course-hero">
          <div className="course-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="" />
            </picture>
          </div>
          <div className="course-wavebg" aria-hidden="true">
            <WaveSVG width={1400} height={132} strokeWidth={1.35} stroke="rgba(37, 211, 102, 0.58)" />
          </div>
          <div className="container course-hero-inner">
            <Reveal>
              <div className="course-kicker">
                <span className="tag solid">CURSO · AGOSTO 2026</span>
                <span className="mono">GRUPOS REDUCIDOS · {COURSE_AGOSTO_AVAILABLE_SPOTS} CUPOS DISPONIBLES</span>
                <span className="mono">CIERRE · {COURSE_AGOSTO_DEADLINE_LABEL}</span>
              </div>
            </Reveal>
            <Reveal delay={90}>
              <h1 className="display course-title">Curso Agosto</h1>
            </Reveal>
            <Reveal delay={160}>
              <p className="course-lede">
                Formación práctica con criterio profesional para niveles básico e intermedio. Técnica sólida, criterio musical y preparación real para salir a tocar.
              </p>
            </Reveal>
            <Reveal delay={240}>
              <div className="course-price-strip">
                <span>Bs 1.300</span>
                <small>precio de lanzamiento</small>
                <del>Bs 1.500</del>
              </div>
            </Reveal>
            <Reveal delay={320}>
              <div className="course-actions">
                <a href={COURSE_AGOSTO_WA_URL} target="_blank" rel="noopener noreferrer" className="btn btn-signal btn-lg">
                  Inscribirme por WhatsApp
                  <Arrow size={16} />
                </a>
                <a href="/" className="btn btn-ghost btn-lg">
                  Ver servicios
                  <Arrow size={16} />
                </a>
              </div>
            </Reveal>
          </div>
        </section>

        <section className="section course-section course-instructor-section">
          <div className="container course-instructor-grid">
            <Reveal className="course-instructor-copy-block">
              <div className="course-instructor-copy">
                <span className="tag">INSTRUCTOR DEL CURSO</span>
                <h2 className="display course-section-title">Lexand</h2>
                <p className="muted course-copy course-copy-lg">{COURSE_LEXAND_BIO}</p>
                <div className="course-instructor-meta">
                  {COURSE_LEXAND_STATS.map(([label, value]) => (
                    <div key={label}>
                      <span className="mono">{label}</span>
                      <strong>{value}</strong>
                    </div>
                  ))}
                </div>
                <div className="course-instructor-social">
                  {COURSE_LEXAND_SOCIAL.map(({ label, href }) => (
                    <a key={label} href={href} target="_blank" rel="noopener noreferrer" className="mono">
                      {label}
                      <Arrow size={10} />
                    </a>
                  ))}
                </div>
              </div>
            </Reveal>
            <Reveal delay={120} className="course-instructor-photo-block">
              <div className="course-instructor-photo">
                <img src="assets/images/lexand-profile.jpg" alt="Lexand, instructor de Oscilador Academy" />
              </div>
            </Reveal>
          </div>
        </section>

        <section className="section course-section course-summary-section">
          <div className="container course-info-grid">
            <Reveal>
              <div>
                <Eyebrow>DATOS DEL CURSO</Eyebrow>
                <h2 className="display course-section-title">Formación práctica, cupo reducido.</h2>
                <p className="muted course-copy">
                  Tres clases por semana, dos horas por sesión. El curso combina técnica, criterio musical, equipo real y retroalimentación personalizada.
                  {" "}{COURSE_AGOSTO_DEADLINE_LONG}
                </p>
                <div className="course-facts">
                  {facts.map(([label, value]) => (
                    <div className="course-fact" key={label}>
                      <span className="mono">{label}</span>
                      <strong>{value}</strong>
                    </div>
                  ))}
                </div>
              </div>
            </Reveal>
            <Reveal delay={120}>
              <div className="course-schedule-card">
                <Eyebrow>HORARIO</Eyebrow>
                <div className="course-schedule">
                  {scheduleBlocks.map(([day, hour, label]) => (
                    <div className="course-schedule-row" key={day}>
                      <span className="mono">{day}</span>
                      <strong>{hour}</strong>
                      <small>{label}</small>
                    </div>
                  ))}
                </div>
              </div>
            </Reveal>
          </div>
        </section>

        <section className="section course-section course-topics-section">
          <div className="container">
            <SectionHead
              eyebrow="TEMARIO RESUMIDO"
              title="Lo que vas a trabajar."
              titleClass="h-3"
              sub="Una estructura práctica para pasar de conceptos sueltos a criterio de cabina: selección, mezcla, preparación, producción básica e identidad."
            />
            <div className="course-content-grid">
              {contentBlocks.map(([num, title, body], i) => (
                <Reveal delay={i * 55} key={num}>
                  <article className="course-module">
                    <span className="mono">{num}</span>
                    <h2>{title}</h2>
                    <p>{body}</p>
                  </article>
                </Reveal>
              ))}
            </div>
          </div>
        </section>

        <section className="section course-final">
          <div className="container">
            <Reveal>
              <Eyebrow>INSCRIPCIÓN</Eyebrow>
            </Reveal>
            <Reveal delay={100}>
              <h2 className="display">Reserva tu cupo.</h2>
            </Reveal>
            <Reveal delay={180}>
              <p className="muted">
                Consulta sin compromiso. Tu lugar se reserva con inscripción previa. {COURSE_AGOSTO_DEADLINE_LONG}
              </p>
            </Reveal>
            <Reveal delay={260}>
              <a href={COURSE_AGOSTO_WA_URL} target="_blank" rel="noopener noreferrer" className="btn btn-signal btn-lg">
                Consultar cupo
                <WhatsAppIcon size={18} />
              </a>
            </Reveal>
          </div>
        </section>
      </main>
      <window.Footer />
      <window.WAFloatBtn />

      <style>{`
        .course-page {
          background: var(--black);
          color: var(--white);
        }
        .course-hero {
          position: relative;
          min-height: clamp(560px, 82svh, 760px);
          display: flex;
          align-items: center;
          overflow: hidden;
          padding: clamp(112px, 13vh, 152px) 0 clamp(42px, 6vw, 78px);
        }
        .course-hero-media {
          position: absolute;
          inset: 0;
          z-index: 0;
        }
        .course-hero-media picture {
          display: block;
          width: 100%;
          height: 100%;
        }
        .course-hero-media img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          object-position: center center;
          filter: contrast(1.04) saturate(1.08);
          opacity: 0.86;
        }
        .course-hero::after {
          content: "";
          position: absolute;
          inset: 0;
          z-index: 1;
          background:
            linear-gradient(90deg, rgba(5,5,5,0.92) 0%, rgba(5,5,5,0.68) 46%, rgba(5,5,5,0.24) 100%),
            linear-gradient(180deg, rgba(5,5,5,0.62) 0%, rgba(5,5,5,0.06) 44%, rgba(5,5,5,0.86) 100%),
            radial-gradient(circle at 76% 88%, rgba(37,211,102,0.22), transparent 28%);
        }
        .course-hero::before {
          content: "";
          position: absolute;
          left: 0;
          right: 0;
          bottom: 0;
          height: 2px;
          z-index: 2;
          background: linear-gradient(90deg, transparent 8%, rgba(37,211,102,0.72) 46%, transparent 92%);
        }
        .course-wavebg {
          position: absolute;
          left: -8vw;
          right: -8vw;
          bottom: clamp(24px, 5vw, 58px);
          z-index: 2;
          opacity: 0.34;
          pointer-events: none;
          transform: translateY(18px);
        }
        .course-wavebg svg {
          width: 116%;
          height: clamp(70px, 9vw, 132px);
          filter: drop-shadow(0 0 24px rgba(37,211,102,0.22));
        }
        .course-hero-inner {
          position: relative;
          z-index: 3;
        }
        .course-kicker {
          display: flex;
          align-items: center;
          gap: 16px;
          flex-wrap: wrap;
        }
        .course-title {
          color: var(--white);
          font-size: clamp(52px, 7.4vw, 104px);
          max-width: 9ch;
          margin-top: 24px;
          letter-spacing: 0;
        }
        .course-lede {
          color: rgba(255,255,255,0.82);
          font-size: clamp(16px, 1.35vw, 20px);
          line-height: 1.42;
          max-width: 42ch;
          margin-top: 22px;
        }
        .course-price-strip {
          display: flex;
          align-items: baseline;
          gap: 12px;
          flex-wrap: wrap;
          margin-top: 28px;
          padding-top: 22px;
          border-top: 1px solid var(--line-strong);
        }
        .course-price-strip span {
          font-family: var(--font-mono);
          font-size: clamp(32px, 4vw, 58px);
          line-height: 1;
        }
        .course-price-strip small,
        .course-price-strip del {
          font-family: var(--font-mono);
          color: var(--silver);
          text-transform: uppercase;
          letter-spacing: 0.06em;
        }
        .course-actions {
          display: flex;
          gap: 12px;
          flex-wrap: wrap;
          margin-top: 28px;
        }
        .course-section {
          padding-top: clamp(44px, 5vw, 76px);
          padding-bottom: clamp(44px, 5vw, 76px);
        }
        .course-section .sec-head h2,
        .course-section-title {
          letter-spacing: 0;
        }
        .course-section .sec-head {
          margin-bottom: clamp(24px, 3vw, 38px);
        }
        .course-section .sec-head h2 {
          font-family: var(--font-body);
          font-weight: 500;
          text-transform: none;
          font-size: clamp(34px, 4.6vw, 64px);
          line-height: 1.05;
        }
        .course-content-grid {
          display: grid;
          grid-template-columns: 1fr;
          gap: 12px;
          align-items: stretch;
          grid-auto-rows: 1fr;
        }
        .course-content-grid > .reveal {
          display: flex;
        }
        @media (min-width: 860px) {
          .course-content-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
          }
        }
        @media (min-width: 1180px) {
          .course-content-grid {
            grid-template-columns: repeat(4, minmax(0, 1fr));
          }
        }
        .course-module {
          min-height: 212px;
          width: 100%;
          height: 100%;
          border: 1px solid var(--line);
          padding: clamp(22px, 2vw, 28px);
          display: flex;
          flex-direction: column;
          justify-content: flex-start;
          gap: 14px;
          background: rgba(255,255,255,0.025);
        }
        .course-module h2 {
          font-family: var(--font-body);
          text-transform: none;
          font-weight: 500;
          font-size: clamp(19px, 1.45vw, 23px);
          line-height: 1.15;
          letter-spacing: 0;
          color: var(--white);
        }
        .course-module p,
        .course-copy,
        .course-final p {
          color: var(--silver);
          font-size: 15.5px;
          line-height: 1.58;
        }
        .course-copy-lg {
          font-size: clamp(16px, 1.4vw, 18px);
          line-height: 1.62;
        }
        .course-schedule {
          display: grid;
          gap: 10px;
          margin-top: 34px;
        }
        .course-schedule-card {
          border-top: 1px solid var(--line);
          padding-top: 30px;
        }
        .course-schedule-row {
          display: grid;
          grid-template-columns: minmax(108px, 0.42fr) 1fr;
          gap: 6px 18px;
          align-items: center;
          padding: 20px 0;
          border-top: 1px solid var(--line);
        }
        .course-schedule-row:last-child {
          border-bottom: 1px solid var(--line);
        }
        .course-schedule-row strong {
          font-family: var(--font-body);
          font-weight: 500;
          font-size: clamp(22px, 2.4vw, 34px);
          line-height: 1.05;
          letter-spacing: 0;
        }
        .course-schedule-row small {
          grid-column: 2;
          font-family: var(--font-mono);
          color: var(--silver);
          text-transform: uppercase;
          letter-spacing: 0.08em;
        }
        .course-info-grid {
          display: grid;
          grid-template-columns: 1fr;
          gap: 38px;
          align-items: start;
        }
        @media (min-width: 900px) {
          .course-info-grid {
            grid-template-columns: 1fr 1fr;
            gap: 64px;
          }
        }
        .course-section-title {
          font-family: var(--font-body);
          font-weight: 500;
          text-transform: none;
          font-size: clamp(34px, 4.2vw, 58px);
          line-height: 1.05;
          margin-top: 22px;
          max-width: 12ch;
        }
        .course-summary-section .course-section-title {
          font-family: var(--font-body);
          font-weight: 500;
          text-transform: none;
          font-size: clamp(30px, 3.4vw, 48px);
          line-height: 1.08;
          max-width: 15ch;
        }
        .course-copy {
          max-width: 42ch;
          margin-top: 26px;
        }
        .course-facts {
          border-top: 1px solid var(--line);
          margin-top: 34px;
        }
        .course-fact {
          display: grid;
          grid-template-columns: 1fr;
          gap: 8px;
          padding: 22px 0;
          border-bottom: 1px solid var(--line);
        }
        @media (min-width: 640px) {
          .course-fact {
            grid-template-columns: 180px 1fr;
          }
        }
        .course-fact strong {
          font-family: var(--font-body);
          font-weight: 500;
          text-transform: none;
          font-size: clamp(18px, 1.8vw, 26px);
          line-height: 1.15;
          letter-spacing: 0;
        }
        .course-instructor-section {
          border-top: 1px solid var(--line);
        }
        .course-instructor-grid {
          display: grid;
          grid-template-columns: 1fr;
          gap: 42px;
          align-items: center;
        }
        .course-instructor-grid > .reveal {
          min-width: 0;
        }
        .course-instructor-photo-block {
          order: -1;
        }
        @media (min-width: 900px) {
          .course-instructor-grid {
            grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
            gap: 64px;
          }
          .course-instructor-photo-block {
            order: 0;
          }
        }
        .course-instructor-copy {
          max-width: 760px;
        }
        .course-instructor-meta {
          display: grid;
          grid-template-columns: 1fr;
          gap: 0;
          max-width: 620px;
          margin-top: 32px;
          border-top: 1px solid var(--line);
        }
        .course-instructor-meta div {
          display: grid;
          grid-template-columns: 130px 1fr;
          gap: 18px;
          padding: 14px 0;
          border-bottom: 1px solid var(--line);
          align-items: baseline;
        }
        .course-instructor-meta strong {
          font-family: var(--font-body);
          font-weight: 500;
          color: var(--white);
          font-size: 15px;
          line-height: 1.35;
        }
        .course-instructor-social {
          display: flex;
          flex-wrap: wrap;
          gap: 10px 22px;
          margin-top: 26px;
        }
        .course-instructor-social a {
          display: inline-flex;
          align-items: center;
          gap: 6px;
          color: var(--silver);
          transition: color 180ms ease;
        }
        .course-instructor-social a:hover {
          color: var(--white);
        }
        .course-instructor-photo {
          aspect-ratio: 1 / 1;
          overflow: hidden;
          border: 1px solid var(--line);
        }
        .course-instructor-photo img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          object-position: center top;
          filter: grayscale(100%);
        }
        .course-final {
          text-align: center;
          padding: clamp(52px, 7vw, 92px) 0;
          border-top: 1px solid var(--line);
        }
        .course-final .display {
          font-family: var(--font-body);
          font-weight: 500;
          text-transform: none;
          font-size: clamp(38px, 5.4vw, 76px);
          line-height: 1.05;
          margin-top: 20px;
        }
        .course-final p {
          max-width: 36ch;
          margin: 26px auto 38px;
        }
        @media (max-width: 640px) {
          .course-hero {
            min-height: calc(100svh - 136px);
            padding-top: 64px;
          }
          .course-title {
            font-size: clamp(52px, 16vw, 76px);
          }
          .course-actions .btn {
            width: 100%;
            white-space: normal;
            text-align: center;
          }
          .course-price-strip {
            align-items: flex-start;
            flex-direction: column;
          }
          .course-module {
            min-height: auto;
          }
          .course-instructor-grid {
            gap: 24px;
          }
          .course-instructor-photo {
            aspect-ratio: 4 / 5;
            max-height: 430px;
          }
          .course-instructor-copy .course-section-title {
            margin-top: 18px;
          }
          .course-copy-lg {
            font-size: 16px;
            line-height: 1.55;
          }
          .course-schedule-row,
          .course-instructor-meta div {
            grid-template-columns: 1fr;
          }
          .course-schedule-row small {
            grid-column: 1;
          }
        }
      `}</style>
    </>
  );
}

Object.assign(window, { CursoAgostoPage, COURSE_AGOSTO_WA_URL, COURSE_AGOSTO_AVAILABLE_SPOTS, COURSE_AGOSTO_DEADLINE_LABEL, COURSE_AGOSTO_DEADLINE_LONG });