function SectionMarco() {
  const { CASEL, RULER, HERRAMIENTAS_RULER, DIAGNOSTICO } = window.DATA;
  const [activeR, setActiveR] = React.useState(0);

  return (
    <div className="fade-up">
      <SectionHeader
        num="02 / 04"
        kicker="Marco conceptual · Diagnóstico"
        title={<>Tres lentes para mirar la <em className="font-display italic font-normal text-teal-600">emoción</em> en el aula.</>}
        subtitle="El dosier se sostiene en CASEL (competencias), RULER (gestión emocional) y bases de neurociencia educativa que conectan emoción y aprendizaje."
      />

      {/* CASEL */}
      <div className="mb-14">
        <div className="flex items-end justify-between mb-5">
          <div>
            <h2 className="font-display text-3xl tracking-tightish flex items-center gap-3">
              <span className="inline-flex w-9 h-9 rounded-lg bg-teal-100 text-teal-700 items-center justify-center"><Icon name="Layers" size={18} /></span>
              CASEL · Cinco competencias
            </h2>
            <p className="text-ink-muted mt-2 max-w-xl">Collaborative for Academic, Social, and Emotional Learning.</p>
          </div>
          <Chip>5 competencias · marco internacional</Chip>
        </div>

        <div className="grid sm:grid-cols-2 lg:grid-cols-5 gap-4">
          {CASEL.map((c, i) => {
            const tones = ['teal','lilac','amber','sage','coral'];
            const tone = tones[i % tones.length];
            const cm = COLOR_MAP[tone];
            return (
              <Card key={c.id} className="p-5 hover:shadow-lift transition-shadow group flex flex-col">
                <div className="flex items-center justify-between mb-3">
                  <span className={`inline-flex w-10 h-10 rounded-lg ${cm.bg} ${cm.text} items-center justify-center`}>
                    <Icon name={c.icon} size={18} />
                  </span>
                  <span className="font-mono text-[11px] text-ink-muted">0{i+1}</span>
                </div>
                <div className="font-display text-xl tracking-tightish leading-tight text-ink">{c.titulo}</div>
                <p className="mt-2 text-sm text-ink-muted leading-relaxed">{c.desc}</p>
                {c.aplicaciones && (
                  <div className="mt-4 pt-4 border-t hairline">
                    <div className="text-[10px] uppercase tracking-[0.16em] font-semibold text-ink-muted mb-2">Aplicaciones</div>
                    <ul className="space-y-1.5">
                      {c.aplicaciones.map((a, j) => (
                        <li key={j} className="flex items-start gap-2 text-[12.5px] text-ink-soft leading-snug">
                          <span className={`mt-1.5 w-1 h-1 rounded-full ${cm.dot} shrink-0`}></span>
                          <span>{a}</span>
                        </li>
                      ))}
                    </ul>
                  </div>
                )}
              </Card>
            );
          })}
        </div>
      </div>

      {/* RULER */}
      <div className="mb-14">
        <div className="flex items-end justify-between mb-5">
          <div>
            <h2 className="font-display text-3xl tracking-tightish flex items-center gap-3">
              <span className="inline-flex w-9 h-9 rounded-lg bg-coral-100 text-coral-600 items-center justify-center"><Icon name="HeartPulse" size={18} /></span>
              RULER · Gestión emocional
            </h2>
            <p className="text-ink-muted mt-2 max-w-xl">Cinco habilidades secuenciales para trabajar la inteligencia emocional.</p>
          </div>
          <Chip>Yale Center for Emotional Intelligence</Chip>
        </div>

        <Card className="overflow-hidden">
          <div className="grid lg:grid-cols-5">
            {RULER.map((r, i) => {
              const isActive = activeR === i;
              return (
                <button
                  key={i}
                  onClick={() => setActiveR(i)}
                  className={`p-6 text-left border-b lg:border-b-0 lg:border-r hairline last:border-r-0 transition-colors ${isActive ? 'bg-coral-50' : 'hover:bg-paper-warm'}`}>
                  <div className={`font-display text-6xl leading-none tracking-tighter2 ${isActive ? 'text-coral-600' : 'text-ink/25'}`}>{r.letra}</div>
                  <div className="mt-3 text-[11px] uppercase tracking-[0.16em] font-medium text-ink-muted">{r.clave}</div>
                  <div className="mt-1 font-display text-xl tracking-tightish text-ink">{r.esp}</div>
                  <div className={`mt-3 text-sm leading-relaxed ${isActive ? 'text-ink-soft' : 'text-ink-muted'}`}>{r.desc}</div>
                </button>
              );
            })}
          </div>
          <div className="border-t hairline p-5 bg-paper">
            <div className="flex items-center gap-2 text-[11px] uppercase tracking-[0.16em] text-ink-muted font-medium mb-4">
              <Icon name="ToolCase" size={14} /> Las cuatro herramientas RULER
            </div>
            <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-4">
              {HERRAMIENTAS_RULER.map((h, i) => (
                <div key={i} className="border hairline rounded-xl bg-white overflow-hidden flex flex-col">
                  <div className="aspect-[4/3] bg-paper-warm overflow-hidden border-b hairline">
                    <img src={h.img} alt={h.nombre} className="w-full h-full object-cover" loading="lazy" />
                  </div>
                  <div className="p-3.5 flex items-start gap-3">
                    <span className="inline-flex w-8 h-8 rounded-lg bg-coral-50 text-coral-700 items-center justify-center shrink-0">
                      <Icon name={h.icon} size={14} />
                    </span>
                    <div className="min-w-0">
                      <div className="font-medium text-ink text-sm">{h.nombre}</div>
                      <div className="text-xs text-ink-muted mt-0.5 leading-relaxed">{h.desc}</div>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </Card>
      </div>

      {/* Neurociencia */}
      <div className="mb-14">
        <h2 className="font-display text-3xl tracking-tightish mb-5 flex items-center gap-3">
          <span className="inline-flex w-9 h-9 rounded-lg bg-lilac-100 text-lilac-600 items-center justify-center"><Icon name="Brain" size={18} /></span>
          Neurociencia · Emoción y aprendizaje
        </h2>
        <div className="grid md:grid-cols-2 gap-5">
          <Card className="p-7 relative overflow-hidden">
            <div className="absolute inset-y-0 left-0 w-1 bg-sage-500"></div>
            <div className="flex items-center gap-2 mb-4 pl-2">
              <Icon name="Smile" className="text-sage-600" size={18} />
              <span className="text-[11px] uppercase tracking-[0.18em] font-medium text-sage-600">Emociones positivas</span>
            </div>
            <div className="pl-2 space-y-4">
              <Row k="Neurotransmisor" v="Dopamina · serotonina" cls="text-sage-600" />
              <Row k="Estructura clave" v="Hipocampo · corteza prefrontal" cls="text-sage-600" />
              <Row k="Efecto en el aula" v="Motivación, atención sostenida y consolidación de memoria a largo plazo." cls="text-sage-600" />
            </div>
            <div className="mt-6 pl-2 flex items-center gap-2">
              <span className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-sage-100 text-sage-600 text-xs font-medium">
                <Icon name="TrendingUp" size={12} /> Aprendizaje significativo
              </span>
            </div>
          </Card>

          <Card className="p-7 relative overflow-hidden">
            <div className="absolute inset-y-0 left-0 w-1 bg-coral-500"></div>
            <div className="flex items-center gap-2 mb-4 pl-2">
              <Icon name="CloudRainWind" className="text-coral-600" size={18} />
              <span className="text-[11px] uppercase tracking-[0.18em] font-medium text-coral-700">Estrés sostenido</span>
            </div>
            <div className="pl-2 space-y-4">
              <Row k="Neurotransmisor" v="Cortisol · adrenalina" cls="text-coral-600" />
              <Row k="Estructura clave" v="Amígdala · sistema límbico" cls="text-coral-600" />
              <Row k="Efecto en el aula" v="Bloqueo creativo, reactividad, dificultad para retener y resolver problemas." cls="text-coral-600" />
            </div>
            <div className="mt-6 pl-2 flex items-center gap-2">
              <span className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-coral-100 text-coral-700 text-xs font-medium">
                <Icon name="TrendingDown" size={12} /> Aprendizaje fragmentado
              </span>
            </div>
          </Card>
        </div>
      </div>

      {/* Diagnóstico */}
      <div>
        <h2 className="font-display text-3xl tracking-tightish mb-5 flex items-center gap-3">
          <span className="inline-flex w-9 h-9 rounded-lg bg-amber-100 text-amber-600 items-center justify-center"><Icon name="SearchCheck" size={18} /></span>
          Diagnóstico inicial
        </h2>
        <div className="grid lg:grid-cols-3 gap-5">
          {DIAGNOSTICO.map((d, i) => (
            <Card key={i} className={`p-6 ${d.img ? 'lg:col-span-3' : ''}`}>
              {d.img ? (
                <div className="grid md:grid-cols-2 gap-6 items-center">
                  <div>
                    <div className="flex items-center gap-3 mb-3">
                      <span className="inline-flex w-10 h-10 rounded-lg bg-amber-50 text-amber-600 items-center justify-center">
                        <Icon name={d.icon} size={18} />
                      </span>
                      <div className="font-display text-2xl tracking-tightish text-ink">{d.nombre}</div>
                    </div>
                    <p className="text-ink-soft leading-relaxed">{d.desc}</p>
                    <div className="mt-4">
                      <div className="text-[10px] uppercase tracking-[0.16em] font-semibold text-ink-muted mb-2">Momentos escolares mapeados</div>
                      <div className="flex flex-wrap gap-1.5">
                        {d.dim.map((dim, j) => <Chip key={j} tone="paper">{dim}</Chip>)}
                      </div>
                    </div>
                  </div>
                  <div className="rounded-xl overflow-hidden border hairline bg-paper-warm">
                    <img src={d.img} alt={d.nombre} className="w-full h-full object-cover" loading="lazy" />
                  </div>
                </div>
              ) : (
                <>
                  <div className="flex items-center gap-3 mb-3">
                    <span className="inline-flex w-10 h-10 rounded-lg bg-amber-50 text-amber-600 items-center justify-center">
                      <Icon name={d.icon} size={18} />
                    </span>
                    <div className="font-display text-xl tracking-tightish text-ink">{d.nombre}</div>
                  </div>
                  <p className="text-sm text-ink-soft leading-relaxed">{d.desc}</p>
                  <div className="mt-4 flex flex-wrap gap-1.5">
                    {d.dim.map((dim, j) => <Chip key={j} tone="paper">{dim}</Chip>)}
                  </div>
                </>
              )}
            </Card>
          ))}
        </div>
      </div>
    </div>
  );
}

function Row({ k, v, cls }) {
  return (
    <div>
      <div className="text-[11px] uppercase tracking-[0.14em] text-ink-muted font-medium">{k}</div>
      <div className={`mt-1 font-display text-lg tracking-tightish leading-snug ${cls || 'text-ink'}`}>{v}</div>
    </div>
  );
}

window.SectionMarco = SectionMarco;