// pages-programs.jsx — Individual program pages: Robótica, DiverCiencia, Mundo Digital

// ─── Shared sub-components ────────────────────────────────────────────────

function ProgramaFeature({ p, icon, title, desc }) {
  return (
    <div style={{ background: p.surface, padding: "28px 24px", borderRadius: 20, border: `1px solid ${p.ink}0d` }}>
      <div style={{ fontSize: 28, marginBottom: 12 }}>{icon}</div>
      <h3 style={{ fontFamily: "'Bricolage Grotesque', sans-serif", fontWeight: 700, fontSize: 20, color: p.ink, margin: "0 0 8px", letterSpacing: "-.02em" }}>{title}</h3>
      <p style={{ fontSize: 14, lineHeight: 1.6, color: p.inkSoft, margin: 0 }}>{desc}</p>
    </div>
  );
}

function NivelCard({ p, level, title, age, items, accent, accentText, active }) {
  const bg = active ? accent : p.surface;
  const fg = active ? (accentText || "#fff") : p.ink;
  const fgSoft = active ? (accentText || "#fff") + "bb" : p.inkSoft;
  const dot = active ? (accentText || "#fff") + "66" : accent;
  return (
    <div style={{ background: bg, color: fg, padding: "32px 28px", borderRadius: 24, border: active ? "none" : `1px solid ${p.ink}0d`, flex: 1 }}>
      <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: ".1em", textTransform: "uppercase", color: fgSoft, marginBottom: 8 }}>{level}</div>
      <h3 style={{ fontFamily: "'Bricolage Grotesque', sans-serif", fontWeight: 700, fontSize: 26, letterSpacing: "-.02em", margin: "0 0 4px", color: fg }}>{title}</h3>
      <div style={{ fontSize: 13, color: fgSoft, marginBottom: 20 }}>{age}</div>
      <ul style={{ margin: 0, padding: 0, listStyle: "none", display: "flex", flexDirection: "column", gap: 10 }}>
        {items.map((item, i) => (
          <li key={i} style={{ display: "flex", gap: 10, alignItems: "flex-start", fontSize: 14, lineHeight: 1.4, color: fg }}>
            <span style={{ color: dot, fontSize: 10, marginTop: 5, flexShrink: 0 }}>●</span>
            {item}
          </li>
        ))}
      </ul>
    </div>
  );
}

function SpecBox({ p, label, value }) {
  return (
    <div style={{ padding: "20px 24px", background: p.surface, borderRadius: 16, border: `1px solid ${p.ink}0d`, textAlign: "center" }}>
      <div style={{ fontFamily: "'Bricolage Grotesque', sans-serif", fontWeight: 700, fontSize: 32, letterSpacing: "-.04em", color: p.ink }}>{value}</div>
      <div style={{ fontSize: 11, color: p.inkSoft, marginTop: 4, fontWeight: 600, textTransform: "uppercase", letterSpacing: ".06em" }}>{label}</div>
    </div>
  );
}

function ProgCTABand({ p, accent, accentText, ageRange }) {
  return (
    <section style={{ padding: "80px 32px", background: p.ink, color: p.bg, textAlign: "center" }}>
      <div style={{ maxWidth: 640, margin: "0 auto" }}>
        <h2 style={{ fontFamily: "'Bricolage Grotesque', sans-serif", fontWeight: 700, fontSize: "clamp(36px, 4vw, 56px)", letterSpacing: "-.03em", margin: 0, color: p.bg }}>
          ¿Buscas una extraescolar diferente para el curso 26/27?
        </h2>
        <p style={{ fontSize: 18, opacity: .72, marginTop: 16, lineHeight: 1.55 }}>Matrículas disponibles en septiembre · {ageRange}</p>
        <div style={{ display: "flex", gap: 12, marginTop: 32, justifyContent: "center", flexWrap: "wrap" }}>
          <a href="contacto.html" style={{ background: accent, color: accentText || "#fff", padding: "16px 28px", borderRadius: 999, fontSize: 16, fontWeight: 600, textDecoration: "none" }}>Matrículas 26/27 · Próximamente</a>
          <a href="contacto.html" style={{ color: p.bg, padding: "16px 28px", borderRadius: 999, fontSize: 16, fontWeight: 600, textDecoration: "none", border: `1.5px solid ${p.bg}33` }}>Hablar con nosotros</a>
        </div>
      </div>
    </section>
  );
}

// ─── Robótica ─────────────────────────────────────────────────────────────
function RoboticaPage({ p }) {
  const accent = p.primary;
  const accentText = p.primaryInk;
  return (
    <>
      <section style={{ padding: "80px 32px 60px", background: p.bg, borderBottom: `1px solid ${p.ink}10` }}>
        <div style={{ maxWidth: 1280, margin: "0 auto", display: "grid", gridTemplateColumns: "1.3fr 1fr", gap: 56, alignItems: "center" }}>
          <div>
            <div style={{ display: "flex", gap: 8, marginBottom: 24 }}>
              <span style={{ padding: "6px 14px", borderRadius: 999, background: accent, color: accentText, fontSize: 12, fontWeight: 700, letterSpacing: ".05em", textTransform: "uppercase" }}>Robótica</span>
              <span style={{ padding: "6px 14px", borderRadius: 999, background: p.chip, color: p.inkSoft, fontSize: 12, fontWeight: 700 }}>8 – 16 años</span>
            </div>
            <h1 style={{ fontFamily: "'Bricolage Grotesque', sans-serif", fontWeight: 700, fontSize: "clamp(48px, 5.2vw, 80px)", lineHeight: 1.0, letterSpacing: "-.035em", color: p.ink, margin: 0 }}>
              Construyen.<br />Programan.<br /><em style={{ fontStyle: "normal", color: accent }}>Vuelven a intentarlo.</em>
            </h1>
            <p style={{ fontSize: 19, lineHeight: 1.55, color: p.inkSoft, marginTop: 24, maxWidth: 520 }}>
              De LEGO® SPIKE a Arduino. Los peques pasan de seguir instrucciones a inventar sus propios robots, aprendiendo lógica, mecánica y programación sin darse cuenta.
            </p>
            <div style={{ display: "flex", gap: 12, marginTop: 36, flexWrap: "wrap" }}>
              <a href="contacto.html" style={{ background: accent, color: accentText, padding: "14px 24px", borderRadius: 999, fontSize: 15, fontWeight: 600, textDecoration: "none" }}>Matrículas 26/27 · Próximamente</a>
            </div>
          </div>
          <div data-hero-img style={{ position: "relative", aspectRatio: "4/3", borderRadius: 28, overflow: "hidden", boxShadow: `0 30px 60px ${p.ink}22` }}>
            <img src={ASSETS.lego} alt="Niños construyendo robot LEGO" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
            <div style={{ position: "absolute", bottom: 20, left: 20, background: "rgba(255,255,255,.92)", backdropFilter: "blur(8px)", padding: "10px 16px", borderRadius: 12 }}>
              <div style={{ fontFamily: "'Bricolage Grotesque', sans-serif", fontWeight: 700, fontSize: 18, color: p.ink }}>Material incluido</div>
              <div style={{ fontSize: 12, color: p.inkSoft }}>LEGO® · Arduino · Scratch</div>
            </div>
          </div>
        </div>
      </section>

      <section style={{ padding: "40px 32px", background: p.surface, borderBottom: `1px solid ${p.ink}08` }}>
        <div style={{ maxWidth: 1280, margin: "0 auto", display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 16 }}>
          <SpecBox p={p} label="Edad" value="8–16" />
          <SpecBox p={p} label="Sesión" value="90 min" />
          <SpecBox p={p} label="Cuota" value="35€/mes" />
          <SpecBox p={p} label="Grupo máx." value="16" />
        </div>
      </section>

      <section style={{ padding: "80px 32px", background: p.bg }}>
        <div style={{ maxWidth: 1280, margin: "0 auto" }}>
          <SectionHeader p={p} eyebrow="Qué aprenden" title={<>Más que robots.<br />Pensamiento <em style={{ fontStyle: "normal", color: accent }}>sistemático</em>.</>} />
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 20, marginTop: 48 }}>
            <ProgramaFeature p={p} icon="🤖" title="Construcción con LEGO" desc="Diseñan y construyen robots con kits LEGO. Desarrollan creatividad, entienden fuerzas y sensores mientras lo ensamblan." />
            <ProgramaFeature p={p} icon="💻" title="Programación con Scratch" desc="Crean animaciones, películas y juegos interactivos con un lenguaje visual e intuitivo. La lógica de programar sin escribir código." />
            <ProgramaFeature p={p} icon="🖨️" title="Modelado e impresión 3D" desc="Crean y combinan piezas geométricas usando visión espacial y las imprimen físicamente en clase. De la pantalla al objeto real." />
            <ProgramaFeature p={p} icon="📈" title="Sistema de niveles" desc="Cada año amplían lo del anterior. El crecimiento es gradual y continuo para que ningún peque se quede atrás ni se aburra." />
          </div>
        </div>
      </section>

      <section style={{ padding: "80px 32px", background: p.surface }}>
        <div style={{ maxWidth: 1280, margin: "0 auto" }}>
          <SectionHeader p={p} eyebrow="Etapas" title="Dos etapas, un mismo objetivo." />
          <div style={{ display: "flex", gap: 20, marginTop: 48 }}>
            <NivelCard p={p} accent={accent} accentText={accentText} level="Primaria" title="Scratch + micro:bit" age="6 – 12 años"
              items={["Programación visual con Scratch", "Electrónica con micro:bit", "Sensores: luz, temperatura, movimiento", "Proyectos creativos interactivos"]} />
            <NivelCard p={p} accent={accent} accentText={accentText} level="ESO" title="Arduino + Brazo robótico" age="12 – 16 años" active
              items={["Arduino y electrónica de componentes", "Brazo robótico programable", "Desarrollo de videojuegos con GDevelop", "Proyectos de ingeniería autónomos"]} />
          </div>
        </div>
      </section>

      <ProgCTABand p={p} accent={accent} accentText={accentText} ageRange="8 y 16 años" />
    </>
  );
}

// ─── DiverCiencia ─────────────────────────────────────────────────────────
function DivercienciaPage({ p }) {
  const accent = p.accent;
  const accentText = p.accentInk || p.ink;
  return (
    <>
      <section style={{ padding: "80px 32px 60px", background: p.bg, borderBottom: `1px solid ${p.ink}10` }}>
        <div style={{ maxWidth: 1280, margin: "0 auto", display: "grid", gridTemplateColumns: "1.3fr 1fr", gap: 56, alignItems: "center" }}>
          <div>
            <div style={{ display: "flex", gap: 8, marginBottom: 24 }}>
              <span style={{ padding: "6px 14px", borderRadius: 999, background: accent, color: accentText, fontSize: 12, fontWeight: 700, letterSpacing: ".05em", textTransform: "uppercase" }}>DiverCiencia</span>
              <span style={{ padding: "6px 14px", borderRadius: 999, background: p.chip, color: p.inkSoft, fontSize: 12, fontWeight: 700 }}>6 – 12 años</span>
            </div>
            <h1 style={{ fontFamily: "'Bricolage Grotesque', sans-serif", fontWeight: 700, fontSize: "clamp(48px, 5.2vw, 80px)", lineHeight: 1.0, letterSpacing: "-.035em", color: p.ink, margin: 0 }}>
              Manos sucias.<br />Mil preguntas.<br /><em style={{ fontStyle: "normal", color: accent }}>Respuestas reales.</em>
            </h1>
            <p style={{ fontSize: 19, lineHeight: 1.55, color: p.inkSoft, marginTop: 24, maxWidth: 520 }}>
              Reacciones químicas, biología, física aplicada. Cada sesión aplica el método científico: hipótesis, experimento y conclusión. Curiosidad pura, sin pizarra.
            </p>
            <div style={{ display: "flex", gap: 12, marginTop: 36, flexWrap: "wrap" }}>
              <a href="contacto.html" style={{ background: accent, color: accentText, padding: "14px 24px", borderRadius: 999, fontSize: 15, fontWeight: 600, textDecoration: "none" }}>Matrículas 26/27 · Próximamente</a>
            </div>
          </div>
          <div data-hero-img style={{ position: "relative", aspectRatio: "4/3", borderRadius: 28, overflow: "hidden", boxShadow: `0 30px 60px ${p.ink}22` }}>
            <img src={ASSETS.steam} alt="Experimentos de ciencia" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
            <div style={{ position: "absolute", bottom: 20, left: 20, background: "rgba(255,255,255,.92)", backdropFilter: "blur(8px)", padding: "10px 16px", borderRadius: 12 }}>
              <div style={{ fontFamily: "'Bricolage Grotesque', sans-serif", fontWeight: 700, fontSize: 18, color: p.ink }}>Material incluido</div>
              <div style={{ fontSize: 12, color: p.inkSoft }}>Fungible + cuaderno de laboratorio</div>
            </div>
          </div>
        </div>
      </section>

      <section style={{ padding: "40px 32px", background: p.surface, borderBottom: `1px solid ${p.ink}08` }}>
        <div style={{ maxWidth: 1280, margin: "0 auto", display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 16 }}>
          <SpecBox p={p} label="Edad" value="6–12" />
          <SpecBox p={p} label="Sesión" value="90 min" />
          <SpecBox p={p} label="Cuota" value="35€/mes" />
          <SpecBox p={p} label="Grupo máx." value="16" />
        </div>
      </section>

      <section style={{ padding: "80px 32px", background: p.bg }}>
        <div style={{ maxWidth: 1280, margin: "0 auto" }}>
          <SectionHeader p={p} eyebrow="Qué aprenden" title={<>Ciencia de verdad.<br />Sin <em style={{ fontStyle: "normal", color: accent }}>aburrirse</em>.</>} />
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 20, marginTop: 48 }}>
            <ProgramaFeature p={p} icon="🧪" title="Química" desc="Estudian la composición y propiedades de las sustancias y las reacciones por las que unas se transforman en otras. Con experimentos reales." />
            <ProgramaFeature p={p} icon="🔬" title="Biología" desc="Los seres vivos desde el nivel molecular hasta los ecosistemas: estructura, función, diversidad y cómo se relacionan entre sí." />
            <ProgramaFeature p={p} icon="💡" title="Física" desc="El movimiento de la materia, la energía y las fuerzas. Comprueban las leyes de la física con sus propias manos en cada sesión." />
            <ProgramaFeature p={p} icon="📒" title="Método científico" desc="Desde formular una hipótesis hasta demostrarla ante el resto de compañeros. Aprenden a pensar como científicos sin darse cuenta." />
          </div>
        </div>
      </section>

      <section style={{ padding: "80px 32px", background: p.surface }}>
        <div style={{ maxWidth: 1280, margin: "0 auto" }}>
          <SectionHeader p={p} eyebrow="Una sesión tipo" title="Así es una tarde de DiverCiencia." />
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 20, marginTop: 48 }}>
            <ProgramaFeature p={p} icon="🔭" title="1 · Pregunta del día" desc="Cada sesión empieza con una pregunta que nadie sabe responder todavía. Eso despierta la curiosidad." />
            <ProgramaFeature p={p} icon="🧪" title="2 · Experimento" desc="Manos a la obra. Mezclan, observan, miden y se manchan. El resultado a veces sorprende al propio monitor." />
            <ProgramaFeature p={p} icon="📒" title="3 · Lo anotamos" desc="Hipótesis, resultado y conclusión en el cuaderno de laboratorio personal. El método científico sin saberlo." />
            <ProgramaFeature p={p} icon="🎤" title="4 · Lo presentamos" desc="Cada equipo expone su hipótesis y resultado al resto del grupo. Hablar de ciencia también es aprender ciencia." />
          </div>
        </div>
      </section>

      <ProgCTABand p={p} accent={accent} accentText={accentText} ageRange="6 y 12 años" />
    </>
  );
}

// ─── Mundo Digital ────────────────────────────────────────────────────────
function MundoDigitalPage({ p }) {
  const accent = p.pop;
  const accentText = "#fff";
  return (
    <>
      <section style={{ padding: "80px 32px 60px", background: p.bg, borderBottom: `1px solid ${p.ink}10` }}>
        <div style={{ maxWidth: 1280, margin: "0 auto", display: "grid", gridTemplateColumns: "1.3fr 1fr", gap: 56, alignItems: "center" }}>
          <div>
            <div style={{ display: "flex", gap: 8, marginBottom: 24 }}>
              <span style={{ padding: "6px 14px", borderRadius: 999, background: accent, color: accentText, fontSize: 12, fontWeight: 700, letterSpacing: ".05em", textTransform: "uppercase" }}>Mundo Digital</span>
              <span style={{ padding: "6px 14px", borderRadius: 999, background: p.chip, color: p.inkSoft, fontSize: 12, fontWeight: 700 }}>6 – 9 años</span>
            </div>
            <h1 style={{ fontFamily: "'Bricolage Grotesque', sans-serif", fontWeight: 700, fontSize: "clamp(48px, 5.2vw, 80px)", lineHeight: 1.0, letterSpacing: "-.035em", color: p.ink, margin: 0 }}>
              El ordenador,<br />su primer<br /><em style={{ fontStyle: "normal", color: accent }}>superpoder.</em>
            </h1>
            <p style={{ fontSize: 19, lineHeight: 1.55, color: p.inkSoft, marginTop: 24, maxWidth: 520 }}>
              Para peques de 6 a 9 años que empiezan desde cero con el ordenador. Mecanografía, control del ratón y sistema operativo a través de retos y minijuegos.
            </p>
            <div style={{ display: "flex", gap: 12, marginTop: 36, flexWrap: "wrap" }}>
              <a href="contacto.html" style={{ background: accent, color: accentText, padding: "14px 24px", borderRadius: 999, fontSize: 15, fontWeight: 600, textDecoration: "none" }}>Matrículas 26/27 · Próximamente</a>
            </div>
          </div>
          <div data-hero-img style={{ position: "relative", aspectRatio: "4/3", borderRadius: 28, overflow: "hidden", boxShadow: `0 30px 60px ${p.ink}22` }}>
            <img src={ASSETS.team} alt="Niños con tecnología digital" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
            <div style={{ position: "absolute", bottom: 20, left: 20, background: "rgba(255,255,255,.92)", backdropFilter: "blur(8px)", padding: "10px 16px", borderRadius: 12 }}>
              <div style={{ fontFamily: "'Bricolage Grotesque', sans-serif", fontWeight: 700, fontSize: 18, color: p.ink }}>Aprenden jugando</div>
              <div style={{ fontSize: 12, color: p.inkSoft }}>Retos · Minijuegos · Progreso</div>
            </div>
          </div>
        </div>
      </section>

      <section style={{ padding: "40px 32px", background: p.surface, borderBottom: `1px solid ${p.ink}08` }}>
        <div style={{ maxWidth: 1280, margin: "0 auto", display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 16 }}>
          <SpecBox p={p} label="Edad" value="6–9" />
          <SpecBox p={p} label="Sesión" value="75 min" />
          <SpecBox p={p} label="Cuota" value="30€/mes" />
          <SpecBox p={p} label="Grupo máx." value="16" />
        </div>
      </section>

      <section style={{ padding: "80px 32px", background: p.bg }}>
        <div style={{ maxWidth: 1280, margin: "0 auto" }}>
          <SectionHeader p={p} eyebrow="Qué aprenden" title={<>El ordenador,<br /><em style={{ fontStyle: "normal", color: accent }}>sin miedo</em>.</>} />
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 20, marginTop: 48 }}>
            <ProgramaFeature p={p} icon="⌨️" title="Mecanografía" desc="Aprenden a escribir en el teclado de forma fluida con retos y minijuegos que registran su progreso. Nada de copiar texto aburrido." />
            <ProgramaFeature p={p} icon="🖱️" title="Control del ratón" desc="Click izquierdo, derecho, arrastrar... Todo a través de juegos que hacen natural lo que antes parecía difícil." />
            <ProgramaFeature p={p} icon="🖥️" title="Sistema operativo" desc="Carpetas, archivos, escritorio, aplicaciones. Saber moverse por un ordenador es tan necesario como saber leer." />
            <ProgramaFeature p={p} icon="🌐" title="Navegar con criterio" desc="Aprenden qué es internet, cómo buscar información y qué herramientas digitales les serán útiles en el cole y en casa." />
          </div>
        </div>
      </section>

      <section style={{ padding: "80px 32px", background: p.surface }}>
        <div style={{ maxWidth: 1280, margin: "0 auto" }}>
          <SectionHeader p={p} eyebrow="Una sesión tipo" title="Así es una tarde de Mundo Digital." />
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 20, marginTop: 48 }}>
            <ProgramaFeature p={p} icon="🎯" title="1 · Reto del día" desc="Cada sesión trae un nuevo reto: mecanografía, un minijuego de ratón o explorar una nueva parte del sistema operativo." />
            <ProgramaFeature p={p} icon="🎮" title="2 · A practicar" desc="Practican con juegos y actividades interactivas pensadas para su edad. El monitor acompaña sin hacer el trabajo por ellos." />
            <ProgramaFeature p={p} icon="📊" title="3 · Mi progreso" desc="Ven sus mejoras en tiempo real: palabras por minuto, precisión, nivel superado. Cada avance les motiva a seguir." />
            <ProgramaFeature p={p} icon="💾" title="4 · Lo guardo" desc="Aprenden a guardar y organizar sus archivos en su carpeta personal desde el primer día." />
          </div>
        </div>
      </section>

      <ProgCTABand p={p} accent={accent} accentText={accentText} ageRange="6 y 9 años" />
    </>
  );
}

Object.assign(window, { RoboticaPage, DivercienciaPage, MundoDigitalPage });

// ─── Campus ───────────────────────────────────────────────────────────────

const SEMANAS_CAMPUS = [
  { id: 1, mes: "Julio",  inicio: "6 Jul",  fin: "10 Jul", status: "disponible" },
  { id: 2, mes: "Julio",  inicio: "13 Jul", fin: "17 Jul", status: "disponible" },
  { id: 3, mes: "Julio",  inicio: "20 Jul", fin: "24 Jul", status: "pocas"      },
  { id: 4, mes: "Julio",  inicio: "27 Jul", fin: "31 Jul", status: "disponible" },
  { id: 5, mes: "Agosto", inicio: "3 Ago",  fin: "7 Ago",  status: "disponible" },
  { id: 6, mes: "Agosto", inicio: "10 Ago", fin: "14 Ago", status: "pocas"      },
  { id: 7, mes: "Agosto", inicio: "17 Ago", fin: "21 Ago", status: "disponible" },
  { id: 8, mes: "Agosto", inicio: "24 Ago", fin: "28 Ago", status: "disponible" },
];

function SemanaCampus({ p, accent, semana }) {
  const statusColor = semana.status === "disponible" ? (p.mint || "#3CC9A2")
                    : semana.status === "pocas"       ? "#E8A020"
                    :                                   p.inkSoft;
  const statusLabel = semana.status === "disponible" ? "Plazas disponibles"
                    : semana.status === "pocas"       ? "Pocas plazas"
                    :                                   "Completo";
  return (
    <a href="contacto.html" style={{
      display: "block", background: p.surface, borderRadius: 20,
      border: `1px solid ${p.ink}0d`, padding: "24px 20px",
      textDecoration: "none", color: p.ink,
    }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 12 }}>
        <div style={{ fontFamily: "'Bricolage Grotesque', sans-serif", fontWeight: 700, fontSize: 40, letterSpacing: "-.04em", color: p.ink, lineHeight: 1 }}>
          {semana.inicio.split(" ")[0]}
        </div>
        <span style={{ padding: "4px 10px", borderRadius: 999, background: statusColor + "22", color: statusColor, fontSize: 11, fontWeight: 700, whiteSpace: "nowrap" }}>
          {statusLabel}
        </span>
      </div>
      <div style={{ fontSize: 13, color: p.inkSoft, marginBottom: 16 }}>{semana.inicio} – {semana.fin}</div>
      <div style={{ fontSize: 13, fontWeight: 600, color: accent }}>Apuntarse →</div>
    </a>
  );
}

function CampusPage({ p }) {
  const accent = p.accent;
  const accentText = p.accentInk || p.ink;
  const meses = [...new Set(SEMANAS_CAMPUS.map((s) => s.mes))];

  return (
    <>
      {/* Hero */}
      <section style={{ padding: "80px 32px 60px", background: p.bg, borderBottom: `1px solid ${p.ink}10` }}>
        <div style={{ maxWidth: 1280, margin: "0 auto", display: "grid", gridTemplateColumns: "1.3fr 1fr", gap: 56, alignItems: "center" }}>
          <div>
            <div style={{ display: "flex", gap: 8, marginBottom: 24 }}>
              <span style={{ padding: "6px 14px", borderRadius: 999, background: accent, color: accentText, fontSize: 12, fontWeight: 700, letterSpacing: ".05em", textTransform: "uppercase" }}>Campus STEAM</span>
              <span style={{ padding: "6px 14px", borderRadius: 999, background: p.chip, color: p.inkSoft, fontSize: 12, fontWeight: 700 }}>Verano 2026</span>
            </div>
            <h1 style={{ fontFamily: "'Bricolage Grotesque', sans-serif", fontWeight: 700, fontSize: "clamp(48px, 5.2vw, 80px)", lineHeight: 1.0, letterSpacing: "-.035em", color: p.ink, margin: 0 }}>
              5 días de robots,<br />ciencia y <em style={{ fontStyle: "normal", color: accent }}>creatividad</em>.
            </h1>
            <p style={{ fontSize: 19, lineHeight: 1.55, color: p.inkSoft, marginTop: 24, maxWidth: 520 }}>
              Campus intensivos de verano para peques de 6 a 14 años. Turno de mañana o tarde, una semana y se van a casa con un proyecto hecho por ellos.
            </p>
            <div style={{ display: "flex", gap: 12, marginTop: 36, flexWrap: "wrap" }}>
              <a href="#semanas" style={{ background: accent, color: accentText, padding: "14px 24px", borderRadius: 999, fontSize: 15, fontWeight: 600, textDecoration: "none" }}>Ver semanas →</a>
              <a href="contacto.html" style={{ color: p.ink, padding: "14px 24px", borderRadius: 999, fontSize: 15, fontWeight: 600, textDecoration: "none", border: `1.5px solid ${p.ink}22` }}>Pedir info</a>
            </div>
          </div>
          <div style={{ background: p.surface, borderRadius: 28, padding: 40, border: `1px solid ${p.ink}0d`, display: "flex", flexDirection: "column", gap: 24 }}>
            {[
              { icon: "📅", label: "Duración", desc: "5 días · Lunes a Viernes" },
              { icon: "🕙", label: "Horario", desc: "Mañana 10:00–13:00 · Tarde 15:00–18:00" },
              { icon: "👥", label: "Grupos", desc: "8 a 16 alumnos según el espacio" },
              { icon: "💰", label: "Precio", desc: (window.WIPBOT_CONTENT && window.WIPBOT_CONTENT.prices ? `${window.WIPBOT_CONTENT.prices.campusSemana} / semana · ${window.WIPBOT_CONTENT.prices.campusDescuento}` : "70€ / semana · Hermanos: 65€ cada uno") },
              { icon: "📍", label: "Lugar", desc: "Se comunica por email y teléfono una semana antes" },
            ].map((item) => (
              <div key={item.label} style={{ display: "flex", gap: 16, alignItems: "flex-start" }}>
                <span style={{ fontSize: 22, flexShrink: 0, marginTop: 2 }}>{item.icon}</span>
                <div>
                  <div style={{ fontSize: 11, fontWeight: 700, textTransform: "uppercase", letterSpacing: ".06em", color: p.inkSoft, marginBottom: 2 }}>{item.label}</div>
                  <div style={{ fontSize: 15, fontWeight: 500, color: p.ink }}>{item.desc}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Specs bar */}
      <section style={{ padding: "40px 32px", background: p.surface, borderBottom: `1px solid ${p.ink}08` }}>
        <div style={{ maxWidth: 1280, margin: "0 auto", display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 16 }}>
          <SpecBox p={p} label="Días" value="5" />
          <SpecBox p={p} label="Horas/día" value="3h" />
          <SpecBox p={p} label="Precio" value={(window.WIPBOT_CONTENT && window.WIPBOT_CONTENT.prices && window.WIPBOT_CONTENT.prices.campusSemana) || "70€"} />
          <SpecBox p={p} label="Edades" value="6–14" />
        </div>
      </section>

      {/* What they do */}
      <section style={{ padding: "80px 32px", background: p.bg }}>
        <div style={{ maxWidth: 1280, margin: "0 auto" }}>
          <SectionHeader p={p} eyebrow="Qué hacen" title={<>Una semana entera<br />de <em style={{ fontStyle: "normal", color: accent }}>hacer cosas</em>.</>} />
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 20, marginTop: 48 }}>
            <ProgramaFeature p={p} icon="🤖" title="Robótica" desc="Construyen y programan robots desde cero. LEGO SPIKE, micro:bit o Arduino según la edad." />
            <ProgramaFeature p={p} icon="🧪" title="DiverCiencia" desc="Experimentos reales cada día: química, biología y física. Cuaderno de laboratorio incluido." />
            <ProgramaFeature p={p} icon="💻" title="Mundo Digital" desc="Crean videojuegos con Scratch, animaciones y proyectos digitales que pueden enseñar a su familia." />
          </div>
        </div>
      </section>

      {/* Calendar */}
      <section id="semanas" style={{ padding: "80px 32px", background: p.surface }}>
        <div style={{ maxWidth: 1280, margin: "0 auto" }}>
          <SectionHeader p={p} eyebrow="Inscripciones abiertas"
            title="Elige tu semana."
            subtitle="Selecciona la semana que te interese para reservar plaza. Si tienes dudas, escríbenos." />
          <div style={{ marginTop: 48 }}>
            <iframe
              src="https://panel.wipbot.es/embed/calendar/campus-2026-r1y63"
              width="100%"
              height="700"
              frameBorder="0"
              style={{ border: 0, borderRadius: 12, display: "block" }}
              loading="lazy"
            ></iframe>
          </div>
        </div>
      </section>

      <ProgCTABand p={p} accent={accent} accentText={accentText} ageRange="6 y 14 años" />
    </>
  );
}

Object.assign(window, { RoboticaPage, DivercienciaPage, MundoDigitalPage, CampusPage, SemanaCampus });