// pages.jsx — Subpages: Programas, Nosotros, Matrícula, Contacto.
// Reuses Nav, Footer, Ribbon, SectionHeader, PALETTES from app.jsx + sections.jsx.

const { useState: useStateP } = React;

function submitMatricula(form, p, setStep) {
  const C = window.WIPBOT_CONTENT;
  const endpoint = (C && C.forms && C.forms.matriculaEndpoint) || '';
  if (!endpoint || endpoint.includes('REEMPLAZA')) {
    alert('⚠️ Formulario no configurado todavía. Por favor contacta por WhatsApp o email.');
    return;
  }
  fetch(endpoint, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
    body: JSON.stringify({ ...form, _subject: 'Nueva solicitud de matrícula - Wipbot' })
  }).then(function(r) {
    if (r.ok) {
      setStep(99); // success state
    } else {
      alert('Hubo un error al enviar. Por favor contacta por WhatsApp.');
    }
  }).catch(function() {
    alert('Sin conexión. Por favor contacta por WhatsApp.');
  });
}

function PageShell({ p, showRibbon, children }) {
  React.useEffect(() => { document.body.style.background = p.bg; document.body.style.color = p.ink; }, [p]);
  return (
    <div style={{ background: p.bg, color: p.ink, minHeight: "100vh", fontFamily: "'Plus Jakarta Sans', sans-serif" }}>
      {showRibbon && <Ribbon p={p} />}
      <Nav p={p} />
      {children}
      <Footer p={p} />
    </div>
  );
}

function PageHero({ p, eyebrow, title, subtitle, image }) {
  return (
    <section style={{ padding: "80px 32px 60px", borderBottom: `1px solid ${p.ink}10` }}>
      <div style={{ maxWidth: 1280, margin: "0 auto", display: "grid", gridTemplateColumns: image ? "1.2fr 1fr" : "1fr", gap: 56, alignItems: "center" }}>
        <div>
          <div style={{ fontSize: 12, fontWeight: 700, letterSpacing: ".12em", textTransform: "uppercase", color: p.primary, marginBottom: 16 }}>{eyebrow}</div>
          <h1 style={{ fontFamily: "'Bricolage Grotesque', sans-serif", fontWeight: 700, fontSize: "clamp(48px, 5.5vw, 84px)", lineHeight: 1.0, letterSpacing: "-.035em", color: p.ink, margin: 0 }}>{title}</h1>
          {subtitle && <p style={{ fontSize: 19, lineHeight: 1.55, color: p.inkSoft, marginTop: 24, maxWidth: 560 }}>{subtitle}</p>}
        </div>
        {image && (
          <div data-hero-img style={{ position: "relative", aspectRatio: "4/3", borderRadius: 28, overflow: "hidden", boxShadow: `0 30px 60px ${p.ink}22` }}>
            <img src={image} alt="" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
          </div>
        )}
      </div>
    </section>
  );
}

// ─── Programas ────────────────────────────────────────────────────────────
function ProgramasPage({ p }) {
  return (
    <>
      <PageHero p={p} eyebrow="Tres extraescolares · una metodología STEAM"
        title={<>Elige el camino<br/>de tu peque.</>}
        subtitle="Robótica, ciencia o mundo digital. Pueden empezar por cualquiera, combinarlas o cambiar de un curso al siguiente. Todos los programas avanzan por niveles." />

      <section style={{ padding: "80px 32px", background: p.bg }}>
        <div style={{ maxWidth: 1280, margin: "0 auto", display: "flex", flexDirection: "column", gap: 32 }}>
          {PROGRAMS.map((prog, i) => (
            <article key={prog.id} data-program-row style={{
              background: p.surface, borderRadius: 32, overflow: "hidden",
              display: "grid", gridTemplateColumns: i % 2 ? "1fr 1.1fr" : "1.1fr 1fr",
              border: `1px solid ${p.ink}0d`, boxShadow: `0 4px 24px ${p.ink}06`,
            }}>
              <div data-program-text style={{ padding: 48, display: "flex", flexDirection: "column", justifyContent: "center", order: i % 2 ? 2 : 1 }}>
                <div style={{ display: "flex", gap: 8, marginBottom: 20 }}>
                  <span style={{ display: "inline-block", padding: "5px 12px", borderRadius: 999, background: p[prog.color] + "22", color: p[prog.color], fontSize: 12, fontWeight: 700, letterSpacing: ".05em" }}>{prog.age}</span>
                  <span style={{ display: "inline-block", padding: "5px 12px", borderRadius: 999, background: p.chip, color: p.inkSoft, fontSize: 12, fontWeight: 700 }}>3 niveles</span>
                </div>
                <h2 style={{ fontFamily: "'Bricolage Grotesque', sans-serif", fontWeight: 700, fontSize: 56, lineHeight: 1.0, letterSpacing: "-.03em", color: p.ink, margin: 0 }}>{prog.name}</h2>
                <p style={{ fontSize: 22, lineHeight: 1.35, color: p.ink, margin: "16px 0 16px", fontFamily: "'Bricolage Grotesque', sans-serif", fontWeight: 500 }}>{prog.tagline}</p>
                <p style={{ fontSize: 16, lineHeight: 1.6, color: p.inkSoft, marginBottom: 24 }}>{prog.description}</p>
                <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16, padding: "20px 0", borderTop: `1px solid ${p.ink}10`, borderBottom: `1px solid ${p.ink}10`, marginBottom: 24 }}>
                  <Spec p={p} k="Sesión" v={(prog.duration || "90 min") + " / sem"} />
                  <Spec p={p} k="Cuota" v={prog.price || "35€ / mes"} />
                  <Spec p={p} k="Material" v="Incluido" />
                </div>
                <div style={{ display: "flex", gap: 12 }}>
                  <a href={`${prog.id}.html`} style={{ color: p.inkSoft, padding: "12px 20px", borderRadius: 999, fontSize: 14, fontWeight: 600, textDecoration: "none", border: `1.5px solid ${p.ink}16` }}>Ver programa</a>
                  <a href="contacto.html" style={{ background: p.ink, color: p.bg, padding: "12px 20px", borderRadius: 999, fontSize: 14, fontWeight: 600, textDecoration: "none" }}>Pedir info →</a>
                </div>
              </div>
              <div data-program-image style={{ minHeight: 480, position: "relative", background: p.chip, order: i % 2 ? 1 : 2 }}>
                <img src={prog.image} alt={prog.name} style={{ width: "100%", height: "100%", objectFit: "cover", position: "absolute", inset: 0 }} />
              </div>
            </article>
          ))}
        </div>
      </section>
    </>
  );
}

function Spec({ p, k, v }) {
  return (
    <div>
      <div style={{ fontSize: 11, color: p.inkSoft, fontWeight: 600, letterSpacing: ".05em", textTransform: "uppercase" }}>{k}</div>
      <div style={{ fontSize: 15, color: p.ink, fontWeight: 600, fontFamily: "'Bricolage Grotesque', sans-serif", marginTop: 4 }}>{v}</div>
    </div>
  );
}

// ─── Nosotros ─────────────────────────────────────────────────────────────
function NosotrosPage({ p }) {
  return (
    <>
      <PageHero p={p} eyebrow="Sobre Wipbot"
        title={<>Nacimos en un pueblo. Crecimos<br/>con sus <em style={{ fontStyle: "normal", color: p.primary }}>familias</em>.</>}
        subtitle="Wipbot empezó en Alcorisa en 2019. Hoy seguimos en el Bajo Aragón con local en Alcañiz, formando peques en robótica, ciencia y tecnología con metodología STEAM."
        image={ASSETS.classroom} />

      <section style={{ padding: "80px 32px", background: p.surface }}>
        <div style={{ maxWidth: 900, margin: "0 auto", display: "flex", flexDirection: "column", gap: 64 }}>
          <Story p={p} year="2019" title="El comienzo en Alcorisa"
            text="Wipbot nace de la necesidad de acercar el ámbito tecnológico a los peques de la población rural turolense de manera divertida y didáctica. Empezamos con un grupo, un local prestado y muchos LEGO." />
          <Story p={p} year="2021" title="Más allá de la robótica"
            text="Tras una pandemia de por medio, ampliamos la oferta con DiverCiencia y Mundo Digital. Apostamos por la metodología STEAM y por la creatividad como motor del aprendizaje." />
          <Story p={p} year="2023" title="Nuevo local en Alcañiz"
            text="Abrimos sede en Alcañiz para llegar a más familias del Bajo Aragón. Más espacio, más kits, más grupos. Misma filosofía: grupos pequeños y mucho hacer con las manos." />
          <Story p={p} year="Hoy" title="Más de 300 alumnos después"
            text="Seguimos enseñando lo que nos apasiona a peques de 6 a 16 años. Algunos llevan con nosotros desde que empezaron primaria. Eso es lo que más nos enorgullece." />
        </div>
      </section>

      <section style={{ padding: "80px 32px", background: p.bg }}>
        <div style={{ maxWidth: 1280, margin: "0 auto" }}>
          <SectionHeader p={p} eyebrow="Nuestros valores"
            title={<>Cómo trabajamos.</>} />
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24, marginTop: 56 }}>
            {[
              { k: "Cercanía", v: "Conocemos a cada peque por su nombre. Hablamos con padres y madres cada vez que hace falta." },
              { k: "Hacer, no escuchar", v: "Pizarra mínima, manos máximas. El 90% del tiempo en clase es construyendo o experimentando." },
              { k: "Sin dogmas", v: "Si una herramienta es mejor para enseñar algo, la usamos. Vendemos tecnología, no marcas." },
            ].map((v) => (
              <div key={v.k} style={{ background: p.surface, padding: 32, borderRadius: 24, border: `1px solid ${p.ink}10` }}>
                <h3 style={{ fontFamily: "'Bricolage Grotesque', sans-serif", fontWeight: 700, fontSize: 28, letterSpacing: "-.02em", color: p.primary, margin: "0 0 12px" }}>{v.k}</h3>
                <p style={{ fontSize: 15, lineHeight: 1.55, color: p.inkSoft, margin: 0 }}>{v.v}</p>
              </div>
            ))}
          </div>
        </div>
      </section>
    </>
  );
}

function Story({ p, year, title, text }) {
  return (
    <div data-story-row style={{ display: "grid", gridTemplateColumns: "120px 1fr", gap: 32, alignItems: "start" }}>
      <div style={{ fontFamily: "'Bricolage Grotesque', sans-serif", fontWeight: 700, fontSize: 36, color: p.primary, letterSpacing: "-.02em" }}>{year}</div>
      <div>
        <h3 style={{ fontFamily: "'Bricolage Grotesque', sans-serif", fontWeight: 700, fontSize: 28, letterSpacing: "-.02em", color: p.ink, margin: 0 }}>{title}</h3>
        <p style={{ fontSize: 17, lineHeight: 1.6, color: p.inkSoft, marginTop: 10 }}>{text}</p>
      </div>
    </div>
  );
}

// ─── Matrícula ────────────────────────────────────────────────────────────
function MatriculaPage({ p }) {
  const [step, setStep] = useStateP(0);
  const [form, setForm] = useStateP({ peque: "", edad: "", program: "robotica", parent: "", email: "", phone: "" });
  const update = (k, v) => setForm((f) => ({ ...f, [k]: v }));

  return (
    <>
      <PageHero p={p} eyebrow="Curso 2025/2026 · Plazas limitadas"
        title={<>Matrícula <em style={{ fontStyle: "normal", color: p.primary }}>abierta</em>.</>}
        subtitle="Elige programa, día y nivel. Si tienes dudas, antes ven a una clase de prueba — es gratis y sin compromiso." />

      <section style={{ padding: "60px 32px 100px", background: p.bg }}>
        <div style={{ maxWidth: 1100, margin: "0 auto", display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 32 }}>
          <div data-matricula-form style={{ background: p.surface, padding: 40, borderRadius: 28, border: `1px solid ${p.ink}10` }}>
            <div style={{ display: "flex", gap: 8, marginBottom: 32 }}>
              {["Programa", "Datos del peque", "Datos del adulto"].map((s, i) => (
                <div key={s} style={{ flex: 1, height: 4, background: i <= step ? p.primary : p.chip, borderRadius: 2 }} />
              ))}
            </div>

            {step === 99 && (
              <div style={{ textAlign: "center", padding: "40px 0" }}>
                <div style={{ fontSize: 64, marginBottom: 16 }}>🎉</div>
                <h2 style={{ fontFamily: "'Bricolage Grotesque', sans-serif", fontWeight: 700, fontSize: 32, color: p.ink, margin: "0 0 12px" }}>¡Solicitud enviada!</h2>
                <p style={{ fontSize: 16, color: p.inkSoft, lineHeight: 1.6, maxWidth: 420, margin: "0 auto" }}>
                  Te contactaremos en menos de 24h para confirmar la plaza. Si tienes prisa, escríbenos por WhatsApp.
                </p>
                <a href={(window.WIPBOT_CONTENT && window.WIPBOT_CONTENT.contact && window.WIPBOT_CONTENT.contact.whatsappHref) || "https://wa.me/+34622457302"} style={{ display: "inline-block", marginTop: 24, background: p.primary, color: p.primaryInk, padding: "14px 24px", borderRadius: 999, fontSize: 15, fontWeight: 600, textDecoration: "none" }}>
                  Ir al WhatsApp →
                </a>
              </div>
            )}

            {step === 0 && (
              <div>
                <h2 style={{ fontFamily: "'Bricolage Grotesque', sans-serif", fontWeight: 700, fontSize: 28, color: p.ink, margin: 0, letterSpacing: "-.02em" }}>1. Elige programa</h2>
                <div style={{ display: "flex", flexDirection: "column", gap: 12, marginTop: 24 }}>
                  {PROGRAMS.map((prog) => (
                    <button key={prog.id} onClick={() => update("program", prog.id)} style={{
                      cursor: "default", textAlign: "left", padding: 20, borderRadius: 16,
                      border: form.program === prog.id ? `2px solid ${p.primary}` : `1.5px solid ${p.ink}14`,
                      background: form.program === prog.id ? p.chip : p.surface,
                      display: "flex", alignItems: "center", gap: 16,
                    }}>
                      <div style={{ width: 12, height: 12, borderRadius: 999, background: p[prog.color] }} />
                      <div style={{ flex: 1 }}>
                        <div style={{ fontFamily: "'Bricolage Grotesque', sans-serif", fontWeight: 700, fontSize: 18, color: p.ink }}>{prog.name}</div>
                        <div style={{ fontSize: 13, color: p.inkSoft, marginTop: 2 }}>{prog.age} · {prog.tagline}</div>
                      </div>
                      <div style={{ fontFamily: "'Bricolage Grotesque', sans-serif", fontWeight: 700, color: p.ink }}>{prog.price || "35€/mes"}</div>
                    </button>
                  ))}
                </div>
              </div>
            )}

            {step === 1 && (
              <div>
                <h2 style={{ fontFamily: "'Bricolage Grotesque', sans-serif", fontWeight: 700, fontSize: 28, color: p.ink, margin: 0, letterSpacing: "-.02em" }}>2. Datos del peque</h2>
                <div style={{ display: "grid", gridTemplateColumns: "2fr 1fr", gap: 16, marginTop: 24 }}>
                  <Field p={p} label="Nombre del peque" value={form.peque} onChange={(v) => update("peque", v)} placeholder="Lucas" />
                  <Field p={p} label="Edad" value={form.edad} onChange={(v) => update("edad", v)} placeholder="9" />
                </div>
                <div style={{ marginTop: 16 }}>
                  <div style={{ fontSize: 12, fontWeight: 600, color: p.inkSoft, marginBottom: 8, letterSpacing: ".05em", textTransform: "uppercase" }}>Día preferido</div>
                  <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
                    {["Lunes", "Martes", "Miércoles", "Jueves", "Viernes"].map((d) => (
                      <span key={d} style={{ padding: "10px 16px", borderRadius: 999, background: p.chip, color: p.ink, fontSize: 14, fontWeight: 500 }}>{d}</span>
                    ))}
                  </div>
                </div>
              </div>
            )}

            {step === 2 && (
              <div>
                <h2 style={{ fontFamily: "'Bricolage Grotesque', sans-serif", fontWeight: 700, fontSize: 28, color: p.ink, margin: 0, letterSpacing: "-.02em" }}>3. Datos del adulto</h2>
                <div style={{ display: "grid", gap: 16, marginTop: 24 }}>
                  <Field p={p} label="Nombre del padre/madre/tutor" value={form.parent} onChange={(v) => update("parent", v)} placeholder="Marta García" />
                  <Field p={p} label="Email" value={form.email} onChange={(v) => update("email", v)} placeholder="marta@correo.es" />
                  <Field p={p} label="Teléfono" value={form.phone} onChange={(v) => update("phone", v)} placeholder="600 000 000" />
                </div>
                <p style={{ fontSize: 12, color: p.inkSoft, marginTop: 16, lineHeight: 1.5 }}>Te llamaremos en 24h para confirmar plaza y resolver cualquier duda.</p>
              </div>
            )}

            <div style={{ display: "flex", justifyContent: "space-between", marginTop: 40 }}>
              <button onClick={() => setStep(Math.max(0, step - 1))} disabled={step === 0} style={{
                cursor: "default", padding: "12px 22px", borderRadius: 999, fontSize: 14, fontWeight: 600,
                background: "transparent", border: `1.5px solid ${p.ink}22`, color: p.ink,
                opacity: step === 0 ? .3 : 1,
              }}>← Atrás</button>
              {step < 2 ? (
                <button onClick={() => setStep(step + 1)} style={{
                  cursor: "default", padding: "12px 22px", borderRadius: 999, fontSize: 14, fontWeight: 600,
                  background: p.primary, color: p.primaryInk, border: 0,
                }}>Siguiente →</button>
              ) : (
                <button onClick={() => submitMatricula(form, p, setStep)} style={{
                  cursor: "pointer", padding: "12px 22px", borderRadius: 999, fontSize: 14, fontWeight: 600,
                  background: p.ink, color: p.bg, border: 0,
                }}>Enviar matrícula ✓</button>
              )}
            </div>
          </div>

          <aside data-matricula-summary style={{ background: p.ink, color: p.bg, padding: 32, borderRadius: 28, alignSelf: "start", position: "sticky", top: 100 }}>
            <div style={{ fontSize: 12, fontWeight: 700, letterSpacing: ".1em", textTransform: "uppercase", opacity: .6 }}>Resumen</div>
            <div style={{ marginTop: 20, paddingBottom: 20, borderBottom: `1px solid ${p.bg}22` }}>
              <div style={{ fontFamily: "'Bricolage Grotesque', sans-serif", fontWeight: 700, fontSize: 24, letterSpacing: "-.02em" }}>
                {PROGRAMS.find((pp) => pp.id === form.program)?.name}
              </div>
              <div style={{ fontSize: 13, opacity: .7, marginTop: 4 }}>1 sesión semanal · {(PROGRAMS.find((pp) => pp.id === form.program) || {}).duration || "90 min"}</div>
            </div>
            <div style={{ display: "flex", flexDirection: "column", gap: 10, marginTop: 20, fontSize: 14 }}>
              <Row label="Cuota mensual" value={(PROGRAMS.find((pp) => pp.id === form.program) || {}).price || "35€/mes"} p={p} />
              <Row label="Matrícula (única)" value={(window.WIPBOT_CONTENT && window.WIPBOT_CONTENT.prices && window.WIPBOT_CONTENT.prices.matricula) || "25,00 €"} p={p} />
              <Row label="Material" value="Incluido" p={p} muted />
              <div style={{ height: 1, background: p.bg + "22", margin: "8px 0" }} />
              <Row label="Hoy pagas" value="0,00 €" p={p} bold />
            </div>
            <p style={{ fontSize: 11, opacity: .55, marginTop: 16, lineHeight: 1.5 }}>El primer cobro se realiza tras la confirmación de plaza.</p>
          </aside>
        </div>
      </section>
    </>
  );
}

function Field({ p, label, value, onChange, placeholder }) {
  return (
    <label style={{ display: "block" }}>
      <div style={{ fontSize: 12, fontWeight: 600, color: p.inkSoft, marginBottom: 6, letterSpacing: ".03em", textTransform: "uppercase" }}>{label}</div>
      <input value={value} onChange={(e) => onChange(e.target.value)} placeholder={placeholder} style={{
        width: "100%", padding: "12px 16px", borderRadius: 12, fontSize: 15,
        border: `1.5px solid ${p.ink}1f`, background: p.bg, color: p.ink, fontFamily: "inherit",
        outline: "none",
      }} />
    </label>
  );
}

function Row({ label, value, p, muted, bold }) {
  return (
    <div style={{ display: "flex", justifyContent: "space-between", opacity: muted ? .65 : 1 }}>
      <span style={{ fontWeight: bold ? 700 : 400 }}>{label}</span>
      <span style={{ fontFamily: "'Bricolage Grotesque', sans-serif", fontWeight: bold ? 700 : 600, fontSize: bold ? 18 : 14, color: bold ? p.accent : p.bg }}>{value}</span>
    </div>
  );
}

// ─── Contacto ─────────────────────────────────────────────────────────────
function ContactoPage({ p }) {
  return (
    <>
      <PageHero p={p} eyebrow="Hablemos"
        title={<>¿Tenéis dudas? <em style={{ fontStyle: "normal", color: p.primary }}>Os contestamos</em>.</>}
        subtitle="WhatsApp para lo rápido, email para lo más detallado, o pasaos por el local. Lo que prefiráis." />

      <section style={{ padding: "20px 32px 100px", background: p.bg }}>
        <div style={{ maxWidth: 1280, margin: "0 auto", display: "grid", gridTemplateColumns: "1fr 1fr", gap: 32 }}>
          <div style={{ display: "grid", gap: 20 }}>
            {function() {
              const C = (window.WIPBOT_CONTENT && window.WIPBOT_CONTENT.contact) || {};
              return (<>
                <ContactCard p={p} title="WhatsApp" subtitle="Lo más rápido, contestamos en el día"
                  cta={C.whatsapp || "622 457 302"} href={C.whatsappHref || "https://wa.me/+34622457302"} tone="pop" />
                <ContactCard p={p} title="Email" subtitle="Para preguntas detalladas o documentos"
                  cta={C.email || "hola@wipbot.es"} href={C.emailHref || "mailto:hola@wipbot.es"} tone="primary" />
                <ContactCard p={p} title="Visítanos" subtitle={C.address || "Avenida Huesca 35 · Alcañiz · 44600"}
                  cta={C.mapsLabel || "Mié y Jue · 15:30 en adelante"} href={C.mapsHref || "https://maps.google.com/?q=Avenida+Huesca+35+Alcañiz"} tone="mint" />
              </>);
            }()}
          </div>
          <div style={{ background: p.surface, padding: 40, borderRadius: 28, border: `1px solid ${p.ink}10` }}>
            <h2 style={{ fontFamily: "'Bricolage Grotesque', sans-serif", fontWeight: 700, fontSize: 32, letterSpacing: "-.02em", color: p.ink, margin: 0 }}>Escríbenos</h2>
            <p style={{ fontSize: 15, color: p.inkSoft, marginTop: 8 }}>Te respondemos en menos de 24h en horario laboral.</p>
            <div style={{ display: "grid", gap: 16, marginTop: 28 }}>
              <Field p={p} label="Tu nombre" value="" onChange={() => {}} placeholder="" />
              <Field p={p} label="Email" value="" onChange={() => {}} placeholder="" />
              <Field p={p} label="Teléfono (opcional)" value="" onChange={() => {}} placeholder="" />
              <label>
                <div style={{ fontSize: 12, fontWeight: 600, color: p.inkSoft, marginBottom: 6, letterSpacing: ".03em", textTransform: "uppercase" }}>Mensaje</div>
                <textarea rows={5} style={{ width: "100%", padding: "12px 16px", borderRadius: 12, fontSize: 15, border: `1.5px solid ${p.ink}1f`, background: p.bg, color: p.ink, fontFamily: "inherit", outline: "none", resize: "vertical" }} />
              </label>
              <button style={{ background: p.ink, color: p.bg, padding: "14px 22px", borderRadius: 999, fontSize: 15, fontWeight: 600, border: 0, cursor: "default", marginTop: 8 }}>Enviar mensaje →</button>
            </div>
          </div>
        </div>
      </section>
    </>
  );
}

function ContactCard({ p, title, subtitle, cta, href, tone }) {
  const c = p[tone] || p.primary;
  return (
    <a href={href} style={{
      background: p.surface, padding: 32, borderRadius: 24, border: `1px solid ${p.ink}10`,
      textDecoration: "none", color: p.ink, display: "flex", alignItems: "center", gap: 24,
    }}>
      <div style={{ width: 60, height: 60, borderRadius: 16, background: c, flexShrink: 0 }} />
      <div style={{ flex: 1 }}>
        <h3 style={{ fontFamily: "'Bricolage Grotesque', sans-serif", fontWeight: 700, fontSize: 24, letterSpacing: "-.02em", color: p.ink, margin: 0 }}>{title}</h3>
        <p style={{ fontSize: 14, color: p.inkSoft, margin: "4px 0 12px" }}>{subtitle}</p>
        <span style={{ fontFamily: "'Bricolage Grotesque', sans-serif", fontWeight: 600, fontSize: 18, color: c }}>{cta} →</span>
      </div>
    </a>
  );
}

Object.assign(window, { PageShell, PageHero, ProgramasPage, NosotrosPage, MatriculaPage, ContactoPage });