// metodo.jsx — Método Ki section (5 elements + 3 pillars)
// Original composition inspired by the Ki philosophy: Fuego at the center,
// Tierra as the root that sustains, Agua/Metal/Madera as growth dimensions.

const KI_ELEMENTS = [
  {
    id: 'tierra',
    name: 'Tierra',
    kanji: '土',
    role: 'Raíces que nos sostienen',
    qualities: ['Estabilidad', 'Pertenencia', 'Nutrición'],
    skills: ['Autogestión y autonomía personal', 'Conciencia identitaria y pertenencia'],
    color: 'var(--c-mustard-ink)',
    tint: 'var(--c-mustard)',
    desc: 'Creamos espacios donde cada niño se sienta seguro, contenido y valorado. Vínculo con la familia y comunidad presente.',
  },
  {
    id: 'agua',
    name: 'Agua',
    kanji: '水',
    role: 'La dimensión emocional',
    qualities: ['Calma', 'Sensibilidad', 'Creatividad', 'Autoconocimiento'],
    skills: ['Alfabetización emocional y empatía', 'Pensamiento flexible y adaptabilidad'],
    color: 'var(--c-primary-ink)',
    tint: 'var(--c-primary)',
    desc: 'Aprender también es sentir. Acompañamos el reconocimiento y la gestión emocional sana, empática y expresiva.',
  },
  {
    id: 'fuego',
    name: 'Fuego',
    kanji: '火',
    role: 'Creatividad y expresión',
    qualities: ['Energía Vital', 'Esencia', 'Qi'],
    skills: ['Creatividad e innovación', 'Colaboración y liderazgo empático'],
    color: 'var(--c-accent-ink)',
    tint: 'var(--c-accent)',
    desc: 'La chispa interna de cada niño. Observar, descubrir y alimentar ese fuego con presencia, curiosidad y entusiasmo.',
  },
  {
    id: 'madera',
    name: 'Madera',
    kanji: '木',
    role: 'Crecimiento constante',
    qualities: ['Crecimiento', 'Expansión', 'Voluntad', 'Motivación'],
    skills: ['Conciencia corporal y bienestar', 'Mentalidad de crecimiento'],
    color: 'var(--c-sage-ink)',
    tint: 'var(--c-sage)',
    desc: 'Una mentalidad de crecimiento donde cada proceso es único y cada paso una oportunidad para florecer.',
  },
  {
    id: 'metal',
    name: 'Metal',
    kanji: '金',
    role: 'Estructura y claridad',
    qualities: ['Estrategia', 'Planificación', 'Herramientas'],
    skills: ['Pensamiento crítico y analítico', 'Comunicación efectiva y ética'],
    color: 'var(--ink)',
    tint: 'var(--ink-mute)',
    desc: 'Rutinas, límites amorosos y herramientas pedagógicas para organizar el pensamiento, la autonomía y el hábito.',
  },
];

const KI_PILLARS = [
  {
    id: 'tierra',
    label: 'Nuestro espacio',
    element: 'Tierra',
    color: 'var(--c-mustard-ink)',
    tint: 'var(--c-mustard)',
    desc: 'Un ambiente amable no es un lujo: es una necesidad. Plantas, materiales nobles y patio para jugar.',
  },
  {
    id: 'agua',
    label: 'Dimensión socioemocional',
    element: 'Agua',
    color: 'var(--c-primary-ink)',
    tint: 'var(--c-primary)',
    desc: 'Un equipo terapéutico acompaña en paralelo: contención, regulación, habilidades sociales y trabajo con la familia.',
  },
  {
    id: 'metal',
    label: 'Dimensión académica',
    element: 'Metal',
    color: 'var(--ink)',
    tint: 'var(--ink-mute)',
    desc: 'Asignaturas basales, de formación, de enriquecimiento y salidas pedagógicas. Aprender desde la complejidad y los intereses.',
  },
];

const ElementCard = ({ el }) => (
  <div
    className="ki-el-card"
    style={{
      background: `linear-gradient(180deg, color-mix(in srgb, ${el.tint} 22%, var(--paper)) 0%, var(--paper) 70%)`,
      borderColor: `color-mix(in srgb, ${el.tint} 35%, var(--line))`,
    }}
  >
    <div className="ki-el-head">
      <div className="ki-el-kanji" style={{ color: el.color, background: `color-mix(in srgb, ${el.tint} 30%, var(--paper))` }}>
        {el.kanji}
      </div>
      <div>
        <div className="ki-el-tag" style={{ color: el.color }}>Elemento</div>
        <h3 className="ki-el-name">{el.name}</h3>
      </div>
    </div>
    <div className="ki-el-role" style={{ color: el.color }}>{el.role}</div>
    <p className="ki-el-desc">{el.desc}</p>
    <div className="ki-el-qual">
      {el.qualities.map(q => (
        <span key={q} className="ki-el-chip" style={{ borderColor: `color-mix(in srgb, ${el.tint} 50%, var(--line))`, color: el.color }}>
          {q}
        </span>
      ))}
    </div>
    {el.skills && (
      <div className="ki-el-skills" style={{ borderTopColor: `color-mix(in srgb, ${el.tint} 35%, var(--line))` }}>
        <div className="ki-el-skills-tag" style={{ color: el.color }}>Habilidades clave</div>
        <ol className="ki-el-skills-list">
          {el.skills.map((s, i) => (
            <li key={s}>
              <span className="ki-el-skills-num" style={{ color: el.color }}>{String(i + 1).padStart(2, '0')}</span>
              <span>{s}</span>
            </li>
          ))}
        </ol>
      </div>
    )}
  </div>
);

const MetodoKi = () => (
  <section style={{ background: 'var(--bg-soft)', position: 'relative', overflow: 'hidden' }}>
    <div className="container">
      <div className="section-head center">
        <div className="eyebrow"><span className="dot"></span> El Método Ki</div>
        <h2>
          Aprender en <span className="hand" style={{ color: 'var(--c-accent)', fontSize: '1.1em' }}>armonía</span><br />
          y equilibrio
        </h2>
        <p>
          Nuestro método nace de los cinco elementos. Cada uno representa una dimensión clave del desarrollo humano y se traduce en dos habilidades del siglo XXI que cultivamos en la vida cotidiana.
        </p>
      </div>

      {/* Etymology + intro card */}
      <div className="ki-etym">
        <div className="ki-etym-side">
          <div className="ki-kanji-big" aria-hidden="true">木</div>
          <div className="ki-etym-tags">
            <span>árbol</span>
            <span>raíz</span>
            <span>origen</span>
          </div>
        </div>
        <div className="ki-etym-body">
          <div className="eyebrow sage" style={{ marginBottom: 14 }}>
            <span className="dot"></span> Ki · 木
          </div>
          <h3 style={{ fontSize: 'clamp(24px, 2.4vw, 32px)', marginBottom: 12 }}>
            Energía, presencia, voluntad,<br />salud, mente, respiración.
          </h3>
          <p style={{ color: 'var(--ink-soft)', fontSize: 16, lineHeight: 1.65 }}>
            En japonés, <b>Ki</b> es el flujo de vida que conecta todo. Lo elegimos porque cada niño es un árbol único que busca crecer desde su fuerza individual: cuidamos las raíces con vínculo y pertenencia, podamos lo que no nutre, y orientamos con límites conscientes para un crecimiento firme, libre y fuerte.
          </p>
        </div>
      </div>

      {/* 5 elements */}
      <div className="ki-elements-grid">
        {KI_ELEMENTS.map((el) => (
          <ElementCard key={el.id} el={el} />
        ))}
      </div>

    </div>

    <div style={{ position: 'absolute', top: 80, right: '5%', color: 'var(--c-mustard)', opacity: 0.45, pointerEvents: 'none' }}>
      <Sun size={100} />
    </div>
    <div style={{ position: 'absolute', bottom: 120, left: '4%', color: 'var(--c-sage-ink)', opacity: 0.5, pointerEvents: 'none' }}>
      <Spiral size={70} />
    </div>
  </section>
);

const TenSkills = () => {
  const SKILLS = [
    { el: 'Tierra', color: 'var(--c-mustard-ink)', tint: 'var(--c-mustard)', items: ['Autogestión y autonomía personal', 'Conciencia identitaria y pertenencia'] },
    { el: 'Metal', color: 'var(--ink)', tint: 'var(--ink-mute)', items: ['Pensamiento crítico y analítico', 'Comunicación efectiva y ética'] },
    { el: 'Agua', color: 'var(--c-primary-ink)', tint: 'var(--c-primary)', items: ['Alfabetización emocional y empatía', 'Pensamiento flexible y adaptabilidad'] },
    { el: 'Madera', color: 'var(--c-sage-ink)', tint: 'var(--c-sage)', items: ['Conciencia corporal y bienestar', 'Mentalidad de crecimiento'] },
    { el: 'Fuego', color: 'var(--c-accent-ink)', tint: 'var(--c-accent)', items: ['Creatividad e innovación', 'Colaboración y liderazgo empático'] },
  ];
  return (
    <section style={{ background: 'var(--bg)' }}>
      <div className="container">
        <div className="section-head center">
          <div className="eyebrow navy"><span className="dot"></span> 10 habilidades del siglo XXI</div>
          <h2>Dos habilidades clave<br />por cada <span className="hand" style={{ color: 'var(--c-accent)', fontSize: '1.1em' }}>elemento</span></h2>
          <p>
            Las habilidades se trabajan de forma transversal y se aplican en la vida cotidiana de la escuela. No se evalúan con notas: se cultivan, se observan y se celebran.
          </p>
        </div>
        <div className="ki-skills-grid">
          {SKILLS.map(s => (
            <div key={s.el} className="ki-skill" style={{ borderColor: `color-mix(in srgb, ${s.tint} 35%, var(--line))` }}>
              <div className="ki-skill-head" style={{ color: s.color, borderColor: `color-mix(in srgb, ${s.tint} 35%, var(--line))` }}>
                <span className="ki-skill-dot" style={{ background: s.tint }}></span>
                {s.el}
              </div>
              <ol className="ki-skill-list">
                {s.items.map((it, i) => (
                  <li key={it}>
                    <span className="ki-skill-num" style={{ color: s.color }}>{String(i + 1).padStart(2, '0')}</span>
                    <span>{it}</span>
                  </li>
                ))}
              </ol>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { MetodoKi, TenSkills, KI_ELEMENTS, KI_PILLARS });