// app.jsx — Wipbot landing rework
// Audience: padres con hijos. Goal: confianza + claridad operativa + chispa lúdica.

const { useState, useEffect, useRef, useMemo } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "wipbot",
  "heroVariant": "asymmetric",
  "showRibbon": true,
  "density": "regular"
} /*EDITMODE-END*/;

const PALETTES = {
  wipbot: {
    name: "Wipbot original",
    bg: "#F5F1E1",
    surface: "#FFFFFF",
    ink: "#0E3B47",
    inkSoft: "#3D5862",
    primary: "#1B8FB5",
    primaryInk: "#FFFFFF",
    accent: "#F5C518",
    accentInk: "#0E3B47",
    pop: "#E85D75",
    mint: "#3CC9A2",
    chip: "#EAE3CB"
  },
  ocean: {
    name: "Océano",
    bg: "#FAF7F2",
    surface: "#FFFFFF",
    ink: "#0E1A2B",
    inkSoft: "#3D4D63",
    primary: "#1B3A6B",
    primaryInk: "#FFFFFF",
    accent: "#F5C518",
    accentInk: "#0E1A2B",
    pop: "#E85D5D",
    chip: "#EAF1FA"
  },
  sunset: {
    name: "Atardecer",
    bg: "#FFF8F1",
    surface: "#FFFFFF",
    ink: "#231410",
    inkSoft: "#5A3F38",
    primary: "#C8472A",
    primaryInk: "#FFF8F1",
    accent: "#1F4F4A",
    accentInk: "#FFF8F1",
    pop: "#F5C518",
    chip: "#FBE9DD"
  },
  forest: {
    name: "Bosque",
    bg: "#F4F6F1",
    surface: "#FFFFFF",
    ink: "#10211C",
    inkSoft: "#3B5249",
    primary: "#1F4F3F",
    primaryInk: "#F4F6F1",
    accent: "#E8B339",
    accentInk: "#10211C",
    pop: "#D86B3A",
    chip: "#E4ECDD"
  }
};

// Real assets from wipbot.es CDN (user authorized)
const ASSETS = {
  logo: "assets/wipbot-logo-full.png",
  hero1: "assets/robotica/index1.webp",
  hero2: "assets/robotica/index2.webp",
  lego: "assets/robotica/robotica.webp",
  steam: "assets/robotica/diverciencia.webp",
  team: "assets/robotica/mundo-digital.webp",
  classroom: "assets/nosotros.webp",
  crea: "assets/crea.webp",
  aprende: "assets/aprende.webp",
  comparte: "assets/comparte.webp"
};

const PROGRAMS = [
{
  id: "robotica",
  name: "Robótica",
  age: "8 – 16 años",
  tagline: "Construyen, programan, prueban y vuelven a empezar.",
  description: "De LEGO® SPIKE a Arduino. Los peques pasan de seguir instrucciones a inventar sus propios robots. Aprenden lógica, mecánica y programación por bloques sin darse cuenta.",
  bullets: [
  "Material LEGO® Education y kits Arduino propios",
  "Proyectos por trimestre con reto final",
  "Hasta 16 alumnos por grupo"],
  duration: "90 min",
  price: "35€/mes",
  image: ASSETS.lego,
  color: "primary"
},
{
  id: "diverciencia",
  name: "DiverCiencia",
  age: "6 – 12 años",
  tagline: "Experimentos reales, manos sucias, mil porqués.",
  description: "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.",
  bullets: [
  "Sesiones temáticas con material fungible incluido",
  "Cuaderno de laboratorio personal",
  "Física, química y biología con el método científico"],
  duration: "90 min",
  price: "35€/mes",
  image: ASSETS.steam,
  color: "accent"
},
{
  id: "mundo-digital",
  name: "Mundo Digital",
  age: "6 – 9 años",
  tagline: "El ordenador, su primer superpoder.",
  description: "Para peques de 6 a 9 años que empiezan desde cero. Mecanografía, control del ratón y sistema operativo a través de retos y minijuegos.",
  bullets: [
  "Mecanografía con retos y minijuegos",
  "Control del ratón y sistema operativo",
  "Hasta 16 alumnos por grupo"],
  duration: "75 min",
  price: "30€/mes",
  image: ASSETS.team,
  color: "pop"
}];


const STATS = [
{ n: "7", suffix: "años", label: "formando peques en el Bajo Aragón" },
{ n: "+300", label: "alumnos han pasado por nuestras aulas" },
{ n: "16", label: "alumnos máximo por grupo" },
{ n: "100%", label: "metodología STEAM activa" }];


const FAQ_ITEMS = [
{
  q: "¿A qué edades van dirigidas las extraescolares?",
  a: "Tenemos grupos desde 6 hasta 16 años, separados por edad y nivel. Cada programa indica su rango y, si tienes dudas con un caso concreto, escríbenos por WhatsApp y te ayudamos a colocar a tu hijo/a en el grupo que mejor le encaje."
},
{
  q: "¿Cuándo y dónde son las clases?",
  a: "De miércoles a jueves por la tarde, a partir de las 15:30, tenemos grupos en muchas localidades. Cada grupo tiene un día fijo a la semana, una sesión de 90 minutos."
},
{
  q: "¿Hay que comprar material o llevar algo?",
  a: "No. Todo el material —robots, kits, fungibles— está incluido. Solo necesitan ganas. Para Mundo Digital pueden traer su propio portátil si quieren, pero también disponemos de equipos en clase."
},
{
  q: "¿Cómo es una clase típica?",
  a: "Empezamos con un reto del día, repaso rápido de lo anterior, fase de construcción/experimentación en equipos de 2, puesta en común y limpieza. Sin pizarras eternas: 90% manos a la obra."
},
{
  q: "¿Puedo probar una clase antes de matricular?",
  a: "Sí. Ofrecemos una clase de prueba gratuita en septiembre y enero. Reserva plaza por WhatsApp y te pasamos los horarios disponibles."
},
{
  q: "¿Hay descuento para hermanos?",
  a: "Sí, los hermanos tienen descuento en la cuota mensual. También hay descuento si matriculas a tu hijo/a en dos extraescolares distintas."
}];


const TESTIMONIALS = [
{
  text: "Mi hijo lleva yendo desde el primer curso que se imparte aquí, y le encanta.",
  author: "Celia Calvo",
  role: "Reseña de Google"
},
{
  text: "Mi hijo de 7 años se ha iniciado en clases extraescolares de robótica este curso y LE HA ENCANTADO. El profe tiene unas ideas fascinantes, se le nota que ama lo que hace y así lo transmite a los peques. Totalmente recomendable.",
  author: "Miriam Triguero",
  role: "Reseña de Google"
},
{
  text: "Una experiencia enriquecedora, educativa y divertida para niños y niñas de cualquier edad y nivel de conocimiento. Muchas gracias por abrirles este maravilloso mundo de conocimiento.",
  author: "Silvia González",
  role: "Reseña de Google"
}];


// ─────────────────────────────────────────────────────────────────────────
// UI
// ─────────────────────────────────────────────────────────────────────────


function Ribbon({ p }) {
  const [visible, setVisible] = useState(true);
  if (!visible) return null;
  const R = (window.WIPBOT_CONTENT && window.WIPBOT_CONTENT.ribbon) || {};
  const badge    = R.badge    || "NOVEDAD";
  const text     = R.text     || "Campus Verano 2026 · plazas limitadas";
  const linkText = R.linkText || "Ver campus →";
  const linkHref = R.linkHref || "campus.html";
  return (
    <div data-ribbon style={{
      background: p.ink, color: p.bg,
      padding: "10px 48px 10px 20px", fontSize: 13, letterSpacing: ".01em",
      display: "flex", justifyContent: "center", alignItems: "center", gap: 16, flexWrap: "wrap",
      fontFamily: "'Plus Jakarta Sans', sans-serif", position: "relative", zIndex: 250
    }}>
      <span style={{
        background: p.accent, color: p.accentInk,
        padding: "3px 10px", borderRadius: 999, fontWeight: 700, fontSize: 11, letterSpacing: ".08em"
      }}>{badge}</span>
      <span>{text}</span>
      <a href={linkHref} style={{ color: p.bg, textDecoration: "underline", textUnderlineOffset: 3 }}>
        {linkText}
      </a>
      <button onClick={() => setVisible(false)} aria-label="Cerrar banner" style={{
        position: "absolute", right: 12, top: "50%", transform: "translateY(-50%)",
        background: "none", border: 0, cursor: "pointer", color: "inherit",
        opacity: .6, fontSize: 16, lineHeight: 1, padding: "4px 6px"
      }}>✕</button>
    </div>);

}

function Nav({ p }) {
  const [scrolled, setScrolled] = useState(false);
  const [dropOpen, setDropOpen] = useState(false);
  const [mobileOpen, setMobileOpen] = useState(false);
  const dropRef = React.useRef(null);
  const closeTimer = React.useRef(null);

  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  useEffect(() => {
    if (!mobileOpen) { document.body.style.overflow = ""; return; }
    document.body.style.overflow = "hidden";
    const onKey = (e) => { if (e.key === "Escape") setMobileOpen(false); };
    document.addEventListener("keydown", onKey);
    return () => { document.removeEventListener("keydown", onKey); document.body.style.overflow = ""; };
  }, [mobileOpen]);

  const openDrop = () => { clearTimeout(closeTimer.current); setDropOpen(true); };
  const closeDrop = () => { closeTimer.current = setTimeout(() => setDropOpen(false), 120); };
  const closeMobile = () => setMobileOpen(false);

  const linkStyle = {
    color: p.ink, fontSize: 14, fontWeight: 500, textDecoration: "none",
    padding: "8px 0", position: "relative"
  };

  const programs = [
    { name: "Robótica",     href: "robotica.html",      color: p.primary, age: "8 – 16 años" },
    { name: "DiverCiencia", href: "diverciencia.html",  color: p.accent,  age: "6 – 12 años" },
    { name: "Mundo Digital",href: "mundo-digital.html", color: p.pop,     age: "6 – 10 años" },
  ];

  return (
    <>
      <header style={{
        position: "sticky", top: 0, zIndex: 50,
        background: scrolled ? `${p.bg}EE` : "transparent",
        backdropFilter: scrolled ? "blur(12px)" : "none",
        borderBottom: scrolled ? `1px solid ${p.ink}11` : "1px solid transparent",
        transition: "background .25s ease, border-color .25s ease"
      }}>
        <div style={{
          maxWidth: 1280, margin: "0 auto", padding: "10px 32px",
          display: "flex", alignItems: "center", justifyContent: "space-between", gap: 32
        }}>
          <a href="inicio.html" style={{ display: "flex", alignItems: "center", textDecoration: "none" }}>
            <img src="assets/wipbot-logo-full.png" alt="Wipbot" style={{ display: "block", objectFit: "contain", width: "141.25px", height: "55px" }} />
          </a>

          {/* Desktop nav */}
          <nav data-desktop-nav style={{ display: "flex", alignItems: "center", gap: 28 }}>
            <div ref={dropRef} style={{ position: "relative" }} onMouseEnter={openDrop} onMouseLeave={closeDrop}>
              <button style={{
                ...linkStyle, background: "none", border: 0, cursor: "default",
                display: "flex", alignItems: "center", gap: 4, fontFamily: "inherit"
              }}>
                Extraescolares <span style={{ fontSize: 9, opacity: .55, display: "inline-block", transition: "transform .2s", transform: dropOpen ? "rotate(180deg)" : "none" }}>▾</span>
              </button>
              {dropOpen && (
                <div style={{
                  position: "absolute", top: "calc(100% + 4px)", left: "50%", transform: "translateX(-50%)",
                  background: p.surface, border: `1px solid ${p.ink}14`, borderRadius: 16,
                  boxShadow: `0 12px 40px ${p.ink}1a`, padding: 8, minWidth: 220, zIndex: 100
                }}>
                  {programs.map((item) => (
                    <a key={item.name} href={item.href} style={{
                      display: "flex", alignItems: "center", gap: 12, padding: "10px 14px",
                      borderRadius: 10, textDecoration: "none", color: p.ink
                    }}>
                      <span style={{ width: 9, height: 9, borderRadius: 999, background: item.color, flexShrink: 0 }} />
                      <div>
                        <div style={{ fontSize: 14, fontWeight: 600 }}>{item.name}</div>
                        <div style={{ fontSize: 11, color: p.inkSoft, marginTop: 1 }}>{item.age}</div>
                      </div>
                    </a>
                  ))}
                  <div style={{ height: 1, background: `${p.ink}10`, margin: "4px 8px" }} />
                  <a href="programas.html" style={{
                    display: "block", padding: "10px 14px", borderRadius: 10, textDecoration: "none",
                    color: p.inkSoft, fontSize: 13, fontWeight: 500
                  }}>Ver todos los programas →</a>
                </div>
              )}
            </div>
            <a href="campus.html" data-nav-pill style={{
              ...linkStyle,
              background: p.mint || "#3CC9A2", color: p.ink,
              padding: "7px 16px", borderRadius: 999, fontWeight: 700, fontSize: 13
            }}>Campus 26 ☀️</a>
            <a href="nosotros.html" style={linkStyle}>Nosotros</a>
            <a href="contacto.html" style={linkStyle}>Contacto</a>
            <a href="https://wipbot.acadesoft.com/students" style={{ ...linkStyle, color: p.inkSoft, fontSize: 13 }}>Área cliente ↗</a>
          </nav>

          {/* Hamburguesa crema pegada al header — visible solo cuando menú cerrado */}
          <button
            data-mob-open
            onClick={() => setMobileOpen(true)}
            aria-label="Abrir menú"
            aria-expanded={mobileOpen}
            aria-controls="wipbot-mob-menu"
            style={{
              display: "none", background: "none", border: 0, cursor: "pointer",
              padding: 8, width: 40, height: 40,
              flexDirection: "column", gap: 5,
              alignItems: "center", justifyContent: "center",
              opacity: mobileOpen ? 0 : 1,
              pointerEvents: mobileOpen ? "none" : "auto",
              transition: "opacity .18s ease"
            }}>
            <span style={{ display: "block", width: 24, height: 2, background: p.bg, borderRadius: 1 }} />
            <span style={{ display: "block", width: 24, height: 2, background: p.bg, borderRadius: 1 }} />
            <span style={{ display: "block", width: 24, height: 2, background: p.bg, borderRadius: 1 }} />
          </button>
        </div>
      </header>

      {/* X marino flotante — visible solo cuando menú abierto */}
      <button
        data-mob-close
        onClick={closeMobile}
        aria-label="Cerrar menú"
        style={{
          display: "none",
          position: "fixed", top: 14, right: 14, zIndex: 1100,
          width: 48, height: 48, borderRadius: 999,
          background: p.bg, color: p.ink,
          border: 0, cursor: "pointer", padding: 0,
          boxShadow: `0 6px 20px rgba(14, 59, 71, .22)`,
          alignItems: "center", justifyContent: "center",
          opacity: mobileOpen ? 1 : 0,
          pointerEvents: mobileOpen ? "auto" : "none",
          transform: mobileOpen ? "scale(1)" : "scale(.85)",
          transition: "opacity .2s ease, transform .25s cubic-bezier(.4,0,.2,1)"
        }}>
        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" aria-hidden="true">
          <path d="M6 6L18 18M6 18L18 6" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" />
        </svg>
      </button>

      {/* Backdrop — clic fuera cierra. Debajo del drawer, encima del header. */}
      <div
        data-mob-backdrop
        onClick={closeMobile}
        aria-hidden="true"
        style={{
          position: "fixed", inset: 0, zIndex: 999,
          background: "rgba(14, 59, 71, .35)",
          opacity: mobileOpen ? 1 : 0,
          pointerEvents: mobileOpen ? "auto" : "none",
          transition: "opacity .32s ease",
          display: "none"
        }} />

      {/* Drawer lateral — cubre header y banner. Botón flotante encima por z-index. */}
      <div
        data-mob-menu
        id="wipbot-mob-menu"
        role="dialog"
        aria-modal="true"
        aria-hidden={!mobileOpen}
        style={{
          position: "fixed", top: 0, right: 0, bottom: 0,
          width: "min(360px, 100vw)",
          zIndex: 1000, background: p.bg,
          display: "flex", flexDirection: "column",
          fontFamily: "'Plus Jakarta Sans', sans-serif",
          transform: mobileOpen ? "translateX(0)" : "translateX(100%)",
          transition: "transform .32s cubic-bezier(.4,0,.2,1)",
          boxShadow: `-12px 0 40px rgba(0,0,0,.18)`,
          pointerEvents: mobileOpen ? "auto" : "none",
          willChange: "transform"
        }}>
        {/* Contenido scrollable. paddingTop deja espacio bajo el botón flotante. */}
        <div style={{
          flex: 1, overflowY: "auto", WebkitOverflowScrolling: "touch",
          padding: "84px 20px 40px", display: "flex", flexDirection: "column"
        }}>
          {/* Programs */}
          <div style={{
            fontSize: 11, fontWeight: 700, letterSpacing: ".1em",
            textTransform: "uppercase", color: p.inkSoft, marginBottom: 10
          }}>Extraescolares</div>
          <div style={{ display: "flex", flexDirection: "column", gap: 6, marginBottom: 24 }}>
            {programs.map((item) => (
              <a key={item.name} href={item.href} style={{
                display: "flex", alignItems: "center", gap: 14,
                padding: "13px 16px", borderRadius: 14,
                textDecoration: "none", color: p.ink,
                background: p.surface, border: `1px solid ${p.ink}09`
              }}>
                <span style={{ width: 10, height: 10, borderRadius: 999, background: item.color, flexShrink: 0 }} />
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 16, fontWeight: 600, fontFamily: "'Bricolage Grotesque', sans-serif" }}>{item.name}</div>
                  <div style={{ fontSize: 12, color: p.inkSoft, marginTop: 1 }}>{item.age}</div>
                </div>
                <span style={{ fontSize: 13, color: p.inkSoft, opacity: .6 }}>→</span>
              </a>
            ))}
            <a href="programas.html" style={{
              display: "block", padding: "12px 16px", borderRadius: 12,
              textDecoration: "none", color: p.inkSoft, fontSize: 14, fontWeight: 500,
              background: p.chip
            }}>Ver todos los programas →</a>
          </div>

          <a href="campus.html" style={{
            display: "flex", alignItems: "center", gap: 14,
            padding: "16px 16px", borderRadius: 14, marginBottom: 28,
            textDecoration: "none", color: p.ink,
            background: p.mint || "#3CC9A2", border: "none"
          }}>
            <span style={{ fontSize: 22 }}>☀️</span>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 16, fontWeight: 700, fontFamily: "'Bricolage Grotesque', sans-serif" }}>Campus Verano 2026</div>
              <div style={{ fontSize: 12, color: p.ink, opacity: .7, marginTop: 1 }}>Verano · 6–14 años</div>
            </div>
            <span style={{ fontSize: 13, opacity: .6 }}>→</span>
          </a>

          {/* Secondary links */}
          <div style={{
            fontSize: 11, fontWeight: 700, letterSpacing: ".1em",
            textTransform: "uppercase", color: p.inkSoft, marginBottom: 10
          }}>Wipbot</div>
          <div style={{ display: "flex", flexDirection: "column", marginBottom: 28 }}>
            {[
              { label: "Inicio",        href: "inicio.html" },
              { label: "Nosotros",      href: "nosotros.html" },
              { label: "Contacto",      href: "contacto.html" },
              { label: "Área cliente ↗", href: "https://wipbot.acadesoft.com/students" },
            ].map((l) => (
              <a key={l.label} href={l.href} style={{
                display: "block", padding: "14px 4px",
                borderBottom: `1px solid ${p.ink}0e`,
                textDecoration: "none", color: p.ink, fontSize: 16, fontWeight: 500
              }}>{l.label}</a>
            ))}
          </div>

          {/* CTA */}
          <a href="contacto.html" style={{
            display: "block", background: p.ink, color: p.bg,
            padding: "16px 24px", borderRadius: 999,
            fontSize: 16, fontWeight: 600, textDecoration: "none", textAlign: "center",
            marginTop: "auto"
          }}>Matrículas 26/27 · Próximamente</a>
        </div>
      </div>
    </>
  );
}

function Hero({ p, variant }) {
  if (variant === "centered") return <HeroCentered p={p} />;
  return <HeroAsymmetric p={p} />;
}

function HeroAsymmetric({ p }) {
  return (
    <section style={{
      maxWidth: 1280, margin: "0 auto", padding: "60px 32px 80px",
      display: "grid", gridTemplateColumns: "1.15fr .85fr", gap: 56, alignItems: "center"
    }}>
      <div>
        <div style={{
          display: "inline-flex", alignItems: "center", gap: 8,
          padding: "6px 12px", background: p.chip, borderRadius: 999,
          fontSize: 12, fontWeight: 600, color: p.primary, letterSpacing: ".02em",
          marginBottom: 24
        }}>
          <span style={{
            width: 8, height: 8, borderRadius: 999, background: p.pop,
            boxShadow: `0 0 0 4px ${p.pop}33`
          }} />
          {(window.WIPBOT_CONTENT && window.WIPBOT_CONTENT.hero && window.WIPBOT_CONTENT.hero.kicker) || "Alcañiz · Bajo Aragón · 7 años enseñando"}
        </div>
        <h1 style={{
          fontFamily: "'Bricolage Grotesque', sans-serif", fontWeight: 700,
          fontSize: "clamp(52px, 6.2vw, 92px)", lineHeight: 1.02,
          letterSpacing: "-.035em", color: p.ink, margin: 0,
          fontVariationSettings: "'wdth' 95"
        }}>
          Las tardes <em style={{
            fontStyle: "normal", color: p.primary, position: "relative",
            display: "inline-block"
          }}>
            <span>de tus hijos</span>
            <svg viewBox="0 0 300 12" preserveAspectRatio="none" style={{
              position: "absolute", bottom: -8, left: 0, width: "100%", height: 12
            }}>
              <path d="M2 8 Q 75 1, 150 6 T 298 5" stroke={p.accent} strokeWidth="6"
              fill="none" strokeLinecap="round" />
            </svg>
          </em>{" "}
          merecen algo<br />más que solo pantallas.
        </h1>
        <p style={{
          fontSize: 19, lineHeight: 1.55, color: p.inkSoft, marginTop: 32, maxWidth: 540,
          fontFamily: "'Plus Jakarta Sans', sans-serif"
        }}>
          {(window.WIPBOT_CONTENT && window.WIPBOT_CONTENT.hero && window.WIPBOT_CONTENT.hero.subhead) || "Robótica, ciencia y mundo digital para niños de 6 a 16 años. Aprenden haciendo, en grupos pequeños, con monitores que entienden a los peques tanto como a la tecnología."}
        </p>
        <div style={{ display: "flex", gap: 12, marginTop: 36, flexWrap: "wrap" }}>
          <a href="contacto.html" style={{
            background: p.primary, color: p.primaryInk, padding: "16px 26px",
            borderRadius: 999, fontSize: 16, fontWeight: 600, textDecoration: "none",
            display: "inline-flex", alignItems: "center", gap: 10
          }}>
            Matrículas 26/27 · Próximamente
          </a>
          <a href="#programas" style={{
            background: "transparent", color: p.ink, padding: "16px 26px",
            borderRadius: 999, fontSize: 16, fontWeight: 600, textDecoration: "none",
            border: `1.5px solid ${p.ink}22`
          }}>
            Ver programas
          </a>
        </div>
        <div style={{ display: "flex", gap: 24, marginTop: 40, alignItems: "center" }}>
          <div style={{ display: "flex" }}>
            {[p.primary, p.accent, p.pop].map((c, i) =>
            <div key={i} style={{
              width: 36, height: 36, borderRadius: 999, background: c,
              border: `2.5px solid ${p.bg}`, marginLeft: i ? -10 : 0,
              display: "grid", placeItems: "center", color: c === p.accent ? p.ink : "#fff",
              fontFamily: "'Bricolage Grotesque', sans-serif", fontWeight: 700, fontSize: 14
            }}>{["L", "A", "I"][i]}</div>
            )}
          </div>
          <div style={{ fontSize: 13, color: p.inkSoft, lineHeight: 1.4 }}>
            <strong style={{ color: p.ink }}>+300 familias</strong> ya confían<br />en Wipbot
          </div>
        </div>
      </div>
      <HeroCollage p={p} />
    </section>);

}

function HeroCentered({ p }) {
  return (
    <section style={{
      maxWidth: 1100, margin: "0 auto", padding: "80px 32px 100px",
      textAlign: "center"
    }}>
      <div style={{
        display: "inline-flex", alignItems: "center", gap: 8,
        padding: "6px 12px", background: p.chip, borderRadius: 999,
        fontSize: 12, fontWeight: 600, color: p.primary, marginBottom: 24
      }}>
        <span style={{ width: 8, height: 8, borderRadius: 999, background: p.pop }} />
        Extraescolares STEAM · Alcañiz
      </div>
      <h1 style={{
        fontFamily: "'Bricolage Grotesque', sans-serif", fontWeight: 700,
        fontSize: "clamp(48px, 7vw, 104px)", lineHeight: 1.0,
        letterSpacing: "-.04em", color: p.ink, margin: 0
      }}>
        Extraescolares donde<br />
        <em style={{ fontStyle: "normal", color: p.primary }}>aprenden creando</em>,
        <br />no copiando.
      </h1>
      <p style={{
        fontSize: 20, lineHeight: 1.5, color: p.inkSoft, margin: "32px auto 0", maxWidth: 640,
        fontFamily: "'Plus Jakarta Sans', sans-serif"
      }}>
        Robótica, ciencia y tecnología para peques de 6 a 16 años en el Bajo Aragón.
        Grupos pequeños, material incluido, mucha curiosidad.
      </p>
      <div style={{ display: "flex", gap: 12, marginTop: 36, justifyContent: "center", flexWrap: "wrap" }}>
        <a href="contacto.html" style={{
          background: p.primary, color: p.primaryInk, padding: "16px 28px",
          borderRadius: 999, fontSize: 16, fontWeight: 600, textDecoration: "none"
        }}>Matrículas 26/27 · Próximamente</a>
        <a href="#programas" style={{
          color: p.ink, padding: "16px 28px", borderRadius: 999, fontSize: 16,
          fontWeight: 600, textDecoration: "none", border: `1.5px solid ${p.ink}22`
        }}>Ver programas</a>
      </div>
      <div style={{ marginTop: 64 }}>
        <HeroCollage p={p} compact />
      </div>
    </section>);

}

function HeroCollage({ p, compact }) {
  return (
    <div data-hero-collage style={{
      position: "relative", aspectRatio: compact ? "16/9" : "4/5", width: "100%"
    }}>
      {/* Background blob */}
      <svg viewBox="0 0 400 500" style={{
        position: "absolute", inset: 0, width: "100%", height: "100%", zIndex: 0
      }}>
        <path d="M200 30 Q 360 60, 370 220 T 260 460 Q 120 480, 60 360 T 80 130 Q 130 20, 200 30Z"
        fill={p.accent} opacity=".25" />
      </svg>
      {/* Main image card */}
      <div data-collage-primary style={{
        position: "absolute", top: "8%", left: "10%", width: "70%", height: "75%",
        borderRadius: 28, overflow: "hidden", boxShadow: `0 30px 60px ${p.ink}22`,
        background: p.surface, transform: "rotate(-3deg)"
      }}>
        <img src={ASSETS.hero1} alt="Extraescolares Wipbot"
        style={{ width: "100%", height: "100%", objectFit: "cover" }} />
      </div>
      {/* Secondary image */}
      <div data-collage-secondary style={{
        position: "absolute", bottom: "5%", right: "5%", width: "45%", height: "40%",
        borderRadius: 20, overflow: "hidden", boxShadow: `0 20px 40px ${p.ink}22`,
        background: p.surface, transform: "rotate(4deg)", border: `5px solid ${p.surface}`
      }}>
        <img src={ASSETS.hero2} alt="Alumnos Wipbot"
        style={{ width: "100%", height: "100%", objectFit: "cover" }} />
      </div>
      {/* Floating stat card */}
      <div data-collage-stat style={{
        position: "absolute", top: "15%", right: "0%",
        background: p.surface, padding: "14px 18px", borderRadius: 16,
        boxShadow: `0 12px 30px ${p.ink}1a`,
        display: "flex", alignItems: "center", gap: 10,
        transform: "rotate(3deg)"
      }}>
        <div style={{
          width: 36, height: 36, borderRadius: 999, background: p.pop,
          display: "grid", placeItems: "center", color: "#fff", fontSize: 18
        }}>★</div>
        <div>
          <div style={{ fontFamily: "'Bricolage Grotesque', sans-serif", fontWeight: 700, fontSize: 16, color: p.ink }}>Profes especializados</div>
          <div style={{ fontSize: 11, color: p.inkSoft }}>atención cercana</div>
        </div>
      </div>
      {/* Floating chip */}
      <div data-collage-chip style={{
        position: "absolute", bottom: "30%", left: "0%",
        background: p.ink, color: p.bg, padding: "10px 14px", borderRadius: 999,
        fontSize: 12, fontWeight: 600, transform: "rotate(-5deg)",
        boxShadow: `0 8px 20px ${p.ink}33`
      }}>🤖 LEGO® · Scratch· 3D

      </div>
    </div>);

}

// LogoBar — trust strip
function LogoBar({ p }) {
  const items = ["LEGO® Education", "Arduino", "Scratch", "MIT App Inventor", "Tinkercad", "Micro:bit"];
  return (
    <section style={{
      borderTop: `1px solid ${p.ink}11`, borderBottom: `1px solid ${p.ink}11`,
      padding: "28px 32px", background: p.surface
    }}>
      <div data-logo-bar style={{
        maxWidth: 1280, margin: "0 auto",
        display: "flex", alignItems: "center", justifyContent: "space-between", gap: 32, flexWrap: "wrap"
      }}>
        <span style={{
          fontSize: 12, fontWeight: 600, letterSpacing: ".1em", textTransform: "uppercase",
          color: p.inkSoft
        }}>Trabajamos con</span>
        {items.map((it) =>
        <span key={it} style={{
          fontFamily: "'Bricolage Grotesque', sans-serif", fontWeight: 600,
          fontSize: 17, color: p.inkSoft, opacity: .75
        }}>{it}</span>
        )}
      </div>
    </section>);

}

// Apply overrides from content.json onto the in-memory constants before React mounts.
// Called from main.jsx and every sub-page inline script after window.WIPBOT_READY resolves.
function applyContent(C) {
  if (!C) return;
  if (C.palette)      Object.assign(PALETTES.wipbot, C.palette);
  if (C.assets)       Object.assign(ASSETS, C.assets);
  if (C.stats)        STATS.splice(0, STATS.length, ...C.stats);
  if (C.faq)          FAQ_ITEMS.splice(0, FAQ_ITEMS.length, ...C.faq);
  if (C.testimonials) TESTIMONIALS.splice(0, TESTIMONIALS.length, ...C.testimonials);
  if (C.programs)     PROGRAMS.splice(0, PROGRAMS.length, ...C.programs.map(function(cp) {
    var base = PROGRAMS.find(function(p){ return p.id === cp.id; }) || {};
    return Object.assign({}, base, cp, { image: ASSETS[cp.imageKey] || cp.image || base.image });
  }));
  if (C.ribbon) {
    if (typeof C.ribbon.show !== 'undefined') TWEAK_DEFAULTS.showRibbon = C.ribbon.show;
  }
}

Object.assign(window, { Ribbon, Nav, Hero, LogoBar, PALETTES, PROGRAMS, STATS, FAQ_ITEMS, TESTIMONIALS, ASSETS, TWEAK_DEFAULTS, applyContent });