/* ANPA Quintán — Web navegable · páxinas A (Home, Quen somos, Comedor, Madrugadoras) */
const { Icon, Btn, Photo, ServiceCard, NewsCard, InfoBox, DocRow, SitePageHero, t, fmtDate } = window;

function hServices() {
  return [
    { icon: 'utensils', tone: 'blue', title: t('Comedor', 'Comedor'), desc: t('Menús mensuais, horarios e axudas de comedor.', 'Menús mensuales, horarios y ayudas de comedor.'), to: 'comedor' },
    { icon: 'sunrise', tone: 'gold', title: t('Madrugadoras', 'Madrugadores'), desc: t('Plan Madruga: acollida desde as 7:30 h.', 'Plan Madruga: acogida desde las 7:30 h.'), to: 'madrugadoras' },
    { icon: 'activity', tone: 'green', title: t('Extraescolares', 'Extraescolares'), desc: t('Deporte, música, idiomas e reforzo.', 'Deporte, música, idiomas y refuerzo.'), to: 'extraescolares' },
    { icon: 'doc', tone: 'coral', title: t('Documentos', 'Documentos'), desc: t('Altas, baixas e autorizacións en PDF.', 'Altas, bajas y autorizaciones en PDF.'), to: 'documentos' },
  ];
}
function hNews() {
  return [
    { tone: 'gold', tag: t('Comedor', 'Comedor'), date: t('4 xuño 2026', '4 jun 2026'), title: t('Publicado o menú de xuño', 'Publicado el menú de junio'), excerpt: t('Xa podes consultar e descargar o menú do comedor para o último mes do curso.', 'Ya puedes consultar y descargar el menú del comedor para el último mes del curso.') },
    { tone: 'green', tag: t('Extraescolares', 'Extraescolares'), date: t('28 maio 2026', '28 may 2026'), title: t('Aberta a preinscrición 2026/27', 'Abierta la preinscripción 2026/27'), excerpt: t('Reserva praza nas actividades extraescolares antes do 20 de xuño.', 'Reserva plaza en las actividades extraescolares antes del 20 de junio.') },
    { tone: 'blue', tag: t('Asociación', 'Asociación'), date: t('20 maio 2026', '20 may 2026'), title: t('Convocatoria de asemblea xeral', 'Convocatoria de asamblea general'), excerpt: t('Convocamos a todas as familias socias o vindeiro 12 de xuño no salón de actos.', 'Convocamos a todas las familias socias el próximo 12 de junio en el salón de actos.') },
    { tone: 'coral', tag: t('Aviso', 'Aviso'), date: t('15 maio 2026', '15 may 2026'), title: t('Festa fin de curso: chamamento', 'Fiesta fin de curso: llamamiento'), excerpt: t('Buscamos familias voluntarias para a organización da festa de fin de curso.', 'Buscamos familias voluntarias para la organización de la fiesta de fin de curso.') },
  ];
}

function scrollToId(id) {
  const el = document.getElementById(id);
  if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 80, behavior: 'smooth' });
}

/* ---- Noticias en directo dende o blog de WordPress ---- */
const WP_SITE = 'anpaquintanmondego.wordpress.com';
function wpStrip(s) { const tmp = document.createElement('div'); tmp.innerHTML = s || ''; const x = (tmp.textContent || '').replace(/\s+/g, ' ').replace(/\[\u2026\]|Continue reading.*$/i, '').trim(); return x; }
const WP_TONES = ['gold', 'green', 'blue', 'coral'];
function useWpPosts(count) {
  const [state, setState] = React.useState({ loading: true, posts: null });
  React.useEffect(() => {
    let live = true;
    const url = `https://public-api.wordpress.com/wp/v2/sites/${WP_SITE}/posts?per_page=${count}&_embed=1`;
    fetch(url)
      .then(r => r.ok ? r.json() : Promise.reject(r.status))
      .then(data => {
        if (!live) return;
        const posts = (data || []).map((p, i) => {
          let tag = t('Nova', 'Noticia');
          try { const terms = p._embedded && p._embedded['wp:term']; const cat = terms && terms.find(tm => tm && tm[0] && tm[0].taxonomy === 'category'); if (cat && cat[0]) tag = cat[0].name; } catch (e) {}
          let image = null;
          try { const m = p._embedded && p._embedded['wp:featuredmedia']; if (m && m[0] && !m[0].code) { const md = m[0]; const sz = md.media_details && md.media_details.sizes; image = (sz && (sz.medium_large || sz.large || sz.medium || sz.full) || {}).source_url || md.source_url || null; } } catch (e) {}
          if (!image) { try { const html = (p.content && p.content.rendered) || ''; const mm = html.match(/<img[^>]+src=["']([^"']+)["']/i); if (mm) image = mm[1]; } catch (e) {} }
          const ex = wpStrip(p.excerpt && p.excerpt.rendered);
          return { tone: WP_TONES[i % WP_TONES.length], tag, image, date: fmtDate(p.date), title: wpStrip(p.title && p.title.rendered), excerpt: ex.length > 140 ? ex.slice(0, 140) + '…' : ex, link: p.link };
        }).filter(p => p.title);
        setState({ loading: false, posts: posts.length ? posts : null });
      })
      .catch(() => { if (live) setState({ loading: false, posts: null }); });
    return () => { live = false; };
  }, [count]);
  return state;
}

/* ================= HOME (Variante A) ================= */
function HomePage() {
  const wp = useWpPosts(4);
  const live = !!(wp.posts && wp.posts.length);
  const items = live ? wp.posts : hNews();
  return (
    <div>
      {/* hero */}
      <section className="hero">
        <div className="wrap hero-grid">
          <div>
            <span className="chip chip-green"><Icon name="heart" style={{ width: 14, height: 14 }} /> {t('Asociación de familias', 'Asociación de familias')}</span>
            <h1 style={{ marginTop: 18 }}>{t('Xunt@s por unha', 'Junt@s por una')} <span style={{ color: 'var(--green-600)' }}>{t('escola mellor', 'escuela mejor')}</span></h1>
            <p className="t-lead" style={{ marginTop: 18, maxWidth: 480 }}>
              {t('ANPA Quintán · CEIP Pedro Barrié de la Maza, Mondego — Sada. Servizos, información e comunidade para as familias do colexio.', 'ANPA Quintán · CEIP Pedro Barrié de la Maza, Mondego — Sada. Servicios, información y comunidad para las familias del colegio.')}
            </p>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 12, marginTop: 28 }}>
              <a href="#/comedor"><Btn kind="primary" size="lg" icon="utensils">{t('Información de comedor', 'Información de comedor')}</Btn></a>
              <a href="#accesos" onClick={(e) => { e.preventDefault(); scrollToId('accesos'); }}><Btn kind="secondary" size="lg" iconRight="arrow">{t('Ver servizos', 'Ver servicios')}</Btn></a>
            </div>
          </div>
          <div className="hero-media">
            <img src="colexio.webp" alt={t('O CEIP Pedro Barrié de la Maza visto desde o xardín', 'El CEIP Pedro Barrié de la Maza visto desde el jardín')} style={{ width: '100%', height: 380, objectFit: 'cover', objectPosition: 'center', borderRadius: 'var(--r-lg)', display: 'block', boxShadow: 'var(--sh-md)' }} />
          </div>
        </div>
      </section>

      {/* accesos rápidos */}
      <section id="accesos" className="wrap" style={{ paddingTop: 40 }}>
        <div className="svc-grid">
          {hServices().map((s, i) => (
            <a key={i} className="cardlink" href={`#/${s.to}`}><ServiceCard {...s} /></a>
          ))}
        </div>
      </section>

      {/* quen somos breve */}
      <section className="wrap section">
        <div className="grid-2">
          <img src="nenos-patio.webp" alt={t('Nenas e nenos collidos da man nun bosque', 'Niñas y niños cogidos de la mano en un bosque')} style={{ width: '100%', height: 320, objectFit: 'cover', objectPosition: 'center', borderRadius: 'var(--r-lg)', display: 'block', boxShadow: 'var(--sh-md)' }} />
          <div>
            <div className="t-eyebrow">{t('Quen somos', 'Quiénes somos')}</div>
            <h2 className="t-h2" style={{ marginTop: 12 }}>{t('Familias que suman polo colexio', 'Familias que suman por el colegio')}</h2>
            <p className="t-body" style={{ marginTop: 16, fontSize: 17 }}>
              {t('A ANPA Quintán é a asociación de nais e pais do CEIP Pedro Barrié de la Maza. Xestionamos servizos esenciais para conciliar —comedor, madrugadoras e extraescolares— e colaboramos co centro en actividades, festas e melloras para o alumnado.', 'La ANPA Quintán es la asociación de madres y padres del CEIP Pedro Barrié de la Maza. Gestionamos servicios esenciales para conciliar —comedor, madrugadores y extraescolares— y colaboramos con el centro en actividades, fiestas y mejoras para el alumnado.')}
            </p>
            <div style={{ display: 'flex', gap: 28, marginTop: 24, flexWrap: 'wrap' }}>
              {[['+220', t('familias socias', 'familias socias')], ['18', t('actividades', 'actividades')], ['25', t('anos de historia', 'años de historia')]].map(([n, l]) => (
                <div key={l}><div className="stat-num">{n}</div><div className="t-small">{l}</div></div>
              ))}
            </div>
            <div style={{ marginTop: 26 }}><a href="#/quen"><Btn kind="secondary" iconRight="arrow">{t('Coñece a ANPA', 'Conoce la ANPA')}</Btn></a></div>
          </div>
        </div>
      </section>

      {/* novas */}
      <section className="wrap section-sm">
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 26, gap: 16 }}>
          <div><div className="t-eyebrow">{t('Novas e avisos', 'Noticias y avisos')}</div><h2 className="t-h2" style={{ marginTop: 10 }}>{t('Últimas novidades', 'Últimas novedades')}</h2></div>
          <a href="#/novas" className="hide-720"><Btn kind="ghost" iconRight="arrow">{t('Ver todas as novas', 'Ver todas las noticias')}</Btn></a>
        </div>
        <div className="news-grid">
          {items.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} /></a>
          )}
        </div>
      </section>

      {/* contacto */}
      <section className="wrap section-sm">
        <div className="cta-band">
          <div>
            <h2 className="t-h2" style={{ color: '#fff' }}>{t('Tes algunha dúbida?', '¿Tienes alguna duda?')}</h2>
            <p style={{ marginTop: 12, fontSize: 17, color: 'rgba(255,255,255,.85)', maxWidth: 440 }}>{t('Dúbidas de comedor, altas e baixas de servizos ou propostas para a ANPA: escríbenos e respondémosche en horario escolar.', 'Dudas de comedor, altas y bajas de servicios o propuestas para la ANPA: escríbenos y te respondemos en horario escolar.')}</p>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 12, marginTop: 24 }}>
              <a href="#/contacto"><Btn kind="accent" icon="mail">{t('Formulario de contacto', 'Formulario de contacto')}</Btn></a>
              <a href="https://www.facebook.com/profile.php?id=100063592357611" target="_blank" rel="noopener"><Btn kind="secondary" icon="facebook">Facebook</Btn></a>
            </div>
          </div>
          <div style={{ background: 'rgba(255,255,255,.1)', borderRadius: 'var(--r-lg)', padding: 22, border: '1px solid rgba(255,255,255,.16)' }}>
            {[['mail', t('Correo', 'Correo'), 'info@anpaquintan.org'], ['pin', t('Onde', 'Dónde'), 'CEIP P. Barrié · Mondego, Sada'], ['clock', t('Atención', 'Atención'), t('Luns de 16:00 a 17:30', 'Lunes de 16:00 a 17:30')]].map(([ic, k, v]) => (
              <div key={k} style={{ display: 'flex', gap: 12, alignItems: 'center', padding: '10px 0' }}>
                <Icon name={ic} style={{ width: 20, height: 20, color: 'var(--gold)' }} />
                <div><div style={{ fontSize: 12, color: 'rgba(255,255,255,.6)' }}>{k}</div><div style={{ fontWeight: 700, color: '#fff' }}>{v}</div></div>
              </div>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}

/* ================= QUEN SOMOS ================= */
function QuenPage() {
  const fai = [
    { icon: 'utensils', tone: 'blue', ti: t('Xestiona servizos', 'Gestiona servicios'), d: t('Comedor, madrugadoras e extraescolares para axudar á conciliación.', 'Comedor, madrugadores y extraescolares para ayudar a la conciliación.') },
    { icon: 'star', tone: 'gold', ti: t('Organiza actividades', 'Organiza actividades'), d: t('Festas, obradoiros e celebracións ao longo do curso.', 'Fiestas, talleres y celebraciones a lo largo del curso.') },
    { icon: 'users', tone: 'green', ti: t('Representa ás familias', 'Representa a las familias'), d: t('Levamos a voz das familias ao Consello Escolar.', 'Llevamos la voz de las familias al Consejo Escolar.') },
    { icon: 'heart', tone: 'coral', ti: t('Mellora o centro', 'Mejora el centro'), d: t('Colaboramos en equipamentos e proxectos para o alumnado.', 'Colaboramos en equipamientos y proyectos para el alumnado.') },
  ];
  const xunta = [[t('Presidencia', 'Presidencia'), 'Miguel Picado Filgueira'], [t('Vicepresidencia Primeira', 'Vicepresidencia Primera'), 'Susana'], [t('Vicepresidencia Segunda', 'Vicepresidencia Segunda'), 'Luciana'], [t('Secretaría de Organización', 'Secretaría de Organización'), 'Rosa'], [t('Tesourería', 'Tesorería'), 'Adriana'], [t('Vogal', 'Vocal'), 'Marta'], [t('Vogal', 'Vocal'), 'Natalia']];
  return (
    <div>
      <SitePageHero eyebrow={t('A asociación', 'La asociación')} title={t('Quen somos', 'Quiénes somos')} sub={t('Somos as familias do CEIP Pedro Barrié de la Maza, organizadas para mellorar a vida escolar das nosas crianzas.', 'Somos las familias del CEIP Pedro Barrié de la Maza, organizadas para mejorar la vida escolar de nuestras criaturas.')} />
      <section className="wrap section">
        <div className="grid-2">
          <div>
            <div className="t-eyebrow">{t('A nosa misión', 'Nuestra misión')}</div>
            <h2 className="t-h2" style={{ marginTop: 12 }}>{t('Unha comunidade educativa que rema na mesma dirección', 'Una comunidad educativa que rema en la misma dirección')}</h2>
            <p className="t-body" style={{ marginTop: 16 }}>{t('A ANPA Quintán é unha entidade sen ánimo de lucro formada polas familias do alumnado do CEIP Pedro Barrié de la Maza, en Mondego (Sada). O noso obxectivo é colaborar co centro para ofrecer servizos de calidade e fomentar a participación das familias.', 'La ANPA Quintán es una entidad sin ánimo de lucro formada por las familias del alumnado del CEIP Pedro Barrié de la Maza, en Mondego (Sada). Nuestro objetivo es colaborar con el centro para ofrecer servicios de calidad y fomentar la participación de las familias.')}</p>
            <p className="t-body" style={{ marginTop: 14 }}>{t('Traballamos de forma voluntaria e aberta: calquera familia socia pode propoñer ideas, participar nas comisións ou formar parte da xunta directiva.', 'Trabajamos de forma voluntaria y abierta: cualquier familia socia puede proponer ideas, participar en las comisiones o formar parte de la junta directiva.')}</p>
            <div style={{ marginTop: 24 }}><a href="#/contacto"><Btn kind="primary" icon="users">{t('Asóciate á ANPA', 'Asóciate a la ANPA')}</Btn></a></div>
          </div>
          <Photo label={t('reunión de familias / asemblea', 'reunión de familias / asamblea')} h={340} />
        </div>
      </section>
      <section style={{ background: 'var(--paper)' }}>
        <div className="wrap section">
          <div style={{ textAlign: 'center', maxWidth: 560, margin: '0 auto 36px' }}>
            <div className="t-eyebrow">{t('O noso labor', 'Nuestra labor')}</div>
            <h2 className="t-h2" style={{ marginTop: 10 }}>{t('Que fai a ANPA polas familias e o centro', 'Qué hace la ANPA por las familias y el centro')}</h2>
          </div>
          <div className="svc-grid">
            {fai.map((f, i) => (
              <div key={i} style={{ textAlign: 'center', padding: 14 }}>
                <div className={`svc-ico ic-${f.tone}`} style={{ margin: '0 auto 14px' }}><Icon name={f.icon} /></div>
                <h3 className="t-h3" style={{ fontSize: 18 }}>{f.ti}</h3>
                <p className="t-body" style={{ fontSize: 14.5, marginTop: 8 }}>{f.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>
      <section className="wrap section">
        <div className="t-eyebrow">{t('A xunta directiva', 'La junta directiva')}</div>
        <h2 className="t-h2" style={{ marginTop: 10, marginBottom: 8 }}>{t('Quen move a ANPA', 'Quién mueve la ANPA')}</h2>
        <p className="t-body" style={{ marginBottom: 28 }}>{t('En total somos 7 persoas voluntarias.', 'En total somos 7 personas voluntarias.')}</p>
        <div className="grid-3">
          {xunta.map(([role, name], i) => (
            <div key={i} className="card" style={{ padding: 18, display: 'flex', alignItems: 'center', gap: 15 }}>
              <div className="photo" style={{ width: 60, height: 60, borderRadius: '50%', flexShrink: 0 }}><span style={{ fontFamily: 'var(--font-display)', fontWeight: 800, color: 'var(--blue-700)', fontSize: 20 }}>{name.split(' ').map(w => w[0]).slice(0, 2).join('')}</span></div>
              <div><div className="t-meta" style={{ color: 'var(--green-600)' }}>{role}</div><div style={{ fontWeight: 700, fontSize: 16.5, color: 'var(--ink)' }}>{name}</div></div>
            </div>
          ))}
          <div className="card asemblea-card" style={{ gridColumn: 'span 2', padding: 18, display: 'flex', alignItems: 'center', gap: 15, background: 'var(--green-600)', border: 'none', color: '#fff' }}>
            <div style={{ width: 60, height: 60, borderRadius: '50%', background: 'rgba(255,255,255,.16)', display: 'grid', placeItems: 'center', flexShrink: 0 }}><Icon name="users" style={{ width: 28, height: 28, color: '#fff' }} /></div>
            <div>
              <div className="t-meta" style={{ color: 'var(--gold)' }}>{t('Órgano soberano', 'Órgano soberano')}</div>
              <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 20, color: '#fff', marginTop: 2 }}>{t('A Asemblea', 'La Asamblea')}</div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

/* ================= COMEDOR ================= */
function ComedorPage() {
  const menus = [[t('Xuño 2026', 'Junio 2026'), t('Menú actual', 'Menú actual'), 'pdf'], [t('Maio 2026', 'Mayo 2026'), t('Arquivo', 'Archivo'), 'pdf'], [t('Menú de adaptación', 'Menú de adaptación'), t('Infantil 3 anos', 'Infantil 3 años'), 'pdf'], [t('Menú de réxime', 'Menú de régimen'), t('Aleróxenos / dietas', 'Alérgenos / dietas'), 'pdf']];
  return (
    <div>
      <SitePageHero tone="green" eyebrow={t('Servizos · Comedor', 'Servicios · Comedor')} title={t('Comedor escolar', 'Comedor escolar')} sub={t('Comida caseira e equilibrada, elaborada na propia cociña do centro, con menús supervisados por nutricionista.', 'Comida casera y equilibrada, elaborada en la propia cocina del centro, con menús supervisados por nutricionista.')} />
      <section className="wrap section">
        <div className="with-aside">
          <div>
            <h2 className="t-h2">{t('Como funciona', 'Cómo funciona')}</h2>
            <p className="t-body" style={{ marginTop: 14 }}>{t('O comedor funciona de luns a venres durante todo o curso, en quenda única tras o remate das clases da mañá. Inclúe a comida e o tempo de lecer vixiado por persoal de coidado ata a recollida ou o inicio das extraescolares.', 'El comedor funciona de lunes a viernes durante todo el curso, en turno único tras el fin de las clases de la mañana. Incluye la comida y el tiempo de ocio vigilado por personal de cuidado hasta la recogida o el inicio de las extraescolares.')}</p>
            <div className="grid-3" style={{ marginTop: 22 }}>
              {[['calendar', t('Fixo ou esporádico', 'Fijo o esporádico'), t('Mes completo ou días soltos', 'Mes completo o días sueltos')], ['shield', t('Persoal de coidado', 'Personal de cuidado'), t('Ratio adaptada por idade', 'Ratio adaptada por edad')], ['heart', t('Menú adaptado', 'Menú adaptado'), t('Alerxias e dietas especiais', 'Alergias y dietas especiales')]].map(([ic, ti, d], i) => (
                <div key={i} className="card" style={{ padding: 16 }}><Icon name={ic} style={{ width: 22, height: 22, color: 'var(--green-600)' }} /><div style={{ fontWeight: 700, fontSize: 15, marginTop: 8 }}>{ti}</div><div className="t-small">{d}</div></div>
              ))}
            </div>
            <h2 className="t-h2" style={{ marginTop: 40 }}>{t('Menús mensuais', 'Menús mensuales')}</h2>
            <p className="t-body" style={{ marginTop: 10 }}>{t('Descarga o menú en PDF. Publicámolo a primeiros de cada mes.', 'Descarga el menú en PDF. Lo publicamos a primeros de cada mes.')}</p>
            <div className="doc-grid" style={{ gridTemplateColumns: 'repeat(2,1fr)', marginTop: 18 }}>
              {menus.map(([ti, d, type], i) => <DocRow key={i} type={type} title={ti} desc={d} />)}
            </div>
            <div style={{ marginTop: 36, background: 'var(--gold-100)', border: '1px solid var(--gold)', borderRadius: 'var(--r-lg)', padding: 24, display: 'flex', gap: 18, flexWrap: 'wrap' }}>
              <div className="svc-ico ic-gold" style={{ marginBottom: 0, flexShrink: 0 }}><Icon name="euro" /></div>
              <div style={{ flex: 1, minWidth: 220 }}>
                <h3 className="t-h3" style={{ fontSize: 19, color: 'var(--gold-600)' }}>{t('Axudas e becas de comedor', 'Ayudas y becas de comedor')}</h3>
                <p className="t-body" style={{ marginTop: 8, fontSize: 15 }}>{t('A Xunta e o concello convocan subvencións de comedor segundo a renda familiar. Axudámosche a tramitar a solicitude e a reunir a documentación.', 'La Xunta y el ayuntamiento convocan subvenciones de comedor según la renta familiar. Te ayudamos a tramitar la solicitud y a reunir la documentación.')}</p>
                <div style={{ marginTop: 14 }}><a href="#/documentos"><Btn kind="accent" size="sm" iconRight="arrow">{t('Ver convocatoria de becas', 'Ver convocatoria de becas')}</Btn></a></div>
              </div>
            </div>
          </div>
          <aside className="aside">
            <InfoBox title={t('Información rápida', 'Información rápida')} rows={[{ icon: 'clock', k: t('Horario', 'Horario'), v: '14:00 – 16:00 h' }, { icon: 'euro', k: t('Prezo fixo (estimado)', 'Precio fijo (estimado)'), v: t('4,50 € / día', '4,50 € / día') }, { icon: 'calendar', k: t('Días soltos', 'Días sueltos'), v: t('5,50 € / día', '5,50 € / día') }, { icon: 'mail', k: t('Dúbidas de comedor', 'Dudas de comedor'), v: 'comedor.anpa@gmail.com' }]} />
            <Photo label={t('comedor escolar', 'comedor escolar')} h={180} />
            <div className="card" style={{ padding: 20 }}>
              <div className="t-meta" style={{ color: 'var(--green-600)' }}>{t('Normas básicas', 'Normas básicas')}</div>
              <div style={{ marginTop: 12, display: 'flex', flexDirection: 'column', gap: 11 }}>
                {[t('Avisar das faltas antes das 9:30 h', 'Avisar de las faltas antes de las 9:30 h'), t('Comunicar alerxias por escrito', 'Comunicar alergias por escrito'), t('Recollida puntual ás 16:00 h', 'Recogida puntual a las 16:00 h')].map((n, i) => (
                  <div key={i} style={{ display: 'flex', gap: 10, alignItems: 'flex-start' }}><Icon name="check" style={{ width: 18, height: 18, color: 'var(--green-600)', flexShrink: 0, marginTop: 1 }} /><span style={{ fontSize: 14.5, color: 'var(--ink-soft)' }}>{n}</span></div>
                ))}
              </div>
            </div>
          </aside>
        </div>
      </section>
    </div>
  );
}

/* ================= MADRUGADORAS ================= */
function MadrugadorasPage() {
  const pasos = [[t('Descarga o formulario', 'Descarga el formulario'), t('Atópalo na sección Documentos → Madrugadoras.', 'Lo encuentras en la sección Documentos → Madrugadores.')], [t('Cobre os datos', 'Rellena los datos'), t('Indica os días e o tipo de inscrición (fixa ou esporádica).', 'Indica los días y el tipo de inscripción (fija o esporádica).')], [t('Entrega na ANPA', 'Entrega en la ANPA'), t('Por correo electrónico ou no buzón da asociación.', 'Por correo electrónico o en el buzón de la asociación.')], [t('Confirmación', 'Confirmación'), t('Recibirás a praza confirmada antes do inicio do servizo.', 'Recibirás la plaza confirmada antes del inicio del servicio.')]];
  return (
    <div>
      <SitePageHero eyebrow={t('Servizos · Madrugadoras', 'Servicios · Madrugadores')} title={t('Madrugadoras · Plan Madruga', 'Madrugadores · Plan Madruga')} sub={t('Acollida matinal desde as 7:30 h para que poidas conciliar coa túa xornada laboral, con almorzo opcional.', 'Acogida matinal desde las 7:30 h para que puedas conciliar con tu jornada laboral, con desayuno opcional.')} />
      <section className="wrap section">
        <div className="with-aside">
          <div>
            <h2 className="t-h2">{t('O servizo', 'El servicio')}</h2>
            <p className="t-body" style={{ marginTop: 14 }}>{t('O servizo de madrugadoras ofrece acollida temperá no centro antes do comezo das clases. As crianzas pasan a mañá en xogo tranquilo e supervisado, cun almorzo saudable opcional, ata a entrada ás aulas. Aberto a todo o alumnado de infantil e primaria.', 'El servicio de madrugadores ofrece acogida temprana en el centro antes del comienzo de las clases. Las criaturas pasan la mañana en juego tranquilo y supervisado, con un desayuno saludable opcional, hasta la entrada a las aulas. Abierto a todo el alumnado de infantil y primaria.')}</p>
            <div className="grid-2" style={{ marginTop: 24, alignItems: 'stretch' }}>
              {[['sunrise', t('Entrada flexible', 'Entrada flexible'), t('Desde as 7:30 ata as 9:00 h', 'Desde las 7:30 hasta las 9:00 h')], ['utensils', t('Almorzo opcional', 'Desayuno opcional'), t('Saudable e equilibrado', 'Saludable y equilibrado')], ['shield', t('Persoal de coidado', 'Personal de cuidado'), t('Acompañamento ás aulas', 'Acompañamiento a las aulas')], ['calendar', t('Fixo ou por días', 'Fijo o por días'), t('Adáptase á túa semana', 'Se adapta a tu semana')]].map(([ic, ti, d], i) => (
                <div key={i} className="card" style={{ padding: 18, display: 'flex', gap: 13, alignItems: 'flex-start' }}><div className="svc-ico ic-gold" style={{ width: 44, height: 44, marginBottom: 0, borderRadius: 12, flexShrink: 0 }}><Icon name={ic} style={{ width: 22, height: 22 }} /></div><div><div style={{ fontWeight: 700, fontSize: 15.5 }}>{ti}</div><div className="t-small">{d}</div></div></div>
              ))}
            </div>
            <h2 className="t-h2" style={{ marginTop: 40 }}>{t('Como inscribirse', 'Cómo inscribirse')}</h2>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 14, marginTop: 18 }}>
              {pasos.map(([ti, d], i) => (
                <div key={i} style={{ display: 'flex', gap: 16, alignItems: 'flex-start' }}><div style={{ width: 34, height: 34, borderRadius: '50%', background: 'var(--blue-700)', color: '#fff', display: 'grid', placeItems: 'center', fontWeight: 800, fontFamily: 'var(--font-display)', flexShrink: 0 }}>{i + 1}</div><div><div style={{ fontWeight: 700, fontSize: 16.5 }}>{ti}</div><div className="t-body" style={{ fontSize: 15, marginTop: 2 }}>{d}</div></div></div>
              ))}
            </div>
            <div style={{ marginTop: 24 }}><a href="#/documentos"><Btn kind="primary" icon="download">{t('Descargar inscrición', 'Descargar inscripción')}</Btn></a></div>
          </div>
          <aside className="aside">
            <InfoBox title={t('Información rápida', 'Información rápida')} rows={[{ icon: 'clock', k: t('Horario', 'Horario'), v: '7:30 – 9:00 h' }, { icon: 'euro', k: t('Fixo mensual', 'Fijo mensual'), v: t('30 € / mes', '30 € / mes') }, { icon: 'calendar', k: t('Día solto', 'Día suelto'), v: t('4 € / día', '4 € / día') }, { icon: 'mail', k: t('Contacto', 'Contacto'), v: 'info@anpaquintan.org' }]} />
            <Photo label={t('aula de madrugadoras', 'aula de madrugadores')} h={180} />
            <div className="card" style={{ padding: 20 }}>
              <div className="t-meta" style={{ color: 'var(--gold-600)' }}>{t('Normas básicas', 'Normas básicas')}</div>
              <div style={{ marginTop: 12, display: 'flex', flexDirection: 'column', gap: 11 }}>
                {[t('Entrada pola porta lateral do patio', 'Entrada por la puerta lateral del patio'), t('Inscrición previa obrigatoria', 'Inscripción previa obligatoria'), t('Almorzo ata as 8:45 h', 'Desayuno hasta las 8:45 h')].map((n, i) => (
                  <div key={i} style={{ display: 'flex', gap: 10, alignItems: 'flex-start' }}><Icon name="check" style={{ width: 18, height: 18, color: 'var(--gold-600)', flexShrink: 0, marginTop: 1 }} /><span style={{ fontSize: 14.5, color: 'var(--ink-soft)' }}>{n}</span></div>
                ))}
              </div>
            </div>
          </aside>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { HomePage, QuenPage, ComedorPage, MadrugadorasPage, useWpPosts });