/* === Kids Kingdom — Extras.jsx ===
   Nuevas secciones + utilidades para dar más vida.
   Expone componentes a window para usar desde app.jsx                       */
const { useState, useEffect, useRef } = React;

/* ================================================================
   SCROLL PROGRESS BAR
   ================================================================ */
function ScrollProgress() {
  const [p, setP] = useState(0);
  useEffect(() => {
    const onS = () => {
      const h = document.documentElement;
      const total = h.scrollHeight - h.clientHeight;
      setP(total > 0 ? (h.scrollTop / total) * 100 : 0);
    };
    onS();
    window.addEventListener("scroll", onS, { passive: true });
    return () => window.removeEventListener("scroll", onS);
  }, []);
  return <div className="scroll-progress"><span style={{ width: p + "%" }}/></div>;
}

/* ================================================================
   FLOATING WHATSAPP BUTTON
   ================================================================ */
function FloatingWhats() {
  const [visible, setVisible] = useState(false);
  const [open, setOpen] = useState(false);
  useEffect(() => {
    const onS = () => setVisible(window.scrollY > 400);
    onS();
    window.addEventListener("scroll", onS, { passive: true });
    return () => window.removeEventListener("scroll", onS);
  }, []);
  return (
    <div className={"wa-fab " + (visible ? "in" : "")}>
      {open && (
        <div className="wa-bubble">
          <div className="wa-bubble-h">
            <span className="wa-av"><Icon.Crown size={16} c="#fff"/></span>
            <div>
              <strong>Kids Kingdom</strong>
              <small>Te respondemos en minutos</small>
            </div>
            <button className="wa-x" onClick={() => setOpen(false)} aria-label="Cerrar"><Icon.X size={14}/></button>
          </div>
          <div className="wa-msg">
            ¡Hola! 👑 ¿En qué podemos ayudarte hoy?
          </div>
          <a className="wa-cta" href="https://wa.me/573205551234" target="_blank" rel="noopener">
            Abrir chat <Icon.Arrow size={14}/>
          </a>
        </div>
      )}
      <button className="wa-btn" onClick={() => setOpen(v => !v)} aria-label="WhatsApp">
        <Icon.Whats size={26}/>
        {!open && <span className="wa-pulse"/>}
      </button>
    </div>
  );
}

/* ================================================================
   CONFETTI BURST (canvas, fires on event)
   ================================================================ */
function fireConfetti() {
  const c = document.createElement("canvas");
  c.className = "kk-confetti";
  document.body.appendChild(c);
  const ctx = c.getContext("2d");
  const resize = () => { c.width = innerWidth; c.height = innerHeight; };
  resize();
  const colors = ["#A83749", "#5FB06A", "#4B4591", "#B8860B", "#FBF7F0"];
  const parts = Array.from({ length: 140 }).map(() => ({
    x: innerWidth / 2, y: innerHeight / 2,
    vx: (Math.random() - 0.5) * 16,
    vy: -10 - Math.random() * 10,
    a: Math.random() * Math.PI * 2,
    va: (Math.random() - 0.5) * 0.3,
    s: 5 + Math.random() * 6,
    c: colors[Math.floor(Math.random() * colors.length)],
    life: 0,
  }));
  let raf;
  const tick = () => {
    ctx.clearRect(0, 0, c.width, c.height);
    let alive = false;
    parts.forEach(p => {
      p.vy += 0.5; p.x += p.vx; p.y += p.vy; p.a += p.va; p.life += 1;
      if (p.y < c.height + 40) alive = true;
      ctx.save();
      ctx.translate(p.x, p.y);
      ctx.rotate(p.a);
      ctx.fillStyle = p.c;
      ctx.fillRect(-p.s / 2, -p.s / 4, p.s, p.s / 2);
      ctx.restore();
    });
    if (alive) raf = requestAnimationFrame(tick);
    else c.remove();
  };
  tick();
  setTimeout(() => { cancelAnimationFrame(raf); c.remove(); }, 4500);
}

/* ================================================================
   EDADES — Programa por niveles
   ================================================================ */
function Edades() {
  const niveles = [
    {
      id: "caminadores", n: "01", edad: "1 – 2 años",
      titulo: "Caminadores",
      color: "var(--kk-green)",
      lema: "Sus primeros pasos en el reino",
      desc: "Estímulos sensoriales, vínculos cálidos y rutinas predecibles para que la curiosidad despierte.",
      foco: ["Motricidad gruesa y fina", "Vínculo emocional seguro", "Lenguaje y primeras palabras"],
      hora: "7:30am – 12:30pm",
    },
    {
      id: "parvulos", n: "02", edad: "2 – 3 años",
      titulo: "Párvulos",
      color: "var(--kk-gold)",
      lema: "Exploradores en marcha",
      desc: "Aulas Montessori con materiales nobles. Aprender a elegir, ordenar y compartir.",
      foco: ["Autonomía personal", "Convivencia y respeto", "Pre-lenguaje en inglés"],
      hora: "7:30am – 1:00pm",
    },
    {
      id: "pre-jardin", n: "03", edad: "3 – 4 años",
      titulo: "Pre-jardín",
      color: "var(--kk-red)",
      lema: "La imaginación toma forma",
      desc: "Proyectos cortos inspirados en Reggio Emilia. Arte, naturaleza y la voz de cada niño.",
      foco: ["Expresión artística", "Pensamiento lógico básico", "Inglés conversacional"],
      hora: "7:30am – 2:00pm",
    },
    {
      id: "jardin", n: "04", edad: "4 – 5 años",
      titulo: "Jardín",
      color: "var(--kk-purple)",
      lema: "Pequeños científicos y artistas",
      desc: "STEAM y aprendizaje basado en proyectos. Hacer preguntas, formular hipótesis y experimentar.",
      foco: ["Lecto-escritura emergente", "STEAM y resolución", "Inglés intermedio"],
      hora: "7:30am – 2:30pm",
    },
    {
      id: "transicion", n: "05", edad: "5 – 6 años",
      titulo: "Transición",
      color: "#2d3a8c",
      lema: "Listos para el siguiente reino",
      desc: "Consolidamos hábitos, lecto-escritura, pensamiento matemático y un fuerte componente emocional.",
      foco: ["Lectura y escritura", "Matemáticas concretas", "Habilidades para la vida"],
      hora: "7:30am – 3:00pm",
    },
  ];
  const [act, setAct] = useState(niveles[2].id);
  const cur = niveles.find(n => n.id === act);

  return (
    <section id="edades" className="kk-section">
      <div className="edades-head">
        <div>
          <span className="kk-eyebrow reveal">Programa por edades</span>
          <h2 className="kk-h2 reveal reveal-d1">
            Una etapa para cada{" "}
            <span style={{color: "var(--kk-red)", fontStyle:"italic"}}>aventura</span>.
          </h2>
        </div>
        <p className="kk-sub reveal reveal-d2" style={{maxWidth: 380}}>
          Desde sus primeros pasos hasta el salto al colegio. Cinco niveles
          pensados con cuidado para acompañar el ritmo de tu hijo.
        </p>
      </div>

      <div className="edades-strip reveal">
        {niveles.map(n => (
          <button
            key={n.id}
            className={"edad-pill " + (act === n.id ? "active" : "")}
            style={{ "--c": n.color }}
            onClick={() => setAct(n.id)}
          >
            <span className="num">{n.n}</span>
            <span className="nm">{n.titulo}</span>
            <span className="ed">{n.edad}</span>
          </button>
        ))}
      </div>

      <div className="edad-detail" key={cur.id}>
        <div className="edad-visual" style={{ "--c": cur.color }}>
          <div className="edad-num">{cur.n}</div>
          <div className="edad-orbit"/>
          <div className="edad-orbit two"/>
          <span className="edad-bubble"/>
          <div className="edad-emo">
            <Icon.Crown size={42} c="#fff"/>
          </div>
        </div>
        <div className="edad-text">
          <span className="edad-tag" style={{background: cur.color}}>{cur.edad}</span>
          <h3>{cur.titulo} <span className="font-hand" style={{color: cur.color, fontSize: 28, marginLeft: 6}}>{cur.lema}</span></h3>
          <p>{cur.desc}</p>
          <div className="edad-grid">
            <div className="edad-card">
              <small>Enfoque pedagógico</small>
              <ul>
                {cur.foco.map((f, i) => (
                  <li key={i}><span className="bullet" style={{background: cur.color}}/>{f}</li>
                ))}
              </ul>
            </div>
            <div className="edad-card alt" style={{ background: cur.color }}>
              <small style={{opacity: 0.85}}>Jornada</small>
              <div className="edad-hora">{cur.hora}</div>
              <p style={{margin: "8px 0 0", opacity: 0.92}}>Lunes a viernes. Almuerzo, refrigerios y transporte incluidos.</p>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ================================================================
   UN DÍA EN EL REINO — Timeline
   ================================================================ */
function DiaEnReino() {
  const dia = [
    { h: "7:30", t: "Bienvenida real",            d: "Saludo personal, ronda de emociones y desayuno compartido.",       c: "var(--kk-gold)",   ic: <Icon.Sparkle size={18}/> },
    { h: "8:30", t: "Proyectos vivos",            d: "Trabajo en proyectos Reggio: arte, ciencia y exploración.",        c: "var(--kk-red)",    ic: <Icon.Brush size={18}/> },
    { h: "10:00", t: "Patio del castillo",        d: "Juego libre, motricidad y conexión con la naturaleza.",            c: "var(--kk-green)",  ic: <Icon.Tree size={18}/> },
    { h: "10:45", t: "English with Royals",       d: "Inmersión en inglés a través de canciones y juegos.",              c: "var(--kk-purple)", ic: <Icon.Book size={18}/> },
    { h: "12:00", t: "Almuerzo y descanso",       d: "Comida balanceada y tiempo de calma con música y cuentos.",        c: "var(--kk-gold)",   ic: <Icon.Heart size={18}/> },
    { h: "13:30", t: "Talleres del reino",        d: "Música, yoga, huerta o cocina — rotamos cada día.",                c: "var(--kk-red)",    ic: <Icon.Star size={18}/> },
    { h: "15:00", t: "Merienda y juego",          d: "Una pausa rica para recargar energía antes de seguir explorando.", c: "var(--kk-green)",  ic: <Icon.Heart size={18}/> },
    { h: "15:30", t: "Actividades extracurriculares", d: "Deportes, arte, danza y robótica para los pequeños del reino.", c: "var(--kk-purple)", ic: <Icon.Puzzle size={18}/> },
    { h: "16:30", t: "Asesoría de tareas",        d: "Acompañamiento personalizado con apoyo docente y refuerzo escolar.", c: "var(--kk-red)",    ic: <Icon.Book size={18}/> },
    { h: "17:30", t: "Hasta mañana",              d: "Cierre afectivo, círculo de gratitudes y entrega a las familias.", c: "var(--kk-gold)",   ic: <Icon.Crown size={18}/> },
  ];
  return (
    <section id="dia" className="kk-section">
      <div style={{maxWidth: 700, marginBottom: 50}}>
        <span className="kk-eyebrow reveal">Un día en el reino</span>
        <h2 className="kk-h2 reveal reveal-d1">
          Rutinas que abrazan,{" "}
          <span style={{color: "var(--kk-gold)", fontStyle:"italic"}}>experiencias</span> que asombran.
        </h2>
        <p className="kk-sub reveal reveal-d2">
          Cada día está pensado como una pequeña aventura: con momentos de calma,
          movimiento, descubrimiento y conexión.
        </p>
      </div>
      <div className="timeline">
        <div className="timeline-line"/>
        {dia.map((d, i) => (
          <div key={i} className={"t-row reveal " + (i % 2 ? "r" : "l")} style={{transitionDelay: `${i * 60}ms`}}>
            <div className="t-card">
              <span className="t-ic" style={{background: d.c}}>{d.ic}</span>
              <h4>{d.t}</h4>
              <p>{d.d}</p>
            </div>
            <div className="t-time" style={{background: d.c}}>{d.h}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

/* ================================================================
   TESTIMONIOS
   ================================================================ */
function Testimonios() {
  const list = [
    { n: "Laura Méndez",     r: "Mamá de Mateo, Magos",         t: "Mateo llega cada mañana con una sonrisa enorme. En Kids Kingdom realmente conocen a cada niño por su nombre y su historia.", c: "var(--kk-red)"   , in: "LM" },
    { n: "Andrés Caicedo",   r: "Papá de Sofía, Caballeros",    t: "El acompañamiento emocional es excepcional. Las maestras nos comparten observaciones detalladas y propuestas concretas para casa.", c: "var(--kk-purple)", in: "AC" },
    { n: "Camila Torres",    r: "Mamá de Antonia, Pajes",       t: "Mi hija empezó con apenas 14 meses y ha sido un proceso amoroso. Los espacios son hermosos, seguros y se siente el cariño en cada detalle.", c: "var(--kk-green)" , in: "CT" },
    { n: "Diego Restrepo",   r: "Papá de Lucas, Reyes",         t: "Lucas pasó al colegio con una base sólida, no solo académica, sino emocional. La diferencia se nota.", c: "var(--kk-gold)"  , in: "DR" },
    { n: "Valentina Rojas",  r: "Mamá de Emma, Escuderos",      t: "Lo que más valoro es la coherencia: lo que dicen lo cumplen. Emma habla inglés con muchísima naturalidad y le encanta ir.", c: "var(--kk-red)"   , in: "VR" },
    { n: "Mauricio Pérez",   r: "Papá de Samuel, Magos",        t: "Los proyectos STEAM son maravillosos. Samuel llega contando experimentos que hizo y queriendo replicarlos en casa.", c: "var(--kk-purple)", in: "MP" },
    { n: "Sara Gómez",       r: "Mamá de Isabella, Caballeros", t: "El equipo docente es lo más valioso. Sentimos respaldo, comunicación constante y un genuino amor por los niños.", c: "var(--kk-green)" , in: "SG" },
    { n: "Felipe Ortiz",     r: "Papá de Martín, Pajes",        t: "Como papás primerizos teníamos mil miedos. Las profesoras nos dieron tranquilidad desde el primer día.", c: "var(--kk-gold)"  , in: "FO" },
    { n: "Daniela Vargas",   r: "Mamá de Tomás, Reyes",         t: "Los talleres del reino son una joya: yoga, huerta y cocina. Tomás ahora cocina con nosotros los domingos.", c: "var(--kk-red)"   , in: "DV" },
    { n: "Ricardo Naranjo",  r: "Papá de Luciana, Magos",       t: "Visitamos varios jardines antes de decidirnos. Lo que nos enamoró fue ver a los niños felices y en confianza.", c: "var(--kk-purple)", in: "RN" },
  ];
  const [i, setI] = useState(0);
  const next = () => setI((i + 1) % list.length);
  const prev = () => setI((i - 1 + list.length) % list.length);

  useEffect(() => {
    const id = setInterval(next, 6000);
    return () => clearInterval(id);
  }, [i]);

  const cur = list[i];

  return (
    <section id="testimonios" className="kk-section">
      <div className="testi-wrap">
        <span className="testi-quote" aria-hidden>"</span>
        <div className="testi-head">
          <span className="kk-eyebrow reveal">Familias del reino</span>
          <h2 className="kk-h2 reveal reveal-d1">Lo que dicen quienes nos eligen.</h2>
        </div>
        <div className="testi-card" key={cur.n}>
          <p className="testi-text">"{cur.t}"</p>
          <div className="testi-foot">
            <span className="testi-av" style={{background: cur.c}}>{cur.in}</span>
            <div>
              <strong>{cur.n}</strong>
              <small>{cur.r}</small>
            </div>
          </div>
        </div>
        <div className="testi-nav">
          <button className="t-arr" onClick={prev} aria-label="Anterior"><Icon.Arrow size={16} c="#fff"/></button>
          <div className="t-dots">
            {list.map((_, j) => (
              <button key={j} className={"t-dot " + (j === i ? "on" : "")} onClick={() => setI(j)} aria-label={"Testimonio " + (j+1)}/>
            ))}
          </div>
          <button className="t-arr fw" onClick={next} aria-label="Siguiente"><Icon.Arrow size={16} c="#fff"/></button>
        </div>
      </div>
    </section>
  );
}

/* ================================================================
   FAQ — Acordeón
   ================================================================ */
function FAQItem({ q, a, isOpen, onToggle }) {
  return (
    <div className={"faq-item " + (isOpen ? "open" : "")}>
      <button className="faq-q" onClick={onToggle}>
        <span>{q}</span>
        <span className="faq-toggle"><span/><span/></span>
      </button>
      <div className="faq-a"><p>{a}</p></div>
    </div>
  );
}

function FAQ() {
  const qs = [
    {
      q: "¿Cuál es el horario regular del jardín?",
      a: "La jornada va de 7:30am a 3:00pm de lunes a viernes, con flexibilidad por nivel. Ofrecemos jornadas extendidas hasta las 5:00pm con costo adicional.",
    },
    {
      q: "¿Desde qué edad reciben a los niños?",
      a: "Recibimos niños desde el año de edad (Caminadores). Cada nivel tiene cupos limitados para garantizar acompañamiento personalizado.",
    },
    {
      q: "¿Cómo funciona el programa bilingüe?",
      a: "El inglés se incorpora desde Caminadores a través de canciones, juegos y rutinas. A partir de Jardín, una parte significativa de la jornada se desarrolla en inglés con docentes especializadas.",
    },
    {
      q: "¿Ofrecen ruta escolar y alimentación?",
      a: "Sí. Contamos con ruta puerta a puerta en zonas seleccionadas y un plan alimentario diseñado por nutricionista, con menús rotativos balanceados.",
    },
    {
      q: "¿Qué incluye la matrícula?",
      a: "Matrícula, pensiones y materiales pedagógicos. Adicionalmente, ofrecemos planes con alimentación, ruta y talleres extracurriculares.",
    },
    {
      q: "¿Cómo es el proceso de admisión?",
      a: "1) Solicitas información, 2) agendamos una visita guiada, 3) realizamos una entrevista con la familia y un encuentro con el niño, 4) confirmamos cupo y reservas con la matrícula.",
    },
  ];
  const [open, setOpen] = useState(0);
  return (
    <section id="faq" className="kk-section">
      <div className="faq-grid">
        <div className="faq-side">
          <span className="kk-eyebrow reveal">Preguntas frecuentes</span>
          <h2 className="kk-h2 reveal reveal-d1">
            Resolvemos las dudas que <span style={{color: "var(--kk-green)", fontStyle:"italic"}}>todas las familias</span> tienen.
          </h2>
          <p className="kk-sub reveal reveal-d2">
            ¿No encuentras tu respuesta? Escríbenos por WhatsApp y un asesor te
            acompañará en cada paso.
          </p>
          <a href="#contacto" className="btn btn-primary reveal reveal-d3" style={{marginTop: 20}}>
            Hablar con un asesor
            <span className="arrow"><Icon.Arrow size={14}/></span>
          </a>
        </div>
        <div className="faq-list">
          {qs.map((it, idx) => (
            <div className="reveal" key={idx} style={{ transitionDelay: `${idx * 60}ms` }}>
              <FAQItem
                q={it.q}
                a={it.a}
                isOpen={open === idx}
                onToggle={() => setOpen(open === idx ? -1 : idx)}
              />
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ================================================================
   AMBIENT BACKGROUND BLOBS (decorative)
   ================================================================ */
function AmbientBlobs() {
  return (
    <div className="ambient" aria-hidden>
      <span className="ab b1"/>
      <span className="ab b2"/>
      <span className="ab b3"/>
      <span className="ab b4"/>
    </div>
  );
}

/* Expose */
Object.assign(window, {
  ScrollProgress, FloatingWhats, fireConfetti,
  Edades, DiaEnReino, Testimonios, FAQ, AmbientBlobs,
});