function SectionHerramientas() {
  const { ACTIVIDADES } = window.DATA;
  const [openId, setOpenId] = React.useState(null);
  const [filter, setFilter] = React.useState('Todas');

  const tags = ['Todas', 'Autoconciencia', 'Autorregulación', 'Conciencia social', 'Habilidades de relación', 'Toma de decisiones responsables'];
  const filtered = filter === 'Todas' ? ACTIVIDADES : ACTIVIDADES.filter(a => a.casel.includes(filter));
  const active = ACTIVIDADES.find(a => a.id === openId);

  React.useEffect(() => {
    const onKey = (e) => { if (e.key === 'Escape') setOpenId(null); };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, []);

  React.useEffect(() => {
    document.body.style.overflow = openId ? 'hidden' : '';
  }, [openId]);

  return (
    <div className="fade-up">
      <SectionHeader
        num="03 / 04"
        kicker="Caja de herramientas"
        title={<>Diez prácticas listas para llevar al <em className="font-display italic font-normal text-coral-600">aula</em>.</>}
        subtitle="Cada actividad incluye objetivo, duración, procedimiento paso a paso y una rúbrica semaforizada (Inicial · En proceso · Logrado). Toca cualquier tarjeta para abrir su detalle."
      />

      {/* Filter chips */}
      <div className="mb-7 flex flex-wrap gap-2">
        {tags.map(t => (
          <button
            key={t}
            onClick={() => setFilter(t)}
            className={`px-3.5 py-1.5 rounded-full text-[12.5px] font-medium border transition-colors ${
              filter === t
                ? 'bg-ink text-paper border-ink'
                : 'bg-white text-ink-soft hairline hover:bg-paper-warm'
            }`}>
            {t}
          </button>
        ))}
      </div>

      {/* Grid */}
      <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-5">
        {filtered.map((a, idx) => {
          const c = COLOR_MAP[a.color] || COLOR_MAP.teal;
          return (
            <button
              key={a.id}
              onClick={() => setOpenId(a.id)}
              className="group text-left bg-paper-card border hairline rounded-2xl shadow-card hover:shadow-lift hover:-translate-y-0.5 transition-all p-6 relative overflow-hidden">
              <div className={`absolute -top-12 -right-12 w-36 h-36 rounded-full ${c.bg} opacity-70 group-hover:scale-110 transition-transform`}></div>
              <div className="relative">
                <div className="flex items-start justify-between">
                  <span className={`inline-flex w-12 h-12 rounded-xl ${c.bg} ${c.text} items-center justify-center ring-1 ${c.ring}`}>
                    <Icon name={a.icon} size={22} />
                  </span>
                  <span className="font-mono text-[11px] text-ink-muted">{String(idx+1).padStart(2,'0')}</span>
                </div>

                <h3 className="mt-5 font-display text-2xl tracking-tightish text-ink leading-tight">{a.nombre}</h3>
                <p className="mt-2 text-sm text-ink-muted leading-relaxed line-clamp-2">{a.resumen}</p>

                <div className="mt-4 flex flex-wrap gap-1.5">
                  <Chip><Icon name="Clock" size={11} />{a.duracion}</Chip>
                  {a.casel.slice(0,1).map(k => <Chip key={k}><span className={`w-1.5 h-1.5 rounded-full ${c.dot}`}></span>{k}</Chip>)}
                </div>

                <div className="mt-5 pt-4 border-t hairline flex items-center justify-between">
                  <span className="text-xs text-ink-muted">{a.audiencia}</span>
                  <span className="inline-flex items-center gap-1 text-xs font-medium text-ink-soft group-hover:gap-2 transition-all">
                    Abrir detalle <Icon name="ArrowUpRight" size={14} />
                  </span>
                </div>
              </div>
            </button>
          );
        })}
      </div>

      {/* Modal */}
      {active && <ActivityModal a={active} onClose={() => setOpenId(null)} />}
    </div>
  );
}

function ActivityModal({ a, onClose }) {
  const c = COLOR_MAP[a.color] || COLOR_MAP.teal;
  return (
    <div className="fixed inset-0 z-50 flex items-end md:items-center justify-center p-0 md:p-6">
      <div className="absolute inset-0 bg-ink/40 backdrop-blur-sm" onClick={onClose}></div>

      <div className="relative w-full md:max-w-3xl max-h-[92vh] overflow-hidden bg-paper rounded-t-3xl md:rounded-3xl shadow-lift border hairline scale-in flex flex-col">
        {/* Header */}
        <div className={`relative p-6 md:p-8 ${c.bg} border-b hairline`}>
          <button onClick={onClose}
            className="absolute top-4 right-4 w-9 h-9 rounded-full bg-white/80 hover:bg-white border hairline flex items-center justify-center text-ink-soft hover:text-ink transition-colors">
            <Icon name="X" size={16} />
          </button>
          <div className="flex items-start gap-4">
            <span className={`inline-flex w-14 h-14 rounded-2xl bg-white ${c.text} items-center justify-center ring-1 ${c.ring} shrink-0`}>
              <Icon name={a.icon} size={26} />
            </span>
            <div className="min-w-0">
              <div className="flex flex-wrap gap-1.5 mb-2">
                <Chip><Icon name="Clock" size={11} />{a.duracion}</Chip>
                <Chip><Icon name="Repeat" size={11} />{a.frecuencia}</Chip>
                <Chip><Icon name="Users" size={11} />{a.audiencia}</Chip>
              </div>
              <h3 className="font-display text-3xl md:text-4xl tracking-tightish text-ink leading-tight">{a.nombre}</h3>
              <p className="mt-2 text-ink-soft leading-relaxed">{a.resumen}</p>
            </div>
          </div>
        </div>

        {/* Body */}
        <div className="overflow-y-auto scroll-area p-6 md:p-8 space-y-7">
          <div>
            <div className="flex items-center gap-2 mb-2">
              <Icon name="Target" size={14} className="text-ink-muted" />
              <span className="text-[11px] uppercase tracking-[0.16em] font-medium text-ink-muted">Objetivo</span>
            </div>
            <p className="font-display text-xl tracking-tightish text-ink leading-snug">{a.objetivo}</p>
          </div>

          <div className="grid md:grid-cols-2 gap-6">
            <div>
              <div className="flex items-center gap-2 mb-3">
                <Icon name="ListChecks" size={14} className="text-ink-muted" />
                <span className="text-[11px] uppercase tracking-[0.16em] font-medium text-ink-muted">Procedimiento</span>
              </div>
              <ol className="space-y-2.5">
                {a.procedimiento.map((p, i) => (
                  <li key={i} className="flex gap-3 items-start">
                    <span className={`shrink-0 mt-0.5 w-6 h-6 rounded-full ${c.bg} ${c.text} flex items-center justify-center text-xs font-bold font-mono`}>{i+1}</span>
                    <span className="text-sm text-ink-soft leading-relaxed">{p}</span>
                  </li>
                ))}
              </ol>
            </div>

            <div>
              <div className="flex items-center gap-2 mb-3">
                <Icon name="Gauge" size={14} className="text-ink-muted" />
                <span className="text-[11px] uppercase tracking-[0.16em] font-medium text-ink-muted">Rúbrica semaforizada</span>
              </div>
              <div className="bg-white border hairline rounded-xl p-4">
                {a.rubrica.map((r, i) => (
                  <RubricRow key={i} idx={i} nivel={r.nivel} desc={r.desc} />
                ))}
              </div>
            </div>
          </div>

          <div className="grid md:grid-cols-2 gap-4">
            <div className="border hairline rounded-xl p-4 bg-white">
              <div className="text-[11px] uppercase tracking-[0.14em] font-medium text-ink-muted mb-2">Competencias CASEL</div>
              <div className="flex flex-wrap gap-1.5">
                {a.casel.map(k => <Chip key={k} tone="paper">{k}</Chip>)}
              </div>
            </div>
            <div className="border hairline rounded-xl p-4 bg-white">
              <div className="text-[11px] uppercase tracking-[0.14em] font-medium text-ink-muted mb-2">Habilidades RULER</div>
              <div className="flex flex-wrap gap-1.5">
                {a.ruler.map(k => <Chip key={k} tone="paper">{k}</Chip>)}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

window.SectionHerramientas = SectionHerramientas;