function SectionReferencias() {
  const { REFERENCIAS } = window.DATA;
  const grupos = React.useMemo(() => {
    const map = {};
    REFERENCIAS.forEach(r => { (map[r.tipo] ||= []).push(r); });
    return map;
  }, [REFERENCIAS]);

  const ORDER = ['Marco', 'Neurociencia', 'Educación emocional', 'Prácticas restaurativas', 'Política pública', 'Salud mental escolar'];
  const TONE = {
    'Marco': 'teal',
    'Neurociencia': 'lilac',
    'Educación emocional': 'coral',
    'Prácticas restaurativas': 'sage',
    'Política pública': 'amber',
    'Salud mental escolar': 'teal',
  };

  return (
    <div className="fade-up">
      <SectionHeader
        num="05 / 05"
        kicker="Referencias bibliográficas"
        title={<>Las <em className="font-display italic font-normal text-lilac-600">fuentes</em> que sostienen este dosier.</>}
        subtitle="Marcos teóricos, investigaciones empíricas y políticas públicas que fundamentan la propuesta. Formato APA, agrupado por línea de pensamiento."
      />

      {/* Quick chips */}
      <div className="mb-10 flex flex-wrap gap-2">
        {ORDER.filter(g => grupos[g]).map(g => {
          const cm = COLOR_MAP[TONE[g] || 'teal'];
          return (
            <a key={g} href={`#ref-${g.replace(/\s+/g,'-').toLowerCase()}`}
              className={`inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-[12.5px] font-medium border hairline bg-white hover:bg-paper-warm text-ink-soft transition-colors`}>
              <span className={`w-1.5 h-1.5 rounded-full ${cm.dot}`}></span>
              {g}
              <span className="text-ink-muted ml-0.5">· {grupos[g].length}</span>
            </a>
          );
        })}
      </div>

      <div className="space-y-12">
        {ORDER.filter(g => grupos[g]).map((g) => {
          const cm = COLOR_MAP[TONE[g] || 'teal'];
          return (
            <section key={g} id={`ref-${g.replace(/\s+/g,'-').toLowerCase()}`}>
              <div className="flex items-center gap-3 mb-5">
                <span className={`inline-flex w-9 h-9 rounded-lg ${cm.bg} ${cm.text} items-center justify-center`}>
                  <Icon name={grupos[g][0].icon} size={18} />
                </span>
                <h2 className="font-display text-2xl tracking-tightish text-ink">{g}</h2>
                <span className="h-px flex-1 bg-ink/10"></span>
                <span className="font-mono text-[11px] text-ink-muted">{grupos[g].length} fuentes</span>
              </div>

              <Card className="overflow-hidden">
                <ul className="divide-y hairline">
                  {grupos[g].map((r, i) => (
                    <li key={i} className="p-5 md:p-6 grid md:grid-cols-[64px_1fr_auto] gap-4 md:gap-6 items-start hover:bg-paper-warm/40 transition-colors">
                      <div className="font-mono text-[11px] text-ink-muted pt-0.5">
                        <div className="font-display text-2xl text-ink leading-none tracking-tightish">{r.anio}</div>
                        <div className="mt-1">REF {String(i+1).padStart(2,'0')}</div>
                      </div>
                      <div className="min-w-0">
                        <div className="text-[12.5px] font-medium text-ink-soft">{r.autor}</div>
                        <div className="mt-1 font-display text-lg tracking-tightish text-ink leading-snug">{r.titulo}</div>
                        <div className="mt-1.5 text-sm text-ink-muted italic">{r.fuente}</div>
                      </div>
                      <div className="flex md:flex-col items-start md:items-end gap-2">
                        {r.url && (
                          <a href={r.url} target="_blank" rel="noopener"
                            className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium text-ink-soft border hairline hover:bg-white">
                            <Icon name="ExternalLink" size={13} /> Visitar
                          </a>
                        )}
                      </div>
                    </li>
                  ))}
                </ul>
              </Card>
            </section>
          );
        })}
      </div>

      {/* Nota de cita */}
      <Card className="mt-12 p-7 bg-ink text-paper relative overflow-hidden">
        <div className="absolute top-0 right-0 w-64 h-64 rounded-full bg-lilac-500/20 -translate-y-24 translate-x-24 blur-2xl"></div>
        <div className="relative max-w-2xl">
          <div className="text-[11px] uppercase tracking-[0.18em] text-paper/60 mb-3 flex items-center gap-2">
            <Icon name="Quote" size={14} /> Nota de cita
          </div>
          <p className="font-display text-xl leading-snug text-paper/95">
            Este dosier articula los marcos CASEL (2020) y RULER (Yale Center for Emotional Intelligence) con la neuroeducación de Mora (2013) y las bases afectivas del aprendizaje de Immordino-Yang y Damasio (2007).
          </p>
          <div className="mt-4 text-sm text-paper/60">
            Cualquier reproducción debe citar la fuente original. El uso del dosier en la comunidad educativa Julio Verne es libre y sostenido.
          </div>
        </div>
      </Card>
    </div>
  );
}

window.SectionReferencias = SectionReferencias;