// talleres.jsx — Talleres 2026 catalogue (from PROGRAMA TALLERES 2026)

const TALLERES_2026 = [
  // STEM / Ciencia
  {
    id: 'sciencecraft',
    name: 'ScienceCraft',
    cat: 'stem', catLabel: 'STEAM',
    age: '8+ años',
    schedule: 'Lun online · Mar 17:30',
    prof: 'Gerson Echeverría · Mentor STEAM',
    desc: 'Aprendizaje basado en juegos con Minecraft: astronomía, química, genética y paleontología en un laboratorio digital inmersivo.',
  },
  {
    id: 'legobot',
    name: 'LegoBot',
    cat: 'stem', catLabel: 'STEAM',
    age: '5–8 años',
    schedule: 'Mar 15:45 · Vie 16:00',
    prof: 'Gerson Echeverría · Mentor STEAM',
    desc: 'Robótica con LEGO Spike y bloques. Fundamentos de programación, motricidad fina y pensamiento lógico.',
  },
  {
    id: 'detectives',
    name: 'Detectives del Universo',
    cat: 'stem', catLabel: 'Ciencias',
    age: '6–8 años',
    schedule: 'Mié 17:00',
    prof: 'Gerson Echeverría · Mentor STEAM',
    desc: 'Cráteres lunares, erupciones volcánicas, mezclas: descubrir física, química y biología haciendo.',
  },
  {
    id: 'microaventuras',
    name: 'Microaventuras',
    cat: 'stem', catLabel: 'Ciencias',
    age: '10+ años',
    schedule: 'Vie 17:30',
    prof: 'Gerson Echeverría · Mentor STEAM',
    desc: 'Biología a escala invisible: uso del microscopio y documentación rigurosa del micromundo.',
  },
  {
    id: 'first-lego',
    name: 'First Lego League',
    cat: 'stem', catLabel: 'Robótica',
    age: '9–13 años',
    schedule: 'Jue 17:30',
    prof: 'Gerson Echeverría · Mentor STEAM',
    desc: 'Ingeniería de diseño, robótica aplicada y trabajo colaborativo simulando competencias internacionales con LEGO Spike Prime.',
  },
  {
    id: 'desafios-mat',
    name: 'Desafíos Matemáticos',
    cat: 'stem', catLabel: 'Matemáticas',
    age: '5–7 años',
    schedule: 'Mar 16:00',
    prof: 'Sofía Cerón · Profesora de matemáticas',
    desc: 'Acertijos, juegos de lógica, escape rooms matemáticos. Disfrutar del error y pensar con creatividad.',
  },
  {
    id: 'ajedrez',
    name: 'Club de Ajedrez',
    cat: 'stem', catLabel: 'Estrategia',
    age: '5–9 años',
    schedule: 'Mié 16:00 · Sáb',
    prof: 'Gonzalo Flores · Ajedrecista',
    desc: 'Reglas, tácticas y estrategia. Concentración, toma de decisiones y resolución de problemas.',
  },

  // Arte / Letras
  {
    id: 'davinci',
    name: 'Da Vinci',
    cat: 'art', catLabel: 'Dibujo',
    age: '10–14 años',
    schedule: 'Mar 17:00',
    prof: 'Alejandra Fuenzalida · Diseñadora & Artista',
    desc: 'Aprender a mirar de verdad. Observación, trazo y composición; técnicas para encontrar un estilo propio.',
  },
  {
    id: 'modelado',
    name: 'Taller de Modelado',
    cat: 'art', catLabel: 'Volumen',
    age: '7–12 años',
    schedule: 'Jue 16:00 · Vie 17:00',
    prof: 'Matías Peña · Arquitecto/Artista',
    desc: 'Arcilla polimérica: volumen, proporción y detalle. Personajes y figuras del mundo real y la fantasía.',
  },
  {
    id: 'pop-up',
    name: 'Laboratorio Pop Up',
    cat: 'letras', catLabel: 'Narrativa',
    age: '6–9 años',
    schedule: 'Vie 17:15',
    prof: 'José Tapia · Cuenta Cuentos',
    desc: 'Inventar cuentos y transformarlos en libros pop-up donde el papel se despliega y cobra vida.',
  },
  {
    id: 'literatura',
    name: 'Literatura Creativa',
    cat: 'letras', catLabel: 'Escritura',
    age: '11–14 años',
    schedule: 'Jue 17:00',
    prof: 'Macarena Figueroa · Lic. en Literatura',
    desc: 'Técnicas de escritura, referentes universales y proyectos individuales y grupales.',
  },
  {
    id: 'english',
    name: 'English Group',
    cat: 'letras', catLabel: 'Idiomas',
    age: '9–12 años',
    schedule: 'Vie 15:00',
    prof: 'Catalina Abarca · Profesora',
    desc: 'Inglés como medio para jugar, imaginar y comunicar. Canciones, cómics, proyectos y actuaciones.',
  },
  {
    id: 'piano',
    name: 'Piano & Guitarra',
    cat: 'art', catLabel: 'Música',
    age: 'Todas las edades',
    schedule: 'Lun/Mié desde 15:00',
    prof: 'Marco Vega & Carolina Fibla',
    desc: 'Clases individuales adaptadas al nivel, ritmo e intereses. Técnica, lectura musical y repertorio propio.',
  },
  {
    id: 'semillero',
    name: 'Semillero Musical',
    cat: 'art', catLabel: 'Música',
    age: '4–7 años',
    schedule: 'Mié 16:00 · Sáb 11:00',
    prof: 'Carolina Fibla · Profesora de Música',
    desc: 'Iniciación musical con cuerpo, voz, canciones y percusión. Crear instrumentos con materiales simples.',
  },

  // Cuerpo y movimiento
  {
    id: 'parkour',
    name: 'Parkour',
    cat: 'cuerpo', catLabel: 'Movimiento',
    age: '4–12 años',
    schedule: 'Mar · Vie · Sáb',
    prof: 'Bastián Chamorro · Preparador físico',
    desc: 'Movimiento creativo entre obstáculos. Coordinación, equilibrio y confianza en un entorno seguro.',
  },
  {
    id: 'capoeira',
    name: 'Capoeira',
    cat: 'cuerpo', catLabel: 'Movimiento',
    age: '6–10 años',
    schedule: 'Mié 16:00',
    prof: 'Camila Pilnik · Instructora de Capoeira',
    desc: 'Ritmo, juego y movimiento. Coordinación y expresión corporal en la roda con música y cantos.',
  },

  // Terapéuticos
  {
    id: 'proy-mini',
    name: 'Proyectos Colectivos Mini',
    cat: 'terap', catLabel: 'Terapéutico',
    age: '4–6 años',
    schedule: 'Mar 16:00 · Jue 16:00',
    prof: 'Victoria Flores · Terapeuta Ocupacional',
    desc: 'Aprender a compartir, escuchar y conectarse. Habilidades sociales y empatía a través del juego.',
  },
  {
    id: 'proy-col',
    name: 'Proyectos Colectivos',
    cat: 'terap', catLabel: 'Terapéutico',
    age: '7–10 años',
    schedule: 'Vie 17:00',
    prof: 'Victoria Flores · Terapeuta Ocupacional',
    desc: 'Apertura social y trabajo en equipo. Vínculos sanos a través de proyectos grupales y artísticos.',
  },
];

const TALLERES_BY_CAT = {
  stem: { label: 'STEAM y Ciencias', color: 'var(--c-primary)', colorInk: 'var(--c-primary-ink)' },
  art: { label: 'Arte y Música', color: 'var(--c-accent)', colorInk: 'var(--c-accent-ink)' },
  letras: { label: 'Letras y Lenguaje', color: '#8a6db0', colorInk: '#5e4880' },
  cuerpo: { label: 'Cuerpo y Movimiento', color: 'var(--c-sage-ink)', colorInk: 'var(--c-sage-ink)' },
  terap: { label: 'Talleres Terapéuticos', color: 'var(--c-mustard-ink)', colorInk: 'var(--c-mustard-ink)' },
};

const TalleresList = ({ filter = 'all' }) => {
  const [active, setActive] = React.useState(filter);
  const cats = ['all', ...Object.keys(TALLERES_BY_CAT)];
  const filtered = active === 'all' ? TALLERES_2026 : TALLERES_2026.filter(t => t.cat === active);
  return (
    <div>
      <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', justifyContent: 'flex-start', marginTop: 8 }}>
        {cats.map(c => (
          <button
            key={c}
            onClick={() => setActive(c)}
            className="btn btn-sm"
            style={{
              background: active === c ? 'var(--ink)' : 'var(--paper)',
              color: active === c ? 'var(--bg-soft)' : 'var(--ink-soft)',
              border: active === c ? '1.5px solid var(--ink)' : '1.5px solid var(--line)',
            }}
          >
            {c === 'all' ? 'Todos' : TALLERES_BY_CAT[c].label}
          </button>
        ))}
      </div>
      <div className="taller-grid">
        {filtered.map(t => (
          <div key={t.id} className={`taller-card cat-${t.cat}`}>
            <div className="taller-cat">{t.catLabel}</div>
            <h3 className="taller-name">{t.name}</h3>
            <div className="taller-meta">
              <span>{t.age}</span>
              <span>{t.schedule}</span>
            </div>
            <p className="taller-desc">{t.desc}</p>
            <div className="taller-prof"><b>{t.prof}</b></div>
          </div>
        ))}
      </div>
    </div>
  );
};

const TalleresPricing = () => (
  <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: 16, marginTop: 36 }}>
    {[
      { name: 'Enriquecimiento', bi: '$235.000', sem: '$445.000', note: '17 sesiones' },
      { name: 'Talleres Terapéuticos', bi: '$260.000', sem: '$470.000', note: '16 sesiones' },
      { name: 'Parkour / Capoeira', bi: '$130.000', sem: '$235.000', note: '1 vez por semana' },
      { name: 'Clases particulares', bi: '$275.000', sem: '$515.000', note: 'Piano o Guitarra' },
    ].map(p => (
      <div key={p.name} style={{ background: 'var(--paper)', border: '1px solid var(--line)', borderRadius: 'var(--radius-md)', padding: '20px 22px' }}>
        <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--ink-mute)', marginBottom: 8 }}>{p.note}</div>
        <div style={{ fontFamily: 'var(--font-display)', fontSize: 18, fontWeight: 600, marginBottom: 12 }}>{p.name}</div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 4, fontSize: 13.5 }}>
          <div style={{ display: 'flex', justifyContent: 'space-between' }}>
            <span style={{ color: 'var(--ink-soft)' }}>Bimensual</span>
            <b>{p.bi}</b>
          </div>
          <div style={{ display: 'flex', justifyContent: 'space-between' }}>
            <span style={{ color: 'var(--ink-soft)' }}>Semestral</span>
            <b>{p.sem}</b>
          </div>
        </div>
      </div>
    ))}
  </div>
);

Object.assign(window, { TalleresList, TalleresPricing, TALLERES_2026, TALLERES_BY_CAT });