// src/pages-colegios.jsx — Colegios miembros: viz + listado oficial

const ColegiosPage = ({ setPage }) => {
  const { t, lang } = useLang();
  const [region, setRegion] = React.useState('Todas');
  const [search, setSearch] = React.useState('');

  // Etiquetas de tipo de administración (los datos quedan en español)
  const typeLabel = (ty) => lang === 'en'
    ? ({ 'Privado': 'Private', 'Público': 'Public', 'Mixto': 'Mixed', 'Privados': 'Private', 'Públicos': 'Public', 'Mixtos (sin pensión)': 'Mixed (tuition-free)' }[ty] || ty)
    : ty;

  /* ─── Data ──────────────────────────────────────────── */
  // Fuente: Sheet "BBDD LPDE — Colegios" (solo Estado=Activo). 103 colegios, 11 regiones.
  const regions = [
    { name: 'Lima', count: 78, x: 28, y: 56 },
    { name: 'Junín', count: 8, x: 42, y: 56 },
    { name: 'Piura', count: 5, x: 20, y: 22 },
    { name: 'Ayacucho', count: 3, x: 44, y: 72 },
    { name: 'Cusco', count: 2, x: 56, y: 68 },
    { name: 'Puno', count: 2, x: 62, y: 76 },
    { name: 'Arequipa', count: 1, x: 50, y: 82 },
    { name: 'Áncash', count: 1, x: 30, y: 42 },
    { name: 'Apurímac', count: 1, x: 50, y: 74 },
    { name: 'Ica', count: 1, x: 32, y: 70 },
    { name: 'Lambayeque', count: 1, x: 24, y: 30 },
  ];

  // Composición por administración (Privado / Público / Mixto)
  const byType = [
    { type: 'Privados', count: 58, pct: 56 },
    { type: 'Públicos', count: 44, pct: 43 },
    { type: 'Mixtos (sin pensión)', count: 1, pct: 1 },
  ];

  // Listado completo de los 103 colegios activos. Fuente: BBDD LPDE.
  // Solo se publican nombres institucionales; no incluye responsables ni datos de contacto.
  const schools = [
    { n: '0142 Martír Daniel Alcides Carrión', city: 'San Juan de Lurigancho', region: 'Lima', type: 'Mixto' },
    { n: 'Asociación Educativa Divino Maestro de Pro', city: 'Los Olivos', region: 'Lima', type: 'Privado' },
    { n: 'AvantGard College Sede Lima Sur', city: 'Villa El Salvador', region: 'Lima', type: 'Privado' },
    { n: 'Colegio Alpamayo', city: 'Ate', region: 'Lima', type: 'Privado' },
    { n: 'Colegio América de La Victoria', city: 'La Victoria', region: 'Lima', type: 'Privado' },
    { n: 'Colegio André Malraux', city: 'Surco', region: 'Lima', type: 'Privado' },
    { n: 'Colegio Champagnat', city: 'Surco', region: 'Lima', type: 'Privado' },
    { n: 'Colegio Cristo Rey - Pueblo Libre', city: 'Pueblo Libre', region: 'Lima', type: 'Privado' },
    { n: 'Colegio Jean Piaget de Carabayllo', city: 'Carabayllo', region: 'Lima', type: 'Privado' },
    { n: 'Colegio Jorge Polar', city: 'Pueblo Libre', region: 'Lima', type: 'Privado' },
    { n: 'Colegio Juan Enrique Newman', city: 'La Molina', region: 'Lima', type: 'Privado' },
    { n: 'Colegio La Salle de Lima', city: 'Breña', region: 'Lima', type: 'Privado' },
    { n: 'Colegio Los Rosales', city: 'San Miguel', region: 'Lima', type: 'Privado' },
    { n: 'Colegio María Alvarado Lima High School', city: 'Cercado de Lima', region: 'Lima', type: 'Privado' },
    { n: 'Colegio María Auxiliadora', city: 'Breña', region: 'Lima', type: 'Privado' },
    { n: 'Colegio Nuestra Señora del Consuelo', city: 'Santiago de Surco', region: 'Lima', type: 'Privado' },
    { n: 'Colegio Pamer Barranco', city: 'Barranco', region: 'Lima', type: 'Privado' },
    { n: 'Colegio Pamer Patriotas', city: 'San Miguel', region: 'Lima', type: 'Privado' },
    { n: 'Colegio Pamer San Martín', city: 'San Martín de Porres', region: 'Lima', type: 'Privado' },
    { n: 'Colegio Pamer Virtual', city: 'Lima', region: 'Lima', type: 'Privado' },
    { n: 'Colegio Parroquial Reina de la Paz', city: 'San Isidro', region: 'Lima', type: 'Privado' },
    { n: 'Colegio Parroquial San Vicente de Paúl', city: 'Surquillo', region: 'Lima', type: 'Privado' },
    { n: 'Colegio Particular San Juan Macías', city: 'Santa Anita', region: 'Lima', type: 'Privado' },
    { n: 'Colegio Peruano Norteamericano Abraham Lincoln', city: 'La Molina', region: 'Lima', type: 'Privado' },
    { n: 'Colegio Salcantay', city: 'Surco', region: 'Lima', type: 'Privado' },
    { n: 'Colegio San Agustin de Lima', city: 'San Isidro', region: 'Lima', type: 'Privado' },
    { n: 'Colegio San Clemente', city: 'Jesús María', region: 'Lima', type: 'Privado' },
    { n: 'Colegio San Pedro', city: 'La Molina', region: 'Lima', type: 'Privado' },
    { n: 'Colegio Santa Isabel de Hungría', city: 'Cercado de Lima', region: 'Lima', type: 'Privado' },
    { n: 'Colegio Santa Rosa de Chosica', city: 'Lurigancho Chosica', region: 'Lima', type: 'Privado' },
    { n: 'Colegio Trener', city: 'Surco', region: 'Lima', type: 'Privado' },
    { n: 'Colegio Trilce La Molina', city: 'La Molina', region: 'Lima', type: 'Privado' },
    { n: 'Colegio Trilce Salamanca', city: 'Ate', region: 'Lima', type: 'Privado' },
    { n: 'Colegio Villa Caritas', city: 'La Molina', region: 'Lima', type: 'Privado' },
    { n: 'Colegio Áleph', city: 'Chorrillos', region: 'Lima', type: 'Privado' },
    { n: 'Escuela Bicentenario N.º 109 Inca Manco Cápac', city: 'San Juan de Lurigancho', region: 'Lima', type: 'Público' },
    { n: 'I.E 0132 “Toribio de Luzuriaga y Mejía”', city: 'San Juan de Lurigancho', region: 'Lima', type: 'Público' },
    { n: 'I.E. 0086 José María Arguedas', city: 'San Juan de Lurigancho', region: 'Lima', type: 'Público' },
    { n: 'I.E. 126 Javier Pérez de Cuéllar', city: 'San Juan de Lurigancho', region: 'Lima', type: 'Público' },
    { n: 'I.E. 7076 Las Brisas de Villa', city: 'Santiago de Surco', region: 'Lima', type: 'Público' },
    { n: 'I.E. B. Nº 0139 Gran Amauta Mariátegui', city: 'San Juan de Lurigancho', region: 'Lima', type: 'Público' },
    { n: 'I.E. Fe y Alegría 37', city: 'San Juan de Lurigancho', region: 'Lima', type: 'Público' },
    { n: 'I.E. Fe y Alegría 5 – Calasanz', city: 'San Juan de Lurigancho', region: 'Lima', type: 'Público' },
    { n: 'I.E. Federico Villarreal', city: 'Miraflores', region: 'Lima', type: 'Público' },
    { n: 'I.E. La Divina Providencia', city: 'Surquillo', region: 'Lima', type: 'Público' },
    { n: 'I.E. N.° 110 San Marcos', city: 'San Juan de Lurigancho', region: 'Lima', type: 'Público' },
    { n: 'I.E. N.° 1179 Tomás Alva Edison', city: 'San Juan de Lurigancho', region: 'Lima', type: 'Público' },
    { n: 'I.E. N.° 6085 Brígida Silva de Ochoa', city: 'Surco', region: 'Lima', type: 'Público' },
    { n: 'I.E. N.º 0147 Luis Alberto García Rojas', city: 'San Juan de Lurigancho', region: 'Lima', type: 'Público' },
    { n: 'I.E. N.º 100 Santa Elizabeth', city: 'San Juan de Lurigancho', region: 'Lima', type: 'Público' },
    { n: 'I.E. N.º 1181 “Albert Einstein”', city: 'San Juan de Lurigancho', region: 'Lima', type: 'Público' },
    { n: 'I.E. N.º 125 Ricardo Palma SJL', city: 'San Juan de Lurigancho', region: 'Lima', type: 'Público' },
    { n: 'I.E. N.º 145 Independencia Americana', city: 'San Juan de Lurigancho', region: 'Lima', type: 'Público' },
    { n: 'I.E. N.º 156 El Porvenir', city: 'San Juan de Lurigancho', region: 'Lima', type: 'Público' },
    { n: 'I.E. N.º 159 Glorioso 10 de Octubre', city: 'San Juan de Lurigancho', region: 'Lima', type: 'Público' },
    { n: 'I.E. Nicolas de Pierola', city: 'El Agustino', region: 'Lima', type: 'Público' },
    { n: 'I.E. N° 1235 Unión Latinoamericana', city: 'La Molina', region: 'Lima', type: 'Público' },
    { n: 'I.E. N° 166 “Karol Wojtyla”', city: 'San Juan de Lurigancho', region: 'Lima', type: 'Público' },
    { n: 'I.E. Ricardo Palma de Ate', city: 'Ate', region: 'Lima', type: 'Público' },
    { n: 'I.E. Túpac Amaru - VMT', city: 'Villa María del Triunfo', region: 'Lima', type: 'Público' },
    { n: 'I.E. YMCA Colegios – Pueblo Libre', city: 'Pueblo Libre', region: 'Lima', type: 'Privado' },
    { n: 'I.E.E. Antenor Orrego Espinoza', city: 'San Juan de Lurigancho', region: 'Lima', type: 'Público' },
    { n: 'I.E.E. Juana Alarco de Dammert', city: 'Miraflores', region: 'Lima', type: 'Público' },
    { n: 'I.E.E. Ricardo Bentín', city: 'Rímac', region: 'Lima', type: 'Público' },
    { n: 'I.E.P San Martín de Porres', city: 'Santa Anita', region: 'Lima', type: 'Privado' },
    { n: 'I.E.P. Augusto Salazar Bondy', city: 'La Molina', region: 'Lima', type: 'Privado' },
    { n: 'I.E.P. Mater Purissima', city: 'Miraflores', region: 'Lima', type: 'Privado' },
    { n: 'I.E.P. Nuestra Señora del Carmen de Palao', city: 'San Martín de Porres', region: 'Lima', type: 'Privado' },
    { n: 'I:E. Nicolás Copérnico - SJL', city: 'San Juan de Lurigancho', region: 'Lima', type: 'Público' },
    { n: 'IE 107 Daniel A. Carrión García', city: 'Santa Anita', region: 'Lima', type: 'Público' },
    { n: 'IE 1209 Colegio Bicentenario Mariscal Toribio de Luzuriaga', city: 'Ate', region: 'Lima', type: 'Público' },
    { n: 'IE Nº 7089 ROMEO LUNA VICTORIA', city: 'San Borja', region: 'Lima', type: 'Público' },
    { n: 'Institución Educativa N°1224 – El Paraíso', city: 'San Juan de Lurigancho', region: 'Lima', type: 'Público' },
    { n: 'Institución Educativa Privada de la Cruz', city: 'Pueblo Libre', region: 'Lima', type: 'Privado' },
    { n: 'Markham College', city: 'Miraflores', region: 'Lima', type: 'Privado' },
    { n: 'Señor de la Ascensión College', city: 'Pachacamac', region: 'Lima', type: 'Privado' },
    { n: 'St. George\'s College', city: 'Chorrillos', region: 'Lima', type: 'Privado' },
    { n: 'Villa Gratia Dei College', city: 'Villa', region: 'Lima', type: 'Privado' },
    { n: 'I.E. Santa Rosa de Abancay', city: 'Abancay', region: 'Apurímac', type: 'Público' },
    { n: 'Colegio Anglo Americano Prescott', city: 'Arequipa', region: 'Arequipa', type: 'Privado' },
    { n: 'Colegio de Alto Rendimiento de Ayacucho', city: 'Ayacucho', region: 'Ayacucho', type: 'Público' },
    { n: 'I.E. Daniel Goleman', city: 'Ayacucho', region: 'Ayacucho', type: 'Privado' },
    { n: 'I.E. N.° 38006 “9 de Diciembre”', city: 'Ayacucho', region: 'Ayacucho', type: 'Público' },
    { n: 'COAR Cusco', city: 'Cusco', region: 'Cusco', type: 'Público' },
    { n: 'Colegio Emblemático del Perú “Mateo Pumacahua”', city: 'Sicuani', region: 'Cusco', type: 'Público' },
    { n: 'San Francisco College', city: 'Ica', region: 'Ica', type: 'Privado' },
    { n: 'COAR Junín', city: 'Junín', region: 'Junín', type: 'Público' },
    { n: 'Colegio Particular Andino', city: 'Huancayo', region: 'Junín', type: 'Privado' },
    { n: 'Colegio Zárate', city: 'Huancayo', region: 'Junín', type: 'Privado' },
    { n: 'I.E Mariscal Castilla - Huancayo', city: 'Huancayo', region: 'Junín', type: 'Público' },
    { n: 'I.E. Heroínas Toledo - Concepción', city: 'Concepción', region: 'Junín', type: 'Público' },
    { n: 'I.E. Nuestra Señora del Rosario', city: 'Huancayo', region: 'Junín', type: 'Público' },
    { n: 'I.E.P. San Antonio María Claret', city: 'Huancayo', region: 'Junín', type: 'Privado' },
    { n: 'IE “MARÍA INMACULADA”', city: 'Huancayo', region: 'Junín', type: 'Público' },
    { n: 'Colegio Jorge Basadre - Chiclayo', city: 'Chiclayo', region: 'Lambayeque', type: 'Privado' },
    { n: 'Colegio Punta Arenas', city: 'Talara', region: 'Piura', type: 'Privado' },
    { n: 'Colegio Salesiano Don Bosco de Piura', city: 'Piura', region: 'Piura', type: 'Privado' },
    { n: 'I.E. Ignacio Escudero', city: 'Sullana', region: 'Piura', type: 'Público' },
    { n: 'I.E.P. Virgen de Fátima - Talara', city: 'Talara', region: 'Piura', type: 'Privado' },
    { n: 'Institución Educativa Particular Exitu\'s', city: 'Miraflores', region: 'Piura', type: 'Privado' },
    { n: 'Colegio Parroquial Santa Catalina', city: 'Juliaca', region: 'Puno', type: 'Privado' },
    { n: 'I.E.P. Elena de Santa María', city: 'Juliaca', region: 'Puno', type: 'Privado' },
    { n: 'El Pinar College', city: 'Independencia', region: 'Áncash', type: 'Privado' },
  ];

  const filtered = schools.filter(s =>
    (region === 'Todas' || s.region === region) &&
    (search === '' || s.n.toLowerCase().includes(search.toLowerCase()) || s.city.toLowerCase().includes(search.toLowerCase()))
  );

  const maxBar = Math.max(...regions.map(r => r.count));

  return (
    <Page screen="08 Colegios miembros">
      {/* Hero */}
      <section style={{ paddingTop: 80, paddingBottom: 56, borderBottom: '1px solid var(--line)' }}>
        <div className="shell">
          <div style={{ display: 'grid', gridTemplateColumns: '1.5fr 1fr', gap: 64, alignItems: 'end' }}>
            <div className="reveal">
              <button onClick={() => setPage('presentacion')} className="kicker" style={{ background: 'none', border: 'none', padding: 0, color: 'var(--mute)', cursor: 'pointer', marginBottom: 16, display: 'inline-flex', gap: 8, alignItems: 'center' }}>
                ← {t('Volver a Presentación', 'Back to About')}
              </button>
              <span className="eyebrow">{t('Red institucional', 'Institutional network')}</span>
              <h1 className="display" style={{ fontSize: 'clamp(56px, 8vw, 120px)', marginTop: 16, maxWidth: '14ch' }}>
                {t(<>Cien colegios.<br/>Un solo <em className="it">campo de juego</em></>, <>One hundred schools.<br/>One shared <em className="it">playing field</em></>)}
              </h1>
            </div>
            <p className="reveal d1" style={{ fontSize: 17, color: 'var(--ink-2)', lineHeight: 1.6 }}>
              {t('La LPDE conecta a 103 colegios miembros distribuidos en 11 regiones del Perú —de Piura a Puno, pasando por la sierra centro y los Andes del sur. Esta es la radiografía de la red: dónde está, cómo creció y a quién acoge.', 'The LPDE connects 103 member schools across 11 regions of Peru — from Piura to Puno, through the central highlands and the southern Andes. This is a portrait of the network: where it is, how it has grown and who it serves.')}
            </p>
          </div>
        </div>
      </section>

      {/* Big stats banner */}
      <section style={{ background: 'var(--ink)', color: '#fff', padding: '64px 0' }}>
        <div className="shell">
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 32 }}>
            {[
              { num: 103, label: t('Colegios miembros', 'Member schools'), sub: t('Activos a mayo 2026', 'Active as of May 2026') },
              { num: 11, label: t('Regiones del Perú', 'Regions of Peru'), sub: t('De Piura a Puno', 'From Piura to Puno') },
              { num: 44, label: t('Ciudades y distritos', 'Cities and districts'), sub: t('Lima Metropolitana + provincia', 'Metropolitan Lima + the provinces') },
              { num: 44, label: t('Colegios públicos', 'Public schools'), sub: t('Casi la mitad de la red', 'Nearly half the network') },
            ].map((s, i) => (
              <div key={i} className={`reveal d${i+1}`} style={{ borderLeft: '2px solid var(--red)', paddingLeft: 20 }}>
                <div style={{ fontFamily: 'var(--serif)', fontSize: 'clamp(48px, 5vw, 72px)', lineHeight: 1, color: '#fff' }}>
                  {s.decimal ? s.num : <CountUp to={s.num} />}{s.suffix || ''}
                </div>
                <div className="kicker" style={{ color: '#fff', marginTop: 12 }}>{s.label}</div>
                <div style={{ fontSize: 12, color: '#9C9AA0', marginTop: 4 }}>{s.sub}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Map + regional bars */}
      <section className="section bg-pale">
        <div className="shell">
          <div className="reveal" style={{ marginBottom: 48 }}>
            <span className="eyebrow">{t('Distribución geográfica', 'Geographic distribution')}</span>
            <h2 className="display" style={{ fontSize: 'clamp(36px, 4.5vw, 56px)', marginTop: 16, maxWidth: '18ch' }}>
              {t(<>Lima sigue siendo el <em className="it">epicentro</em>. El resto del país crece más rápido.</>, <>Lima is still the <em className="it">epicenter</em>. The rest of the country is growing faster.</>)}
            </h2>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.1fr', gap: 56, alignItems: 'stretch' }}>
            {/* Map */}
            <div className="reveal d1" style={{ background: 'var(--bg)', border: '1px solid var(--line)', padding: 28, position: 'relative' }}>
              <div className="kicker" style={{ marginBottom: 16 }}>{t('Mapa de presencia · 2026', 'Presence map · 2026')}</div>
              <div style={{ position: 'relative', aspectRatio: '3/4', maxWidth: 420, margin: '0 auto' }}>
                {/* Stylized Peru silhouette */}
                <svg viewBox="0 0 100 130" style={{ width: '100%', height: '100%', display: 'block' }}>
                  <path
                    d="M22,18 L26,14 L34,16 L40,22 L46,18 L54,22 L58,28 L62,32 L62,42 L58,46 L60,52 L56,58 L54,64 L58,68 L62,72 L66,78 L68,84 L64,92 L60,98 L54,104 L48,108 L42,114 L36,118 L30,116 L26,110 L22,102 L20,94 L24,86 L26,78 L22,72 L20,64 L24,56 L22,48 L18,42 L14,34 L18,26 Z"
                    fill="var(--bg-alt)"
                    stroke="var(--line-strong)"
                    strokeWidth="0.4"
                  />
                  {regions.map((r, i) => {
                    const radius = 2 + Math.sqrt(r.count) * 1.6;
                    return (
                      <g key={i}>
                        <circle cx={r.x} cy={r.y} r={radius + 3} fill="var(--red)" opacity="0.15"/>
                        <circle cx={r.x} cy={r.y} r={radius} fill="var(--red)" opacity="0.85"/>
                        <text
                          x={r.x + radius + 2}
                          y={r.y + 1.5}
                          fontFamily="var(--mono)"
                          fontSize="3"
                          fill="var(--ink)"
                          fontWeight="600"
                        >{r.name} · {r.count}</text>
                      </g>
                    );
                  })}
                </svg>
              </div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 16, marginTop: 20, paddingTop: 16, borderTop: '1px solid var(--line)' }}>
                <span className="kicker">{t('Tamaño = nº de colegios', 'Size = no. of schools')}</span>
                <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginLeft: 'auto' }}>
                  <span style={{ width: 6, height: 6, borderRadius: 999, background: 'var(--red)', opacity: 0.85 }}/>
                  <span style={{ fontSize: 11, color: 'var(--ink-2)' }}>1—5</span>
                  <span style={{ width: 12, height: 12, borderRadius: 999, background: 'var(--red)', opacity: 0.85, marginLeft: 10 }}/>
                  <span style={{ fontSize: 11, color: 'var(--ink-2)' }}>6—20</span>
                  <span style={{ width: 20, height: 20, borderRadius: 999, background: 'var(--red)', opacity: 0.85, marginLeft: 10 }}/>
                  <span style={{ fontSize: 11, color: 'var(--ink-2)' }}>20+</span>
                </div>
              </div>
            </div>

            {/* Regional bar chart */}
            <div className="reveal d2" style={{ background: 'var(--bg)', border: '1px solid var(--line)', padding: 32 }}>
              <div className="kicker" style={{ marginBottom: 20 }}>{t('Colegios por región', 'Schools by region')}</div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
                {regions.map((r, i) => (
                  <div key={i} style={{ display: 'grid', gridTemplateColumns: '120px 1fr 40px', alignItems: 'center', gap: 16 }}>
                    <div style={{ fontSize: 13, color: 'var(--ink-soft)', fontWeight: r.name === 'Lima' ? 600 : 400 }}>{r.name}</div>
                    <div style={{ position: 'relative', height: 18, background: 'var(--bg-alt)' }}>
                      <div style={{
                        position: 'absolute', top: 0, left: 0, bottom: 0,
                        width: `${(r.count / maxBar) * 100}%`,
                        background: r.name === 'Lima' ? 'var(--ink)' : 'var(--red)',
                        transition: 'width 800ms ease',
                      }}/>
                    </div>
                    <div style={{ textAlign: 'right', fontFamily: 'var(--mono)', fontSize: 13, color: 'var(--ink)', fontWeight: 600 }}>{r.count}</div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Type breakdown */}
      <section className="section bg-cream">
        <div className="shell">
          <div className="reveal" style={{ marginBottom: 48 }}>
            <span className="eyebrow">{t('Composición de la red', 'Network composition')}</span>
            <h2 className="display" style={{ fontSize: 'clamp(36px, 4.5vw, 56px)', marginTop: 16, maxWidth: '20ch' }}>
              {t('Qué tipo de colegios la conforman', 'The schools that make it up')}
            </h2>
          </div>
          <div className="reveal d1" style={{ background: 'var(--bg)', border: '1px solid var(--line)', padding: 32, maxWidth: 720, margin: '0 auto' }}>
            <div className="kicker" style={{ marginBottom: 24 }}>{t('Por tipo de administración', 'By school type')}</div>
            <div style={{ display: 'flex', height: 28, borderRadius: 0, overflow: 'hidden', marginBottom: 24 }}>
              {byType.map((t, i) => (
                <div key={i} style={{
                  width: `${t.pct}%`,
                  background: ['var(--ink)', 'var(--red)', '#A93226'][i],
                }}/>
              ))}
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
              {byType.map((t, i) => (
                <div key={i} style={{ display: 'grid', gridTemplateColumns: '14px 1fr 40px 50px', gap: 12, alignItems: 'center' }}>
                  <span style={{ width: 12, height: 12, background: ['var(--ink)', 'var(--red)', '#A93226'][i] }}/>
                  <span style={{ fontSize: 14, color: 'var(--ink-soft)' }}>{typeLabel(t.type)}</span>
                  <span style={{ fontFamily: 'var(--mono)', fontSize: 13, color: 'var(--mute)', textAlign: 'right' }}>{t.pct}%</span>
                  <span style={{ fontFamily: 'var(--serif)', fontSize: 22, color: 'var(--ink)', textAlign: 'right' }}>{t.count}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* Search & list */}
      <section className="section">
        <div className="shell">
          <div className="reveal" style={{ marginBottom: 32, display: 'flex', justifyContent: 'space-between', alignItems: 'end', flexWrap: 'wrap', gap: 24 }}>
            <div>
              <span className="eyebrow">{t('Listado oficial', 'Official directory')}</span>
              <h2 className="display" style={{ fontSize: 'clamp(36px, 4.5vw, 56px)', marginTop: 16 }}>{t('Todos los colegios miembros', 'All member schools')}</h2>
            </div>
          </div>

          {/* Filter bar */}
          <div className="reveal d1" style={{ display: 'flex', gap: 12, alignItems: 'center', flexWrap: 'wrap', padding: '16px 0', borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)', marginBottom: 32 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, flex: '1 1 280px', background: 'var(--bg-alt)', padding: '4px 16px', borderRadius: 999, maxWidth: 360 }}>
              <Icon name="search" size={14}/>
              <input value={search} onChange={(e) => setSearch(e.target.value)} placeholder={t('Buscar colegio o ciudad...', 'Search by school or city…')}
                style={{ background: 'transparent', border: 'none', padding: '8px 0', outline: 'none', fontSize: 14, fontFamily: 'var(--sans)', width: '100%', color: 'var(--ink)' }}/>
            </div>
            <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
              {['Todas', ...regions.map(r => r.name)].slice(0, 8).map(r => (
                <button key={r} onClick={() => setRegion(r)} style={{
                  padding: '6px 14px', borderRadius: 999,
                  background: region === r ? 'var(--ink)' : 'transparent',
                  color: region === r ? '#fff' : 'var(--ink-soft)',
                  border: '1px solid ' + (region === r ? 'var(--ink)' : 'var(--line)'),
                  fontSize: 12, fontWeight: 500, fontFamily: 'var(--sans)', transition: 'all 180ms',
                }}>{r === 'Todas' ? t('Todas', 'All') : r}</button>
              ))}
            </div>
            <div className="kicker" style={{ marginLeft: 'auto' }}>{filtered.length} {t('resultados', 'results')}</div>
          </div>

          {/* List */}
          <div style={{ display: 'grid', gridTemplateColumns: '48px 2.2fr 1.4fr 110px', alignItems: 'center', padding: '12px 20px', background: 'var(--bg-alt)', borderRadius: 0, marginBottom: 0 }}>
            {['#', t('Colegio', 'School'), t('Ciudad · Región', 'City · Region'), t('Tipo', 'Type')].map((h, i) => (
              <div key={i} className="kicker" style={{ color: 'var(--mute)' }}>{h}</div>
            ))}
          </div>
          <div style={{ border: '1px solid var(--line)', borderTop: 'none' }}>
            {filtered.map((s, i) => (
              <div key={i} style={{ display: 'grid', gridTemplateColumns: '48px 2.2fr 1.4fr 110px', alignItems: 'center', padding: '14px 20px', borderTop: i > 0 ? '1px solid var(--line)' : 'none', transition: 'background 200ms' }}
                onMouseEnter={(e) => { e.currentTarget.style.background = 'var(--bg-alt)'; }}
                onMouseLeave={(e) => { e.currentTarget.style.background = 'transparent'; }}
              >
                <div style={{ fontFamily: 'var(--mono)', fontSize: 12, color: 'var(--mute)' }}>{String(i + 1).padStart(3, '0')}</div>
                <div style={{ fontFamily: 'var(--serif)', fontSize: 17, color: 'var(--ink)', lineHeight: 1.3 }}>{s.n}</div>
                <div style={{ fontSize: 13, color: 'var(--ink-2)' }}>{s.city} · {s.region}</div>
                <div>
                  <span style={{ padding: '3px 10px', borderRadius: 999, background: 'var(--bg-alt)', fontSize: 11, fontFamily: 'var(--mono)', letterSpacing: '0.04em', color: 'var(--ink-soft)' }}>{typeLabel(s.type)}</span>
                </div>
              </div>
            ))}
            {filtered.length === 0 && (
              <div style={{ padding: 40, textAlign: 'center', color: 'var(--mute)' }}>{t('Sin resultados para tu búsqueda.', 'No results match your search.')}</div>
            )}
          </div>

          <p className="reveal d2" style={{ fontSize: 13, color: 'var(--mute)', marginTop: 24, textAlign: 'center' }}>
            {t('Listado de los 103 colegios miembros activos a mayo 2026.', 'Directory of the 103 member schools active as of May 2026.')}
          </p>
        </div>
      </section>

      {/* CTA */}
      <section style={{ background: 'var(--red)', color: '#fff', padding: '80px 0' }}>
        <div className="shell" style={{ display: 'grid', gridTemplateColumns: '2fr 1fr', gap: 48, alignItems: 'center' }}>
          <div>
            <h2 className="display" style={{ color: '#fff', fontSize: 'clamp(36px, 4.5vw, 56px)' }}>
              {t('¿Tu colegio no está en la lista?', 'Don’t see your school on the list?')}
            </h2>
            <p style={{ color: 'rgba(255,255,255,0.85)', fontSize: 18, marginTop: 16, maxWidth: 520 }}>
              {t('La admisión está abierta todo el año. Te explicamos qué implica unirte a la red y cómo hacerlo en tres pasos.', 'Admission is open year-round. We’ll walk you through what joining the network involves and how to do it in three steps.')}
            </p>
          </div>
          <div style={{ textAlign: 'right' }}>
            <button className="btn" style={{ background: '#fff', color: 'var(--red)' }} onClick={() => setPage('admision')}>
              {t('Cómo ser miembro', 'How to become a member')} <Icon name="arrow"/>
            </button>
          </div>
        </div>
      </section>
    </Page>
  );
};

Object.assign(window, { ColegiosPage });