/* === Kids Kingdom — Theme components V2 ===
   Wave dividers + large masked deco shapes + V2 Edades layout (Grupos del Reino)
*/
const { useState } = React;

/* ----------------------------------------------------------
   WAVE DIVIDER
   Use between sections to give organic transitions.
   props: color = "paper" | "cream" | "purple" | "green" | "gold" | "ink"
          flip = bool (point down vs up)
---------------------------------------------------------- */
function WaveDivider({ color = "paper", flip = false, height = 110, twoTone = true }) {
  return (
    <div className={`wave-divider to-${color} ${flip ? "flip" : ""}`} style={{ height }} aria-hidden>
      <svg viewBox="0 0 1440 110" preserveAspectRatio="none">
        {twoTone && (
          <path className="wave-layer-1"
            d="M0 70 Q 240 30 480 60 T 960 60 T 1440 50 L1440 110 L0 110 Z"/>
        )}
        <path
          d="M0 80 Q 180 40 380 70 T 760 70 T 1140 65 T 1440 75 L1440 110 L0 110 Z"/>
      </svg>
    </div>
  );
}

/* ----------------------------------------------------------
   BIG DECORATIVE SHAPES (medieval)
   Rendered as masked SVG icons large and soft in the background.
---------------------------------------------------------- */
const BigDeco = {
  Crown: ({ color = "var(--kk-gold)" }) => (
    <svg viewBox="0 0 200 200" fill="none" stroke={color} strokeWidth="3" strokeLinejoin="round" strokeLinecap="round">
      <path d="M20 80 L50 50 L80 90 L100 30 L120 90 L150 50 L180 80 L170 150 L30 150 Z"/>
      <circle cx="50" cy="50" r="6" fill={color}/>
      <circle cx="100" cy="30" r="6" fill={color}/>
      <circle cx="150" cy="50" r="6" fill={color}/>
      <path d="M40 130 L160 130"/>
      <circle cx="70" cy="115" r="4"/>
      <circle cx="100" cy="115" r="4"/>
      <circle cx="130" cy="115" r="4"/>
    </svg>
  ),
  Sword: ({ color = "var(--kk-red)" }) => (
    <svg viewBox="0 0 80 200" fill="none" stroke={color} strokeWidth="3" strokeLinejoin="round" strokeLinecap="round">
      <path d="M40 10 L40 150"/>
      <path d="M40 10 L30 30 L50 30 Z" fill={color}/>
      <path d="M15 150 L65 150"/>
      <path d="M30 150 L40 170 L50 150"/>
      <circle cx="40" cy="185" r="8"/>
    </svg>
  ),
  Scroll: ({ color = "var(--kk-purple)" }) => (
    <svg viewBox="0 0 240 160" fill="none" stroke={color} strokeWidth="3" strokeLinejoin="round" strokeLinecap="round">
      <path d="M30 30 Q30 10 50 10 L190 10 Q210 10 210 30 L210 130 Q210 150 190 150 L50 150 Q30 150 30 130 Z"/>
      <circle cx="30" cy="30" r="10"/>
      <circle cx="210" cy="130" r="10"/>
      <path d="M60 50 L180 50 M60 75 L180 75 M60 100 L150 100 M60 125 L170 125"/>
    </svg>
  ),
  Shield: ({ color = "var(--kk-green)" }) => (
    <svg viewBox="0 0 160 180" fill="none" stroke={color} strokeWidth="3" strokeLinejoin="round" strokeLinecap="round">
      <path d="M80 10 L20 40 L20 100 Q20 145 80 170 Q140 145 140 100 L140 40 Z"/>
      <path d="M80 50 L80 130 M50 90 L110 90"/>
      <circle cx="80" cy="90" r="14"/>
    </svg>
  ),
  Tower: ({ color = "var(--kk-purple)" }) => (
    <svg viewBox="0 0 120 200" fill="none" stroke={color} strokeWidth="3" strokeLinejoin="round" strokeLinecap="round">
      <path d="M20 70 L20 30 L35 30 L35 60 L50 60 L50 20 L70 20 L70 60 L85 60 L85 30 L100 30 L100 70 L100 190 L20 190 Z"/>
      <path d="M50 130 L70 130 L70 160 L50 160 Z"/>
      <rect x="35" y="80" width="14" height="14"/>
      <rect x="71" y="80" width="14" height="14"/>
      <path d="M60 20 L60 0"/>
      <path d="M60 4 L80 10 L60 16 Z" fill={color}/>
    </svg>
  ),
  Key: ({ color = "var(--kk-gold)" }) => (
    <svg viewBox="0 0 240 80" fill="none" stroke={color} strokeWidth="3" strokeLinejoin="round" strokeLinecap="round">
      <circle cx="40" cy="40" r="24"/>
      <circle cx="40" cy="40" r="8"/>
      <path d="M64 40 L220 40"/>
      <path d="M180 40 L180 60 M200 40 L200 60 M160 40 L160 56"/>
    </svg>
  ),
  Star: ({ color = "var(--kk-gold)" }) => (
    <svg viewBox="0 0 200 200" fill="none" stroke={color} strokeWidth="3" strokeLinejoin="round" strokeLinecap="round">
      <path d="M100 10 L125 75 L195 80 L140 125 L160 195 L100 155 L40 195 L60 125 L5 80 L75 75 Z"/>
    </svg>
  ),
  Pennant: ({ color = "var(--kk-red)" }) => (
    <svg viewBox="0 0 240 120" fill="none" stroke={color} strokeWidth="3" strokeLinejoin="round" strokeLinecap="round">
      <path d="M5 20 Q60 5 120 20 T235 20"/>
      <path d="M30 24 L30 70 L52 47 Z"/>
      <path d="M85 28 L85 75 L107 52 Z"/>
      <path d="M140 30 L140 78 L162 55 Z"/>
      <path d="M195 26 L195 72 L217 49 Z"/>
    </svg>
  ),
};

function MaskedDeco({ kind, place = "right", color, soft = true, style = {} }) {
  const Cmp = BigDeco[kind];
  if (!Cmp) return null;
  return (
    <div
      className={`deco-mask ${place} ${kind.toLowerCase()} ${soft ? "deco-soft" : ""}`}
      style={style}
      aria-hidden
    >
      <Cmp color={color}/>
    </div>
  );
}

/* ----------------------------------------------------------
   GRUPOS DEL REINO — V2 EDADES (5 columnas)
---------------------------------------------------------- */
function GruposReino() {
  const grupos = [
    {
      id: "pajes",       n: "01", nombre: "Pajes",       edad: "1 – 2 años",
      tagline: "Pequeños habitantes del reino",
      desc: "Exploran el mundo con todos sus sentidos en un ambiente cálido, seguro y lleno de estímulos.",
      color: "#5FB06A",
      cta: "Conoce a los Pajes",
      ic: <GrupoIcon kind="baby"/>,
    },
    {
      id: "escuderos",   n: "02", nombre: "Escuderos",   edad: "2 – 3 años",
      tagline: "Aprendices del castillo",
      desc: "Inician vínculos, fortalecen su autonomía a través del juego y descubren la magia del lenguaje.",
      color: "#B8860B",
      cta: "Ver Escuderos",
      ic: <GrupoIcon kind="shield"/>,
    },
    {
      id: "caballeros",  n: "03", nombre: "Caballeros",  edad: "3 – 4 años",
      tagline: "Valientes exploradores",
      desc: "Crean, preguntan y desarrollan proyectos colaborativos inspirados en Reggio Emilia.",
      color: "#A83749",
      cta: "Ver Caballeros",
      ic: <GrupoIcon kind="sword"/>,
    },
    {
      id: "magos",       n: "04", nombre: "Magos",       edad: "4 – 5 años (Pre-K)",
      tagline: "Inventores y soñadores",
      desc: "Descubren quiénes son y qué les apasiona a través de proyectos STEAM y aprendizaje significativo.",
      color: "#4B4591",
      cta: "Conoce Magos",
      ic: <GrupoIcon kind="wand"/>,
    },
    {
      id: "reyes",       n: "05", nombre: "Reyes",       edad: "5 – 6 años (K)",
      tagline: "Listos para reinar",
      desc: "Consolidan habilidades académicas, sociales y emocionales para dar el siguiente gran paso.",
      color: "#7B3A8C",
      cta: "Ver Reyes",
      ic: <GrupoIcon kind="crown"/>,
    },
  ];

  return (
    <section id="edades" className="kk-section">
      <div className="edades-head">
        <div>
          <span className="kk-eyebrow reveal">Los grupos del reino</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
          temáticos pensados para acompañar el ritmo de cada niño.
        </p>
      </div>

      {/* Squiggle */}
      <svg className="grupos-squiggle reveal" width="80" height="20" viewBox="0 0 80 20" fill="none">
        <path d="M2 10 Q 12 2 22 10 T 42 10 T 62 10 T 78 10"
          stroke="currentColor" strokeWidth="3" strokeLinecap="round" fill="none"/>
      </svg>

      <div className="grupos-wrap">
        <div className="grupos-grid">
          {grupos.map((g, i) => (
            <div key={g.id} className="grupo reveal" style={{ "--c": g.color, transitionDelay: `${i * 80}ms` }}>
              <div className="grupo-illo">
                <span className="bg-blob"/>
                {g.ic}
              </div>
              <div className="grupo-name">
                {g.nombre}
                <small>Nivel {g.n}</small>
              </div>
              <div className="grupo-age">{g.edad}</div>
              <p className="grupo-desc">{g.desc}</p>
              <a href="#contacto" className="grupo-btn">
                {g.cta}
                <span className="arr"><Icon.Arrow size={11} c="#fff"/></span>
              </a>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* Per-grupo illustrative icon */
function GrupoIcon({ kind }) {
  if (kind === "baby") {
    return (
      <svg width="78" height="78" viewBox="0 0 100 100" fill="none" stroke="currentColor" strokeWidth="3.5" strokeLinejoin="round" strokeLinecap="round">
        {/* tiny crown above */}
        <path d="M28 22 L34 14 L42 22 L50 10 L58 22 L66 14 L72 22 L70 32 L30 32 Z" />
        <circle cx="34" cy="14" r="2" fill="currentColor"/>
        <circle cx="50" cy="10" r="2" fill="currentColor"/>
        <circle cx="66" cy="14" r="2" fill="currentColor"/>
        {/* face */}
        <circle cx="50" cy="60" r="22"/>
        <circle cx="42" cy="58" r="2" fill="currentColor" stroke="none"/>
        <circle cx="58" cy="58" r="2" fill="currentColor" stroke="none"/>
        <path d="M44 68 Q50 73 56 68"/>
      </svg>
    );
  }
  if (kind === "shield") {
    return (
      <svg width="78" height="78" viewBox="0 0 100 100" fill="none" stroke="currentColor" strokeWidth="3.5" strokeLinejoin="round" strokeLinecap="round">
        <path d="M50 12 L20 24 L20 56 Q20 78 50 90 Q80 78 80 56 L80 24 Z" />
        <path d="M50 30 L50 72 M32 52 L68 52"/>
        <circle cx="50" cy="52" r="6" fill="currentColor" stroke="none"/>
      </svg>
    );
  }
  if (kind === "sword") {
    return (
      <svg width="78" height="78" viewBox="0 0 100 100" fill="none" stroke="currentColor" strokeWidth="3.5" strokeLinejoin="round" strokeLinecap="round">
        <path d="M50 10 L50 66"/>
        <path d="M50 10 L42 24 L58 24 Z" fill="currentColor"/>
        <path d="M30 66 L70 66"/>
        <path d="M40 66 L40 76 M60 66 L60 76"/>
        <circle cx="50" cy="86" r="7" fill="currentColor" stroke="none"/>
      </svg>
    );
  }
  if (kind === "wand") {
    return (
      <svg width="78" height="78" viewBox="0 0 100 100" fill="none" stroke="currentColor" strokeWidth="3.5" strokeLinejoin="round" strokeLinecap="round">
        {/* wizard hat */}
        <path d="M22 78 L50 14 L78 78 Z"/>
        <path d="M16 78 L84 78"/>
        {/* stars on hat */}
        <path d="M48 48 L51 55 L58 55 L52 60 L54 67 L48 63 L42 67 L44 60 L38 55 L45 55 Z" fill="currentColor" stroke="none"/>
        <circle cx="42" cy="34" r="1.5" fill="currentColor" stroke="none"/>
        <circle cx="58" cy="40" r="1.5" fill="currentColor" stroke="none"/>
        <circle cx="50" cy="26" r="1.5" fill="currentColor" stroke="none"/>
      </svg>
    );
  }
  if (kind === "crown") {
    return (
      <svg width="78" height="78" viewBox="0 0 100 100" fill="none" stroke="currentColor" strokeWidth="3.5" strokeLinejoin="round" strokeLinecap="round">
        <path d="M14 50 L26 30 L40 56 L50 18 L60 56 L74 30 L86 50 L82 80 L18 80 Z" fill="currentColor" fillOpacity="0.15"/>
        <circle cx="26" cy="30" r="3.5" fill="currentColor" stroke="none"/>
        <circle cx="50" cy="18" r="3.5" fill="currentColor" stroke="none"/>
        <circle cx="74" cy="30" r="3.5" fill="currentColor" stroke="none"/>
        <path d="M22 68 L78 68"/>
        <circle cx="36" cy="60" r="2.5" fill="currentColor" stroke="none"/>
        <circle cx="50" cy="58" r="2.5" fill="currentColor" stroke="none"/>
        <circle cx="64" cy="60" r="2.5" fill="currentColor" stroke="none"/>
      </svg>
    );
  }
  return null;
}

Object.assign(window, { WaveDivider, MaskedDeco, GruposReino, BigDeco });