/* ANPA Quintán — Web navegable · páxinas B (Extraescolares, Documentos, Novas, Detalle, Contacto) */
const { Icon, Btn, Photo, NewsCard, DocRow, InfoBox, SitePageHero, useWpPosts, t } = window;

/* ================= EXTRAESCOLARES ================= */
function ExtraescolaresPage() {
  const acts = [
    { name: t('Fútbol sala', 'Fútbol sala'), tipo: t('Deporte', 'Deporte'), tone: 'green', idade: t('1º–6º Primaria', '1º–6º Primaria'), dias: t('Luns e mércores', 'Lunes y miércoles'), hora: '16:00–17:00', org: 'C.D. Sada' },
    { name: t('Patinaxe', 'Patinaje'), tipo: t('Deporte', 'Deporte'), tone: 'green', idade: t('3º Inf.–6º Prim.', '3º Inf.–6º Prim.'), dias: t('Martes e xoves', 'Martes y jueves'), hora: '16:00–17:00', org: 'Escola Roller' },
    { name: t('Música e movemento', 'Música y movimiento'), tipo: t('Artística', 'Artística'), tone: 'coral', idade: t('Infantil', 'Infantil'), dias: t('Mércores', 'Miércoles'), hora: '16:00–17:00', org: 'Allegro' },
    { name: t('Teatro', 'Teatro'), tipo: t('Artística', 'Artística'), tone: 'coral', idade: t('2º–6º Primaria', '2º–6º Primaria'), dias: t('Venres', 'Viernes'), hora: '16:00–17:30', org: 'Faísca' },
    { name: t('Inglés divertido', 'Inglés divertido'), tipo: t('Idiomas', 'Idiomas'), tone: 'blue', idade: t('Infantil e Primaria', 'Infantil y Primaria'), dias: t('Luns e mércores', 'Lunes y miércoles'), hora: '16:00–17:00', org: 'Kids&Us' },
    { name: t('Robótica', 'Robótica'), tipo: 'STEAM', tone: 'gold', idade: t('3º–6º Primaria', '3º–6º Primaria'), dias: t('Martes', 'Martes'), hora: '16:00–17:30', org: 'EduTech' },
    { name: t('Reforzo escolar', 'Refuerzo escolar'), tipo: t('Reforzo', 'Refuerzo'), tone: 'blue', idade: t('Primaria', 'Primaria'), dias: t('Martes e xoves', 'Martes y jueves'), hora: '16:00–17:00', org: 'ANPA' },
    { name: t('Xadrez', 'Ajedrez'), tipo: 'STEAM', tone: 'gold', idade: t('2º–6º Primaria', '2º–6º Primaria'), dias: t('Venres', 'Viernes'), hora: '16:00–17:00', org: 'Clube Xaque' },
  ];
  const filtros = [{ k: 'all', l: t('Todas', 'Todas') }, { k: t('Deporte', 'Deporte'), l: t('Deporte', 'Deporte') }, { k: t('Artística', 'Artística'), l: t('Artística', 'Artística') }, { k: t('Idiomas', 'Idiomas'), l: t('Idiomas', 'Idiomas') }, { k: 'STEAM', l: 'STEAM' }, { k: t('Reforzo', 'Refuerzo'), l: t('Reforzo', 'Refuerzo') }];
  const [activo, setActivo] = React.useState('all');
  const visibles = activo === 'all' ? acts : acts.filter(a => a.tipo === activo);
  return (
    <div>
      <SitePageHero tone="green" eyebrow={t('Servizos · Extraescolares', 'Servicios · Extraescolares')} title={t('Actividades extraescolares', 'Actividades extraescolares')} sub={t('Deporte, arte, idiomas e tecnoloxía para todas as idades, de 16:00 a 17:00/17:30 h tras o comedor.', 'Deporte, arte, idiomas y tecnología para todas las edades, de 16:00 a 17:00/17:30 h tras el comedor.')} />
      <section className="wrap section">
        <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap', marginBottom: 26 }}>
          {filtros.map(f => (
            <button key={f.k} onClick={() => setActivo(f.k)} className="chip"
              style={activo === f.k ? { background: 'var(--blue-700)', color: '#fff', border: '1.5px solid var(--blue-700)', cursor: 'pointer' } : { background: 'var(--paper)', color: 'var(--ink-soft)', border: '1.5px solid var(--line)', cursor: 'pointer' }}>{f.l}</button>
          ))}
        </div>
        <div className="act-grid">
          {visibles.map((a, i) => (
            <div key={i} className="card" style={{ padding: 0, overflow: 'hidden' }}>
              <Photo label={a.tipo.toLowerCase()} h={110} style={{ borderRadius: 0 }} />
              <div style={{ padding: 18 }}>
                <span className={`chip chip-${a.tone}`} style={{ fontSize: 12 }}>{a.tipo}</span>
                <h3 className="t-h3" style={{ fontSize: 18, marginTop: 10 }}>{a.name}</h3>
                <div style={{ marginTop: 12, display: 'flex', flexDirection: 'column', gap: 7 }}>
                  {[['users', a.idade], ['calendar', a.dias], ['clock', a.hora]].map(([ic, v], j) => (
                    <div key={j} style={{ display: 'flex', gap: 8, alignItems: 'center', fontSize: 13.5, color: 'var(--ink-soft)' }}><Icon name={ic} style={{ width: 15, height: 15, color: 'var(--ink-mute)' }} />{v}</div>
                  ))}
                </div>
                <div style={{ marginTop: 12, paddingTop: 12, borderTop: '1px solid var(--line-soft)', fontSize: 12.5, color: 'var(--ink-mute)' }}>{t('Organiza', 'Organiza')} · <strong style={{ color: 'var(--ink-soft)' }}>{a.org}</strong></div>
              </div>
            </div>
          ))}
        </div>
        <div style={{ marginTop: 34, background: 'var(--blue-50)', borderRadius: 'var(--r-lg)', padding: 24, display: 'flex', alignItems: 'center', gap: 18, flexWrap: 'wrap' }}>
          <Icon name="info" style={{ width: 26, height: 26, color: 'var(--blue-700)', flexShrink: 0 }} />
          <p className="t-body" style={{ fontSize: 15.5, color: 'var(--blue-800)', flex: 1, minWidth: 240 }}>{t('A inscrición faise a través da ANPA a comezos de curso. Consulta os formularios na sección de', 'La inscripción se hace a través de la ANPA a comienzos de curso. Consulta los formularios en la sección de')} <strong>{t('Documentos', 'Documentos')}</strong>.</p>
          <a href="#/documentos"><Btn kind="primary" size="sm" iconRight="arrow">{t('Inscrición', 'Inscripción')}</Btn></a>
        </div>
      </section>
    </div>
  );
}

/* ================= DOCUMENTOS ================= */
function DocumentosPage() {
  const cats = [
    { id: 'xeral', t: t('Xeral', 'General'), tone: 'blue', icon: 'doc', docs: [[t('Estatutos da ANPA', 'Estatutos de la ANPA'), t('Normativa interna', 'Normativa interna'), 'pdf'], [t('Acta da última asemblea', 'Acta de la última asamblea'), t('Asemblea xeral ordinaria', 'Asamblea general ordinaria'), 'pdf'], [t('Calendario escolar 2025/26', 'Calendario escolar 2025/26'), t('Días lectivos e festivos', 'Días lectivos y festivos'), 'pdf']] },
    { id: 'socios', t: t('Soci@s', 'Soci@s'), tone: 'green', icon: 'users', docs: [[t('Alta de persoa socia', 'Alta de persona socia'), t('Formulario de inscrición', 'Formulario de inscripción'), 'pdf'], [t('Domiciliación bancaria', 'Domiciliación bancaria'), t('Orde SEPA de cota anual', 'Orden SEPA de cuota anual'), 'doc'], [t('Baixa de persoa socia', 'Baja de persona socia'), t('Solicitude de baixa', 'Solicitud de baja'), 'pdf']] },
    { id: 'comedor', t: t('Comedor', 'Comedor'), tone: 'gold', icon: 'utensils', docs: [[t('Inscrición comedor (fixo)', 'Inscripción comedor (fijo)'), t('Mes completo', 'Mes completo'), 'pdf'], [t('Comedor días soltos', 'Comedor días sueltos'), t('Uso esporádico', 'Uso esporádico'), 'pdf'], [t('Ficha de alerxias', 'Ficha de alergias'), t('Datos médicos e dietas', 'Datos médicos y dietas'), 'doc']] },
    { id: 'madrugadoras', t: t('Madrugadoras', 'Madrugadores'), tone: 'coral', icon: 'sunrise', docs: [[t('Inscrición madrugadoras', 'Inscripción madrugadores'), t('Fixo ou por días', 'Fijo o por días'), 'pdf'], [t('Autorización de recollida', 'Autorización de recogida'), t('Persoas autorizadas', 'Personas autorizadas'), 'doc']] },
    { id: 'extraescolares', t: t('Extraescolares', 'Extraescolares'), tone: 'green', icon: 'activity', docs: [[t('Inscrición extraescolares', 'Inscripción extraescolares'), t('Curso 2026/27', 'Curso 2026/27'), 'pdf'], [t('Folla de actividades', 'Hoja de actividades'), t('Horarios e prezos', 'Horarios y precios'), 'xls'], [t('Autorización de imaxe', 'Autorización de imagen'), t('Fotos en actividades', 'Fotos en actividades'), 'pdf']] },
  ];
  const docWord = t('documentos', 'documentos');
  return (
    <div>
      <SitePageHero eyebrow={t('Descargas', 'Descargas')} title={t('Documentos', 'Documentos')} sub={t('Todos os formularios e documentos da ANPA, organizados por categoría e listos para descargar.', 'Todos los formularios y documentos de la ANPA, organizados por categoría y listos para descargar.')} />
      <section className="wrap section">
        <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap', marginBottom: 30 }}>
          {cats.map(c => (
            <a key={c.id} href={`#cat-${c.id}`} onClick={(e) => { e.preventDefault(); const el = document.getElementById(`cat-${c.id}`); if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 90, behavior: 'smooth' }); }}
              className={`chip chip-${c.tone}`} style={{ fontSize: 14, padding: '9px 15px' }}><Icon name={c.icon} style={{ width: 15, height: 15 }} />{c.t}</a>
          ))}
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 36 }}>
          {cats.map((c, i) => (
            <div key={i} id={`cat-${c.id}`} style={{ scrollMarginTop: 90 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 16 }}>
                <div className={`svc-ico ic-${c.tone}`} style={{ width: 40, height: 40, marginBottom: 0, borderRadius: 11 }}><Icon name={c.icon} style={{ width: 20, height: 20 }} /></div>
                <h2 className="t-h3" style={{ fontSize: 21 }}>{c.t}</h2>
                <span className="t-small" style={{ marginLeft: 4 }}>· {c.docs.length} {docWord}</span>
              </div>
              <div className="doc-grid">
                {c.docs.map((d, j) => <DocRow key={j} type={d[2]} title={d[0]} desc={d[1]} />)}
              </div>
            </div>
          ))}
        </div>
      </section>
    </div>
  );
}

/* ================= NOVAS (lista) ================= */
function NovasPage() {
  const wp = useWpPosts(9);
  const live = !!(wp.posts && wp.posts.length);
  const feat = live ? wp.posts[0] : { date: t('4 xuño 2026', '4 jun 2026'), title: t('Xa está dispoñible o menú de comedor de xuño', 'Ya está disponible el menú de comedor de junio'), excerpt: t('Consulta o menú do último mes do curso, con pratos de tempada e opcións adaptadas. Tamén podes descargalo en PDF para telo sempre á man.', 'Consulta el menú del último mes del curso, con platos de temporada y opciones adaptadas. También puedes descargarlo en PDF para tenerlo siempre a mano.') };
  const list = live ? wp.posts.slice(1) : [
    { tone: 'green', tag: t('Extraescolares', 'Extraescolares'), date: t('28 maio 2026', '28 may 2026'), title: t('Aberta a preinscrición de extraescolares 2026/27', 'Abierta la preinscripción de extraescolares 2026/27') },
    { tone: 'blue', tag: t('Asociación', 'Asociación'), date: t('20 maio 2026', '20 may 2026'), title: t('Convocatoria de asemblea xeral ordinaria', 'Convocatoria de asamblea general ordinaria') },
    { tone: 'coral', tag: t('Festas', 'Fiestas'), date: t('15 maio 2026', '15 may 2026'), title: t('Buscamos persoas voluntarias para a festa de fin de curso', 'Buscamos personas voluntarias para la fiesta de fin de curso') },
    { tone: 'gold', tag: t('Comedor', 'Comedor'), date: t('6 maio 2026', '6 may 2026'), title: t('Convocatoria de axudas de comedor da Xunta', 'Convocatoria de ayudas de comedor de la Xunta') },
    { tone: 'blue', tag: t('Aviso', 'Aviso'), date: t('28 abril 2026', '28 abr 2026'), title: t('Cambio de horario na recollida de madrugadoras', 'Cambio de horario en la recogida de madrugadores') },
    { tone: 'green', tag: t('Actividades', 'Actividades'), date: t('20 abril 2026', '20 abr 2026'), title: t('Crónica do Día do Libro no colexio', 'Crónica del Día del Libro en el colegio') },
  ];
  const featProps = live ? { href: feat.link, target: '_blank', rel: 'noopener' } : { href: '#/nova' };
  return (
    <div>
      <SitePageHero tone="green" eyebrow={t('Novas e avisos', 'Noticias y avisos')} title={t('Novas e avisos', 'Noticias y avisos')} sub={t('Comunicados, recordatorios e crónicas da vida da ANPA e do colexio.', 'Comunicados, recordatorios y crónicas de la vida de la ANPA y del colegio.')} />
      <section className="wrap section">
        {wp.loading && <div className="t-small" style={{ marginBottom: 16 }}>{t('Cargando as últimas novas do blog…', 'Cargando las últimas noticias del blog…')}</div>}
        <a {...featProps} className="feat-news cardlink" style={{ marginBottom: 36 }}>
          {live && feat.image
            ? <img src={feat.image} alt={feat.title} loading="lazy" style={{ width: '100%', height: 300, objectFit: 'cover', display: 'block' }} />
            : <Photo label={live ? t('novas', 'noticias') : t('menú de comedor', 'menú de comedor')} h={300} style={{ borderRadius: 0 }} />}
          <div style={{ padding: 36, display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
            <div style={{ display: 'flex', gap: 8, alignItems: 'center', marginBottom: 14 }}><span className="chip chip-gold">{t('Destacado', 'Destacado')}</span><span className="t-meta">{feat.date}</span></div>
            <h2 className="t-h2" style={{ fontSize: 30 }}>{feat.title}</h2>
            <p className="t-body" style={{ marginTop: 14 }}>{feat.excerpt}</p>
            <div style={{ marginTop: 22 }}><Btn kind="primary" iconRight="arrow">{t('Ler a noticia', 'Leer la noticia')}</Btn></div>
          </div>
        </a>
        <div className="news-grid cols-3">
          {list.map((n, i) => live
            ? <a key={i} className="cardlink" href={n.link} target="_blank" rel="noopener"><NewsCard {...n} /></a>
            : <a key={i} className="cardlink" href="#/nova"><NewsCard {...n} excerpt={t('Preme para ler todos os detalles deste aviso da asociación.', 'Pulsa para leer todos los detalles de este aviso de la asociación.')} /></a>
          )}
        </div>
        {live && <div style={{ textAlign: 'center', marginTop: 36 }}><a href={`https://${'anpaquintanmondego.wordpress.com'}`} target="_blank" rel="noopener"><Btn kind="secondary" iconRight="external">{t('Ver o blog completo', 'Ver el blog completo')}</Btn></a></div>}
        {!live && !wp.loading && <div style={{ textAlign: 'center', marginTop: 36 }}><Btn kind="secondary" iconRight="chevron">{t('Cargar máis novas', 'Cargar más noticias')}</Btn></div>}
      </section>
    </div>
  );
}

/* ================= NOVA (detalle) ================= */
function NovaPage() {
  return (
    <div>
      <SitePageHero tone="green" eyebrow={t('Novas · Comedor', 'Noticias · Comedor')} title={t('Xa está dispoñible o menú de xuño', 'Ya está disponible el menú de junio')} sub={t('Publicado o 4 de xuño de 2026 · pola xunta da ANPA', 'Publicado el 4 de junio de 2026 · por la junta de la ANPA')} />
      <section className="wrap section" style={{ maxWidth: 800 }}>
        <a href="#/novas" style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: 14, fontWeight: 700, color: 'var(--blue-700)', marginBottom: 22 }}><Icon name="arrow" style={{ width: 15, height: 15, transform: 'rotate(180deg)' }} /> {t('Volver a Novas', 'Volver a Noticias')}</a>
        <Photo label={t('prato do menú escolar', 'plato del menú escolar')} h={360} />
        <div style={{ marginTop: 32, fontSize: 18, lineHeight: 1.7, color: 'var(--ink-soft)', display: 'flex', flexDirection: 'column', gap: 18 }}>
          <p style={{ fontSize: 20, color: 'var(--ink)', fontWeight: 500 }}>{t('Como cada mes, xa podedes consultar o menú do comedor escolar. En xuño apostamos por pratos frescos e de tempada para rematar o curso con enerxía.', 'Como cada mes, ya podéis consultar el menú del comedor escolar. En junio apostamos por platos frescos y de temporada para terminar el curso con energía.')}</p>
          <p>{t('O menú foi revisado pola nutricionista do servizo e mantén o equilibrio entre verduras, legumes, peixe e carne, cunha peza de froita ou lácteo de sobremesa. As familias con necesidades especiais (alerxias, intolerancias ou dietas) dispoñen de menús adaptados.', 'El menú fue revisado por la nutricionista del servicio y mantiene el equilibrio entre verduras, legumbres, pescado y carne, con una pieza de fruta o lácteo de postre. Las familias con necesidades especiales (alergias, intolerancias o dietas) disponen de menús adaptados.')}</p>
          <h3 className="t-h3" style={{ color: 'var(--ink)', marginTop: 8 }}>{t('Como descargalo', 'Cómo descargarlo')}</h3>
          <p>{t('Podedes descargar o menú completo en formato PDF desde a ficha de comedor ou desde a sección de Documentos. Recomendámosvos imprimilo ou gardalo no móbil para consultalo durante o mes.', 'Podéis descargar el menú completo en formato PDF desde la ficha de comedor o desde la sección de Documentos. Os recomendamos imprimirlo o guardarlo en el móvil para consultarlo durante el mes.')}</p>
        </div>
        <div style={{ marginTop: 28, display: 'flex', gap: 12, flexWrap: 'wrap' }}>
          <Btn kind="primary" icon="download">{t('Descargar menú (PDF)', 'Descargar menú (PDF)')}</Btn>
          <a href="#/comedor"><Btn kind="secondary" icon="utensils">{t('Ir a Comedor', 'Ir a Comedor')}</Btn></a>
        </div>
        <hr className="divider" style={{ margin: '36px 0' }} />
        <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
          <span className="t-meta">{t('Compartir:', 'Compartir:')}</span>
          {['facebook', 'instagram', 'mail'].map(s => (<div key={s} style={{ width: 40, height: 40, borderRadius: 11, background: 'var(--paper)', border: '1px solid var(--line)', display: 'grid', placeItems: 'center', color: 'var(--blue-700)' }}><Icon name={s} style={{ width: 19, height: 19 }} /></div>))}
        </div>
      </section>
    </div>
  );
}

/* ================= CONTACTO ================= */
function ContactoPage() {
  const [sent, setSent] = React.useState(false);
  const [form, setForm] = React.useState({ nome: '', correo: '', asunto: '', msg: '', ok: false });
  const set = (k, v) => setForm(f => ({ ...f, [k]: v }));
  const valid = form.nome && form.correo && form.msg && form.ok;
  return (
    <div>
      <SitePageHero eyebrow={t('Fala connosco', 'Habla con nosotras')} title={t('Contacto', 'Contacto')} sub={t('Calquera dúbida, suxestión ou proposta é benvida. Escríbenos e respondémosche canto antes.', 'Cualquier duda, sugerencia o propuesta es bienvenida. Escríbenos y te respondemos cuanto antes.')} />
      <section className="wrap section">
        <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 40 }} className="contact-grid">
          <div className="card" style={{ padding: 32 }}>
            {sent ? (
              <div style={{ textAlign: 'center', padding: '30px 10px' }}>
                <div className="svc-ico ic-green" style={{ width: 64, height: 64, margin: '0 auto 18px', borderRadius: 18 }}><Icon name="check" style={{ width: 34, height: 34 }} /></div>
                <h2 className="t-h3" style={{ fontSize: 24 }}>{t('Mensaxe enviada!', '¡Mensaje enviado!')}</h2>
                <p className="t-body" style={{ marginTop: 10 }}>{t('Grazas por escribirnos', 'Gracias por escribirnos')}, {form.nome.split(' ')[0] || ''}. {t('Respondémosche o antes posible.', 'Te respondemos lo antes posible.')}</p>
                <div style={{ marginTop: 22 }}><button onClick={() => { setSent(false); setForm({ nome: '', correo: '', asunto: '', msg: '', ok: false }); }} style={{ border: 0, background: 'none', cursor: 'pointer' }}><Btn kind="secondary" iconRight="arrow">{t('Enviar outra', 'Enviar otra')}</Btn></button></div>
              </div>
            ) : (
              <React.Fragment>
                <h2 className="t-h3" style={{ fontSize: 22 }}>{t('Envíanos unha mensaxe', 'Envíanos un mensaje')}</h2>
                <p className="t-body" style={{ fontSize: 15, marginTop: 6, marginBottom: 22 }}>{t('Os campos marcados con * son obrigatorios.', 'Los campos marcados con * son obligatorios.')}</p>
                <div className="form-grid">
                  <div className="field"><label>{t('Nome', 'Nombre')} *</label><input className="input" placeholder={t('O teu nome', 'Tu nombre')} value={form.nome} onChange={e => set('nome', e.target.value)} /></div>
                  <div className="field"><label>{t('Correo', 'Correo')} *</label><input className="input" type="email" placeholder="nome@correo.com" value={form.correo} onChange={e => set('correo', e.target.value)} /></div>
                </div>
                <div className="field"><label>{t('Asunto', 'Asunto')}</label><input className="input" placeholder={t('Sobre que nos escribes?', '¿Sobre qué nos escribes?')} value={form.asunto} onChange={e => set('asunto', e.target.value)} /></div>
                <div className="field"><label>{t('Mensaxe', 'Mensaje')} *</label><textarea className="textarea input" style={{ height: 120 }} placeholder={t('Escribe aquí a túa mensaxe…', 'Escribe aquí tu mensaje…')} value={form.msg} onChange={e => set('msg', e.target.value)} /></div>
                <label style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 20, cursor: 'pointer' }}>
                  <input type="checkbox" checked={form.ok} onChange={e => set('ok', e.target.checked)} style={{ width: 18, height: 18, accentColor: 'var(--blue-700)' }} />
                  <span className="t-small">{t('Acepto a política de privacidade.', 'Acepto la política de privacidad.')}</span>
                </label>
                <button onClick={() => valid && setSent(true)} disabled={!valid} style={{ border: 0, background: 'none', cursor: valid ? 'pointer' : 'not-allowed', opacity: valid ? 1 : .5, padding: 0 }}>
                  <Btn kind="primary" size="lg" icon="send">{t('Enviar mensaxe', 'Enviar mensaje')}</Btn>
                </button>
              </React.Fragment>
            )}
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
            <InfoBox rows={[{ icon: 'mail', k: t('Correo electrónico', 'Correo electrónico'), v: 'info@anpaquintan.org' }, { icon: 'pin', k: t('Enderezo', 'Dirección'), v: 'Rúa Miguel Pereiro Tacón s/n · Mondego, Sada' }, { icon: 'clock', k: t('Atención', 'Atención'), v: t('Luns de 16:00 a 17:30', 'Lunes de 16:00 a 17:30') }]} />
            <div className="card" style={{ padding: 20 }}>
              <div className="t-meta" style={{ color: 'var(--green-600)', marginBottom: 12 }}>{t('Síguenos', 'Síguenos')}</div>
              <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
                <a href="https://www.facebook.com/profile.php?id=100063592357611" target="_blank" rel="noopener" style={{ flex: 1, minWidth: 130, display: 'flex', alignItems: 'center', gap: 9, padding: '11px 14px', borderRadius: 12, background: 'var(--blue-50)', color: 'var(--blue-700)', fontWeight: 700, fontSize: 14.5 }}><Icon name="facebook" style={{ width: 18, height: 18 }} />Facebook</a>
                <a href="#" style={{ flex: 1, minWidth: 130, display: 'flex', alignItems: 'center', gap: 9, padding: '11px 14px', borderRadius: 12, background: 'var(--coral-100)', color: '#c4502b', fontWeight: 700, fontSize: 14.5 }}><Icon name="instagram" style={{ width: 18, height: 18 }} />@anpaquintan</a>
              </div>
            </div>
            <div className="card" style={{ padding: 0, overflow: 'hidden' }}>
              <div style={{ position: 'relative', height: 200, background: '#dfe8e6', backgroundImage: 'repeating-linear-gradient(0deg,rgba(31,78,107,.05) 0 1px,transparent 1px 28px),repeating-linear-gradient(90deg,rgba(31,78,107,.05) 0 1px,transparent 1px 28px)' }}>
                <div style={{ position: 'absolute', left: '50%', top: '46%', transform: 'translate(-50%,-100%)', color: 'var(--coral)' }}><Icon name="pin" style={{ width: 40, height: 40 }} /></div>
                <div style={{ position: 'absolute', bottom: 12, left: 12, background: 'var(--paper)', borderRadius: 10, padding: '8px 12px', boxShadow: 'var(--sh-sm)', fontSize: 13, fontWeight: 700, color: 'var(--ink)' }}>CEIP Pedro Barrié de la Maza</div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { ExtraescolaresPage, DocumentosPage, NovasPage, NovaPage, ContactoPage });