/* === Kids Kingdom — Neuropsicología.jsx ===
   Espacio Aplicado de Neuropsicología:
   6 funciones cognitivas con ilustración SVG animada por tarjeta.          */
const { useState: useStateNP } = React;

/* ============================================================
   ILUSTRACIONES ANIMADAS (una por función cognitiva)
   Cada ilustración llena un cuadro 200x160 y se anima vía CSS
   (clases .ai-*). Hover en .np-card activa estados extra.
   ============================================================ */

/* 01 · ATENCIÓN — Diana con pulso concéntrico y punto que sigue */
function IlloAtencion({ c }) {
  return (
    <svg className="np-illo ai-atencion" viewBox="0 0 200 160" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <radialGradient id="atn-g" cx="50%" cy="50%" r="50%">
          <stop offset="0%" stopColor={c} stopOpacity="0.35"/>
          <stop offset="100%" stopColor={c} stopOpacity="0"/>
        </radialGradient>
      </defs>
      <circle cx="100" cy="80" r="70" fill="url(#atn-g)"/>
      <circle className="atn-pulse p1" cx="100" cy="80" r="20" fill="none" stroke={c} strokeWidth="2"/>
      <circle className="atn-pulse p2" cx="100" cy="80" r="20" fill="none" stroke={c} strokeWidth="2"/>
      <circle className="atn-pulse p3" cx="100" cy="80" r="20" fill="none" stroke={c} strokeWidth="2"/>
      <circle cx="100" cy="80" r="22" fill="#fff" stroke={c} strokeWidth="3"/>
      <circle cx="100" cy="80" r="14" fill="none" stroke={c} strokeWidth="2"/>
      <circle className="atn-dot" cx="100" cy="80" r="6" fill={c}/>
      {/* crosshair ticks */}
      <path d="M100 38 L100 48 M100 112 L100 122 M58 80 L68 80 M132 80 L142 80"
        stroke={c} strokeWidth="2.4" strokeLinecap="round"/>
      {/* roaming butterfly dots */}
      <circle className="atn-fly f1" cx="35" cy="40" r="3" fill={c}/>
      <circle className="atn-fly f2" cx="165" cy="120" r="3" fill={c}/>
    </svg>
  );
}

/* 02 · MEMORIA — Cerebro con conexiones que se encienden */
function IlloMemoria({ c }) {
  return (
    <svg className="np-illo ai-memoria" viewBox="0 0 200 160" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <linearGradient id="mem-g" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%" stopColor={c} stopOpacity="0.25"/>
          <stop offset="100%" stopColor={c} stopOpacity="0"/>
        </linearGradient>
      </defs>
      <rect width="200" height="160" fill="url(#mem-g)"/>
      {/* cerebro estilizado */}
      <g fill="none" stroke={c} strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
        <path d="M70 50 Q50 55 50 75 Q40 80 45 95 Q40 110 60 115 Q65 130 85 125 L85 50 Q78 42 70 50 Z"
          fill="#fff" fillOpacity="0.85"/>
        <path d="M130 50 Q150 55 150 75 Q160 80 155 95 Q160 110 140 115 Q135 130 115 125 L115 50 Q122 42 130 50 Z"
          fill="#fff" fillOpacity="0.85"/>
        <path d="M85 65 Q92 68 88 78 Q94 84 88 92 Q94 100 86 110"/>
        <path d="M115 65 Q108 68 112 78 Q106 84 112 92 Q106 100 114 110"/>
        <path d="M100 40 L100 130" strokeDasharray="3 4" opacity="0.5"/>
      </g>
      {/* sparks / nodos */}
      <circle className="mem-node n1" cx="60" cy="65" r="4" fill={c}/>
      <circle className="mem-node n2" cx="75" cy="100" r="4" fill={c}/>
      <circle className="mem-node n3" cx="140" cy="65" r="4" fill={c}/>
      <circle className="mem-node n4" cx="125" cy="100" r="4" fill={c}/>
      {/* línea pensamiento */}
      <path className="mem-spark" d="M60 65 Q90 80 75 100 Q105 90 140 65 Q120 95 125 100"
        fill="none" stroke={c} strokeWidth="2" strokeDasharray="160" strokeDashoffset="160"/>
    </svg>
  );
}

/* 03 · LENGUAJE — Burbujas de diálogo con puntos animados */
function IlloLenguaje({ c }) {
  return (
    <svg className="np-illo ai-lenguaje" viewBox="0 0 200 160" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <linearGradient id="lng-g" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%" stopColor={c} stopOpacity="0.22"/>
          <stop offset="100%" stopColor={c} stopOpacity="0"/>
        </linearGradient>
      </defs>
      <rect width="200" height="160" fill="url(#lng-g)"/>
      {/* burbuja grande */}
      <g className="lng-b1">
        <path d="M30 35 H120 Q132 35 132 47 V85 Q132 97 120 97 H70 L52 115 V97 H30 Q18 97 18 85 V47 Q18 35 30 35 Z"
          fill="#fff" stroke={c} strokeWidth="3" strokeLinejoin="round"/>
        <circle className="lng-dot d1" cx="50" cy="66" r="5" fill={c}/>
        <circle className="lng-dot d2" cx="74" cy="66" r="5" fill={c}/>
        <circle className="lng-dot d3" cx="98" cy="66" r="5" fill={c}/>
      </g>
      {/* burbuja pequeña respuesta */}
      <g className="lng-b2">
        <path d="M115 70 H175 Q185 70 185 80 V105 Q185 115 175 115 H145 L132 130 V115 H115 Q105 115 105 105 V80 Q105 70 115 70 Z"
          fill={c} stroke={c} strokeWidth="3" strokeLinejoin="round" opacity="0.95"/>
        <path d="M120 90 L165 90 M120 102 L150 102" stroke="#fff" strokeWidth="3" strokeLinecap="round"/>
      </g>
    </svg>
  );
}

/* 04 · PLANIFICACIÓN — Lista con checks que aparecen en orden */
function IlloPlanificacion({ c }) {
  return (
    <svg className="np-illo ai-planificacion" viewBox="0 0 200 160" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <linearGradient id="plan-g" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor={c} stopOpacity="0.22"/>
          <stop offset="100%" stopColor={c} stopOpacity="0"/>
        </linearGradient>
      </defs>
      <rect width="200" height="160" fill="url(#plan-g)"/>
      {/* clipboard */}
      <rect x="48" y="28" width="104" height="118" rx="10" fill="#fff" stroke={c} strokeWidth="3"/>
      <rect x="80" y="20" width="40" height="18" rx="5" fill={c}/>
      <circle cx="100" cy="29" r="3" fill="#fff"/>
      {/* filas */}
      {[0,1,2].map(i => {
        const y = 60 + i * 26;
        return (
          <g key={i} className={"plan-row r" + (i+1)}>
            <rect x="62" y={y-10} width="20" height="20" rx="5" fill="none" stroke={c} strokeWidth="2.4"/>
            <path className="plan-check" d={`M67 ${y} l4 4 l8 -9`} fill="none" stroke={c} strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"/>
            <rect x="90" y={y-4} width="46" height="6" rx="3" fill={c} opacity="0.7"/>
            <rect x="90" y={y+4} width="30" height="4" rx="2" fill={c} opacity="0.35"/>
          </g>
        );
      })}
      {/* pencil */}
      <g className="plan-pencil">
        <path d="M150 50 L162 38 L170 46 L158 58 Z" fill={c}/>
        <path d="M158 58 L150 50 L130 70 L138 78 Z" fill="#fff" stroke={c} strokeWidth="2"/>
        <path d="M138 78 L132 80 L134 74 Z" fill={c}/>
      </g>
    </svg>
  );
}

/* 05 · FLEXIBILIDAD COGNITIVA — Formas que se transforman + flechas rotando */
function IlloFlexibilidad({ c }) {
  return (
    <svg className="np-illo ai-flexibilidad" viewBox="0 0 200 160" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <radialGradient id="flx-g" cx="50%" cy="50%" r="55%">
          <stop offset="0%" stopColor={c} stopOpacity="0.25"/>
          <stop offset="100%" stopColor={c} stopOpacity="0"/>
        </radialGradient>
      </defs>
      <rect width="200" height="160" fill="url(#flx-g)"/>
      {/* orbital arrows */}
      <g className="flx-orbit">
        <path d="M100 22 A 58 58 0 0 1 158 80" fill="none" stroke={c} strokeWidth="3" strokeLinecap="round"/>
        <path d="M152 70 L158 80 L168 76" fill="none" stroke={c} strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"/>
        <path d="M100 138 A 58 58 0 0 1 42 80" fill="none" stroke={c} strokeWidth="3" strokeLinecap="round"/>
        <path d="M48 90 L42 80 L32 84" fill="none" stroke={c} strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"/>
      </g>
      {/* shape morph */}
      <g className="flx-shape">
        <path className="flx-square" d="M75 55 L125 55 L125 105 L75 105 Z" fill={c}/>
        <circle className="flx-circle" cx="100" cy="80" r="25" fill="#fff" stroke={c} strokeWidth="3"/>
        <path className="flx-tri" d="M100 65 L115 95 L85 95 Z" fill={c}/>
      </g>
    </svg>
  );
}

/* 06 · CONTROL INHIBITORIO — Mano de "stop" con semáforo */
function IlloControl({ c }) {
  return (
    <svg className="np-illo ai-control" viewBox="0 0 200 160" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <linearGradient id="ctl-g" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor={c} stopOpacity="0.22"/>
          <stop offset="100%" stopColor={c} stopOpacity="0"/>
        </linearGradient>
      </defs>
      <rect width="200" height="160" fill="url(#ctl-g)"/>
      {/* halo */}
      <circle className="ctl-halo" cx="100" cy="80" r="50" fill={c} opacity="0.18"/>
      <circle className="ctl-halo h2" cx="100" cy="80" r="50" fill={c} opacity="0.12"/>
      {/* mano */}
      <g className="ctl-hand">
        <path d="M75 130 V 86 Q 75 78 83 78 Q 91 78 91 86 V 56 Q 91 48 99 48 Q 107 48 107 56 V 84
                 Q 107 60 115 60 Q 123 60 123 68 V 86
                 Q 123 72 131 72 Q 139 72 139 80 V 110
                 Q 139 135 115 138 H 95 Q 75 138 75 130 Z"
          fill="#fff" stroke={c} strokeWidth="3" strokeLinejoin="round"/>
        <circle cx="107" cy="92" r="6" fill={c} opacity="0.25"/>
      </g>
      {/* destellos / stop ticks */}
      <g className="ctl-ticks">
        <path d="M50 50 L60 60 M50 60 L60 50" stroke={c} strokeWidth="3" strokeLinecap="round"/>
        <path d="M150 110 L160 120 M150 120 L160 110" stroke={c} strokeWidth="3" strokeLinecap="round"/>
        <circle cx="160" cy="50" r="4" fill={c}/>
        <circle cx="42" cy="115" r="4" fill={c}/>
      </g>
    </svg>
  );
}

/* ---- Componente principal ---- */
function Neuropsicologia() {
  const funciones = [
    {
      key: "atencion",
      n: "01",
      titulo: "Atención",
      colorHex: "#B8860B",
      Illo: IlloAtencion,
      desc: "La atención permite concentrarse, seguir instrucciones y mantener el interés en las actividades. Su desarrollo favorece en la adultez una mejor capacidad de organización, productividad y adaptación en contextos académicos, laborales y sociales.",
      tagline: "Foco, observar, sostener",
    },
    {
      key: "memoria",
      n: "02",
      titulo: "Memoria",
      colorHex: "#A83749",
      Illo: IlloMemoria,
      desc: "La memoria facilita el aprendizaje y la adquisición de conocimientos. Fortalecerla desde la infancia contribuye a desarrollar adultos con mayor capacidad para resolver problemas, aprender nuevas habilidades y tomar decisiones de manera eficiente.",
      tagline: "Recordar, conectar, evocar",
    },
    {
      key: "lenguaje",
      n: "03",
      titulo: "Lenguaje",
      colorHex: "#5FB06A",
      Illo: IlloLenguaje,
      desc: "El lenguaje potencia la comunicación, la comprensión y la expresión emocional. Un adecuado desarrollo lingüístico favorece relaciones interpersonales saludables, seguridad al comunicarse y mejores oportunidades académicas y profesionales.",
      tagline: "Expresar, comprender, dialogar",
    },
    {
      key: "planificacion",
      n: "04",
      titulo: "Planificación",
      colorHex: "#4B4591",
      Illo: IlloPlanificacion,
      desc: "La planificación ayuda a organizar ideas, establecer metas y anticipar soluciones. En la adultez, esta habilidad se relaciona con la autonomía, la responsabilidad y la toma de decisiones conscientes.",
      tagline: "Organizar, anticipar, decidir",
    },
    {
      key: "flexibilidad",
      n: "05",
      titulo: "Flexibilidad cognitiva",
      colorHex: "#B8860B",
      Illo: IlloFlexibilidad,
      desc: "La flexibilidad cognitiva permite adaptarse a cambios, considerar diferentes perspectivas y encontrar nuevas soluciones. Su fortalecimiento favorece adultos más creativos, resilientes y capaces de enfrentar desafíos con mayor equilibrio.",
      tagline: "Adaptarse, transformar, fluir",
    },
    {
      key: "control",
      n: "06",
      titulo: "Control inhibitorio",
      colorHex: "#A83749",
      Illo: IlloControl,
      desc: "El control inhibitorio ayuda a regular impulsos, emociones y conductas. Desarrollarlo desde la infancia contribuye a una mejor autorregulación emocional, convivencia social y manejo responsable de situaciones en la vida adulta.",
      tagline: "Pausar, regular, elegir",
    },
  ];

  return (
    <section id="neuropsicologia" className="kk-section np-section">
      <div className="np-head">
        <span className="kk-eyebrow reveal">Espacio aplicado de neuropsicología</span>
        <h2 className="kk-h2 reveal reveal-d1">
          Fortalecemos las{" "}
          <span style={{color: "var(--kk-purple)", fontStyle: "italic"}}>funciones cognitivas</span>{" "}
          a través del juego.
        </h2>
        <p className="kk-sub reveal reveal-d2">
          En Kids Kingdom Castle comprendemos que cada niño aprende de manera única.
          Nuestro Espacio Aplicado de Neuropsicología promueve estrategias que
          fortalecen al niño como un ser integral, potenciando habilidades cognitivas,
          emocionales y sociales esenciales para su desarrollo presente y futuro.
        </p>

        <div className="np-quote reveal reveal-d3">
          <span className="np-quote-mark">“</span>
          <p>
            A través del juego, la exploración y experiencias significativas,
            <span className="np-quote-em"> fortalecemos habilidades fundamentales para el aprendizaje.</span>
          </p>
        </div>
      </div>

      <div className="np-grid">
        {funciones.map((f, i) => {
          const Illo = f.Illo;
          return (
            <article
              key={f.key}
              className="np-card reveal"
              style={{ "--c": f.colorHex, transitionDelay: `${i * 70}ms` }}
            >
              <div className="np-illo-wrap">
                <Illo c={f.colorHex}/>
                <span className="np-num">{f.n}</span>
              </div>

              <div className="np-body">
                <span className="np-tagline">{f.tagline}</span>
                <h3>{f.titulo}</h3>
                <p>{f.desc}</p>
                <span className="np-bar"/>
              </div>
            </article>
          );
        })}
      </div>
    </section>
  );
}

Object.assign(window, { Neuropsicologia });