/* ANPA Quintán — Iconos + compoñentes compartidos.
   Exporta todo a window para que home.jsx e pages.jsx os usen. */

/* ---------------- Iconos (stroke, 24x24) ---------------- */
const PATHS = {
  utensils: <><path d="M4 3v7a2 2 0 0 0 2 2h0a2 2 0 0 0 2-2V3M6 3v18"/><path d="M16 3c-1.5 0-2.5 1.8-2.5 4.5S14.5 12 16 12v9"/></>,
  sunrise: <><path d="M12 3v3M5.6 9.6l-1.4-1.4M18.4 9.6l1.4-1.4M3 18h18M7 18a5 5 0 0 1 10 0"/><path d="M22 22H2"/></>,
  activity: <><circle cx="12" cy="12" r="9"/><path d="M12 3a9 9 0 0 0 0 18M3.5 9h17M3.5 15h17"/></>,
  doc: <><path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z"/><path d="M14 3v5h5M9 13h6M9 17h6"/></>,
  bell: <><path d="M18 8a6 6 0 0 0-12 0c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.7 21a2 2 0 0 1-3.4 0"/></>,
  info: <><circle cx="12" cy="12" r="9"/><path d="M12 11v5M12 7.5h.01"/></>,
  arrow: <path d="M5 12h14M13 6l6 6-6 6"/>,
  arrowUpRight: <path d="M7 17 17 7M9 7h8v8"/>,
  mail: <><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/></>,
  phone: <path d="M5 4h4l2 5-3 2a12 12 0 0 0 5 5l2-3 5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2z"/>,
  pin: <><path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0z"/><circle cx="12" cy="10" r="3"/></>,
  clock: <><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></>,
  euro: <><path d="M16 6.5A6 6 0 0 0 7 11M16 17.5A6 6 0 0 1 7 13M4 10h8M4 14h8"/></>,
  calendar: <><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M3 9h18M8 3v4M16 3v4"/></>,
  check: <path d="M5 12.5 10 17 19 7"/>,
  users: <><circle cx="9" cy="8" r="3.2"/><path d="M3.5 20a5.5 5.5 0 0 1 11 0M16 5.5a3 3 0 0 1 0 5.8M18 20a5 5 0 0 0-3-4.6"/></>,
  menu: <path d="M4 7h16M4 12h16M4 17h16"/>,
  instagram: <><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><path d="M17.5 6.5h.01"/></>,
  facebook: <path d="M14 8.5h2.5V5H14c-2 0-3.5 1.5-3.5 3.5V11H8v3.5h2.5V21H14v-6.5h2.5L17 11h-3V9c0-.3.2-.5.5-.5z"/>,
  external: <><path d="M14 4h6v6M20 4l-9 9"/><path d="M18 14v4a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4"/></>,
  download: <path d="M12 4v11m0 0 4-4m-4 4-4-4M5 19h14"/>,
  chevron: <path d="m6 9 6 6 6-6"/>,
  heart: <path d="M12 20s-7-4.5-9.5-9C1 8 2.5 4.5 6 4.5c2 0 3 1.3 4 2.7 1-1.4 2-2.7 4-2.7 3.5 0 5 3.5 3.5 6.5C19 15.5 12 20 12 20z"/>,
  shield: <><path d="M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6z"/><path d="m9 12 2 2 4-4"/></>,
  book: <><path d="M4 5a2 2 0 0 1 2-2h13v16H6a2 2 0 0 0-2 2z"/><path d="M4 19a2 2 0 0 1 2-2h13"/></>,
  star: <path d="M12 3.5l2.6 5.3 5.9.9-4.3 4.1 1 5.8L12 17l-5.2 2.6 1-5.8L3.5 9.7l5.9-.9z"/>,
  palette: <><circle cx="12" cy="12" r="9"/><circle cx="8.5" cy="10" r="1.1" fill="currentColor" stroke="none"/><circle cx="12" cy="8.5" r="1.1" fill="currentColor" stroke="none"/><circle cx="15.5" cy="10" r="1.1" fill="currentColor" stroke="none"/><path d="M12 21c2 0 1-2 2.5-2.5S18 17 18 15"/></>,
  ball: <><circle cx="12" cy="12" r="9"/><path d="M12 3v18M3 12h18M6 6l12 12M18 6 6 18"/></>,
  send: <path d="M21 4 3 11l7 2 2 7z"/>,
};
function Icon({ name, style }) {
  return (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.9"
      strokeLinecap="round" strokeLinejoin="round" style={style}>
      {PATHS[name] || null}
    </svg>
  );
}

/* ---------------- Logo (imaxe orixinal da ANPA) ---------------- */
function LogoMark({ size = 40, chip }) {
  const src = (typeof window !== 'undefined' && window.LOGO_SRC) || 'logo-anpa.png';
  const im = <img src={src} alt="ANPA Quintán" width={size} height={size} style={{ display: 'block', objectFit: 'contain' }} />;
  if (chip) {
    const pad = Math.round(size * 0.16);
    return (
      <div style={{ background: '#fff', borderRadius: Math.round(size * 0.28), padding: pad, display: 'inline-flex', boxShadow: '0 1px 3px rgba(0,0,0,.12)' }}>
        <img src={src} alt="ANPA Quintán" width={size} height={size} style={{ display: 'block', objectFit: 'contain' }} />
      </div>
    );
  }
  return im;
}
function Wordmark({ light }) {
  const c = light ? '#fff' : 'var(--blue-900)';
  const s = light ? 'rgba(255,255,255,.65)' : 'var(--ink-mute)';
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 11 }}>
      <LogoMark size={42} chip={light} />
      <div style={{ lineHeight: 1.1 }}>
        <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 20, color: c, letterSpacing: '-.01em' }}>ANPA Quintán</div>
        <div style={{ fontSize: 11.5, fontWeight: 600, color: s, letterSpacing: '.01em' }}>CEIP Pedro Barrié de la Maza</div>
      </div>
    </div>
  );
}

/* ---------------- Botón ---------------- */
function Btn({ kind = 'primary', size, children, icon, iconRight }) {
  const cls = `btn btn-${kind}${size ? ' btn-' + size : ''}`;
  return (
    <span className={cls}>
      {icon && <Icon name={icon} />}
      {children}
      {iconRight && <Icon name={iconRight} />}
    </span>
  );
}

/* ---------------- Header desktop ---------------- */
const NAV = ['Inicio', 'Quen somos', 'Servizos', 'Documentos', 'Novas', 'Contacto'];
function Header({ active = 'Inicio', light }) {
  return (
    <header style={{
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      padding: '18px 40px', background: light ? 'transparent' : 'var(--paper)',
      borderBottom: light ? '1px solid rgba(255,255,255,.14)' : '1px solid var(--line-soft)',
    }}>
      <Wordmark light={light} />
      <nav style={{ display: 'flex', alignItems: 'center', gap: 28 }}>
        {NAV.map(n => (
          <span key={n} style={{
            fontSize: 15.5, fontWeight: active === n ? 700 : 600,
            color: light ? (active === n ? '#fff' : 'rgba(255,255,255,.8)') : (active === n ? 'var(--blue-700)' : 'var(--ink-soft)'),
            display: 'flex', alignItems: 'center', gap: 4,
            borderBottom: active === n && !light ? '2px solid var(--gold)' : '2px solid transparent', paddingBottom: 3,
          }}>
            {n}{n === 'Servizos' && <Icon name="chevron" style={{ width: 15, height: 15, opacity: .7 }} />}
          </span>
        ))}
        <Btn kind={light ? 'accent' : 'primary'} size="sm" icon="mail">Contacto</Btn>
      </nav>
    </header>
  );
}

/* ---------------- Header móbil ---------------- */
function MobileHeader({ light }) {
  return (
    <header style={{
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      padding: '14px 18px', background: light ? 'transparent' : 'var(--paper)',
      borderBottom: light ? '1px solid rgba(255,255,255,.14)' : '1px solid var(--line-soft)',
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 9 }}>
        <LogoMark size={36} chip={light} />
        <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 17, color: light ? '#fff' : 'var(--blue-900)' }}>ANPA Quintán</div>
      </div>
      <div style={{ width: 42, height: 42, borderRadius: 11, background: light ? 'rgba(255,255,255,.16)' : 'var(--bg)', display: 'grid', placeItems: 'center', color: light ? '#fff' : 'var(--blue-700)' }}>
        <Icon name="menu" style={{ width: 22, height: 22 }} />
      </div>
    </header>
  );
}

/* ---------------- Footer ---------------- */
function Footer() {
  const col = (title, items) => (
    <div>
      <div style={{ fontSize: 13, fontWeight: 700, letterSpacing: '.1em', textTransform: 'uppercase', color: 'rgba(255,255,255,.5)', marginBottom: 14 }}>{title}</div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
        {items.map(i => <span key={i} style={{ fontSize: 15, color: 'rgba(255,255,255,.82)' }}>{i}</span>)}
      </div>
    </div>
  );
  return (
    <footer style={{ background: 'var(--blue-900)', color: '#fff', padding: '46px 40px 26px' }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr 1.2fr', gap: 40, paddingBottom: 34, borderBottom: '1px solid rgba(255,255,255,.12)' }}>
        <div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 11, marginBottom: 14 }}>
            <LogoMark size={44} chip />
            <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 19 }}>ANPA Quintán</div>
          </div>
          <p style={{ fontSize: 14.5, color: 'rgba(255,255,255,.7)', lineHeight: 1.6, maxWidth: 280 }}>
            Asociación de Nais e Pais do CEIP Pedro Barrié de la Maza. Mondego — Sada, A Coruña.
          </p>
          <div style={{ display: 'flex', gap: 10, marginTop: 18 }}>
            {['facebook', 'instagram', 'mail'].map(s => (
              <div key={s} style={{ width: 40, height: 40, borderRadius: 11, background: 'rgba(255,255,255,.1)', display: 'grid', placeItems: 'center', color: '#fff' }}>
                <Icon name={s} style={{ width: 19, height: 19 }} />
              </div>
            ))}
          </div>
        </div>
        {col('Navegación', ['Inicio', 'Quen somos', 'Documentos', 'Novas e avisos', 'Contacto'])}
        {col('Servizos', ['Comedor escolar', 'Madrugadoras', 'Actividades extraescolares', 'Campamentos'])}
        <div>
          <div style={{ fontSize: 13, fontWeight: 700, letterSpacing: '.1em', textTransform: 'uppercase', color: 'rgba(255,255,255,.5)', marginBottom: 14 }}>Contacto</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            <span style={{ fontSize: 15, color: 'rgba(255,255,255,.82)', display: 'flex', gap: 9, alignItems: 'center' }}><Icon name="mail" style={{ width: 17, height: 17, color: 'var(--gold)' }} />anpaquintan@gmail.com</span>
            <span style={{ fontSize: 15, color: 'rgba(255,255,255,.82)', display: 'flex', gap: 9, alignItems: 'center' }}><Icon name="pin" style={{ width: 17, height: 17, color: 'var(--gold)' }} />Lugar de Mondego, s/n · Sada</span>
            <span style={{ fontSize: 14, color: 'rgba(255,255,255,.7)', display: 'flex', gap: 9, alignItems: 'center' }}><Icon name="external" style={{ width: 17, height: 17, color: 'var(--gold)' }} />Web do centro (Xunta)</span>
          </div>
        </div>
      </div>
      <div style={{ display: 'flex', justifyContent: 'space-between', paddingTop: 20, fontSize: 13, color: 'rgba(255,255,255,.55)' }}>
        <span>© 2026 ANPA Quintán · CEIP Pedro Barrié de la Maza</span>
        <span>Aviso legal · Privacidade</span>
      </div>
    </footer>
  );
}

/* ---------------- Bloques reutilizables ---------------- */
function Photo({ label, h = 200, style }) {
  return (
    <div className="photo" style={{ height: h, ...style }}>
      <span className="photo-tag">⬡ FOTO · {label}</span>
    </div>
  );
}
function ServiceCard({ icon, tone, title, desc, tag }) {
  return (
    <div className="svc-card">
      <div className={`svc-arrow`}><Icon name="arrow" style={{ width: 16, height: 16 }} /></div>
      <div className={`svc-ico ic-${tone}`}><Icon name={icon} /></div>
      {tag && <div style={{ marginBottom: 8 }}><span className={`chip chip-${tone}`}>{tag}</span></div>}
      <h3>{title}</h3>
      <p className="t-body" style={{ fontSize: 15, marginTop: 6 }}>{desc}</p>
    </div>
  );
}
function NewsCard({ tone = 'blue', tag, date, title, excerpt, image, h = 150 }) {
  return (
    <div className="news-card">
      {image
        ? <img src={image} alt={title} loading="lazy" style={{ width: '100%', height: h, objectFit: 'cover', display: 'block' }} />
        : <Photo label={tag.toLowerCase()} h={h} style={{ borderRadius: 0 }} />}
      <div className="nc-body">
        <div style={{ display: 'flex', gap: 8, alignItems: 'center', marginBottom: 10 }}>
          <span className={`chip chip-${tone}`}>{tag}</span>
          <span className="t-meta">{date}</span>
        </div>
        <h3>{title}</h3>
        <p className="t-body" style={{ fontSize: 14.5, marginTop: 7 }}>{excerpt}</p>
        <div style={{ marginTop: 14, fontSize: 14, fontWeight: 700, color: 'var(--blue-700)', display: 'flex', alignItems: 'center', gap: 6 }}>
          Ler máis <Icon name="arrow" style={{ width: 15, height: 15 }} />
        </div>
      </div>
    </div>
  );
}
function DocRow({ type = 'pdf', title, desc, meta }) {
  return (
    <div className="doc-row">
      <div className={`doc-ico ${type}`}>{type.toUpperCase()}</div>
      <div style={{ minWidth: 0 }}>
        <div style={{ fontWeight: 700, fontSize: 15.5, color: 'var(--ink)' }}>{title}</div>
        <div className="t-small" style={{ marginTop: 2 }}>{desc}{meta && <span style={{ color: 'var(--ink-mute)' }}> · {meta}</span>}</div>
      </div>
      <div className="doc-dl"><Icon name="download" style={{ width: 18, height: 18 }} /></div>
    </div>
  );
}
function InfoBox({ title, rows }) {
  return (
    <div className="infobox">
      {title && <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 19, marginBottom: 6, color: '#fff' }}>{title}</div>}
      {rows.map((r, i) => (
        <div className="ib-row" key={i}>
          <div className="ib-ico"><Icon name={r.icon} /></div>
          <div>
            <div className="ib-k">{r.k}</div>
            <div className="ib-v">{r.v}</div>
          </div>
        </div>
      ))}
    </div>
  );
}
/* Cabeceira de páxina interior (banda de cor) */
function PageHero({ active, eyebrow, title, sub, tone = 'blue' }) {
  const bg = tone === 'green' ? 'var(--green-600)' : 'var(--blue-700)';
  return (
    <div style={{ background: bg, color: '#fff' }}>
      <Header active={active} light />
      <div style={{ padding: '48px 40px 56px', position: 'relative', overflow: 'hidden' }}>
        <div style={{ position: 'absolute', right: -60, top: -40, width: 280, height: 280, borderRadius: '50%', background: 'rgba(255,255,255,.06)' }} />
        <div style={{ position: 'absolute', right: 120, bottom: -90, width: 200, height: 200, borderRadius: '50%', background: 'rgba(255,255,255,.05)' }} />
        <div style={{ position: 'relative', maxWidth: 720 }}>
          <div className="t-eyebrow" style={{ color: 'var(--gold)' }}>{eyebrow}</div>
          <h1 className="t-h1" style={{ color: '#fff', marginTop: 12, fontSize: 46 }}>{title}</h1>
          {sub && <p className="t-lead" style={{ color: 'rgba(255,255,255,.85)', marginTop: 14, maxWidth: 620 }}>{sub}</p>}
        </div>
      </div>
    </div>
  );
}
function Breadcrumb({ items }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 13, fontWeight: 600, color: 'rgba(255,255,255,.7)' }}>
      {items.map((it, i) => (
        <React.Fragment key={i}>
          <span>{it}</span>
          {i < items.length - 1 && <Icon name="arrow" style={{ width: 13, height: 13 }} />}
        </React.Fragment>
      ))}
    </div>
  );
}

/* ---------------- Footer móbil (compacto, 1 columna) ---------------- */
function MobileFooter() {
  return (
    <footer style={{ background: 'var(--blue-900)', color: '#fff', padding: '28px 18px 22px' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14 }}>
        <LogoMark size={38} chip />
        <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 17 }}>ANPA Quintán</div>
      </div>
      <p style={{ fontSize: 13.5, color: 'rgba(255,255,255,.7)', lineHeight: 1.55 }}>
        Asociación de Nais e Pais do CEIP Pedro Barrié de la Maza. Mondego — Sada, A Coruña.
      </p>
      <div style={{ display: 'flex', gap: 10, marginTop: 16 }}>
        {['facebook', 'instagram', 'mail'].map(s => (
          <div key={s} style={{ width: 40, height: 40, borderRadius: 11, background: 'rgba(255,255,255,.1)', display: 'grid', placeItems: 'center', color: '#fff' }}>
            <Icon name={s} style={{ width: 19, height: 19 }} />
          </div>
        ))}
      </div>
      <div style={{ display: 'flex', flexWrap: 'wrap', gap: '10px 16px', marginTop: 20, paddingTop: 18, borderTop: '1px solid rgba(255,255,255,.12)' }}>
        {['Inicio', 'Quen somos', 'Servizos', 'Documentos', 'Novas', 'Contacto'].map(n => (
          <span key={n} style={{ fontSize: 14, color: 'rgba(255,255,255,.82)', fontWeight: 600 }}>{n}</span>
        ))}
      </div>
      <div style={{ marginTop: 18, fontSize: 12, color: 'rgba(255,255,255,.5)' }}>© 2026 ANPA Quintán · Web do centro (Xunta)</div>
    </footer>
  );
}

Object.assign(window, {
  Icon, LogoMark, Wordmark, Btn, Header, MobileHeader, Footer, MobileFooter,
  Photo, ServiceCard, NewsCard, DocRow, InfoBox, PageHero, Breadcrumb, NAV,
});