/* global React */
const { useState } = React;

// ——— Logo ———
window.MartaLogo = function MartaLogo({ size = 18 }) {
  const d = Math.max(3, size * 0.22);
  return (
    <span style={{ display: 'inline-flex', alignItems: 'baseline', fontFamily: 'var(--font-editorial)', color: 'var(--fg-primary)', fontSize: size, letterSpacing: '-0.01em', lineHeight: 1 }}>
      Marta
      <span style={{ width: d, height: d, borderRadius: 999, background: 'var(--accent-marta)', margin: `0 ${d*0.7}px`, alignSelf: 'center', transform: `translateY(${d*0.1}px)` }} />
      news
    </span>
  );
};

// ——— Site Header ———
window.SiteHeader = function SiteHeader({ active = 'home' }) {
  const nav = [
    ['home', 'Inicio', '/'],
    ['om',   'Oriente Medio', '/oriente-medio/en-vivo'],
    ['ver',  'Verificador', '/verificador'],
    ['met',  'Metodología', '/metodologia'],
    ['arc',  'Archivo', '/archivo'],
  ];
  return (
    <header style={{ position: 'sticky', top: 0, zIndex: 10, background: 'rgba(5,5,5,0.88)', backdropFilter: 'blur(8px)', borderBottom: '1px solid var(--border-hairline)' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto', padding: '14px 28px', display: 'flex', alignItems: 'center', gap: 28 }}>
        <MartaLogo size={18} />
        <nav style={{ display: 'flex', gap: 20, marginLeft: 18, flex: 1 }}>
          {nav.map(([k, label]) => (
            <a key={k} href="#" style={{
              fontFamily: 'var(--font-ui)', fontSize: 13, fontWeight: active === k ? 600 : 500,
              color: active === k ? 'var(--fg-primary)' : 'var(--fg-secondary)',
              textDecoration: 'none', padding: '4px 0',
              borderBottom: active === k ? '1px solid var(--accent-amber)' : '1px solid transparent',
            }}>{label}</a>
          ))}
        </nav>
        <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--fg-tertiary)' }}>
          <span style={{ display: 'inline-block', width: 6, height: 6, borderRadius: 999, background: 'var(--accent-marta)', marginRight: 6 }} className="pulse" />
          EN VIVO · 14:32 UTC
        </span>
        <button style={{ fontFamily: 'var(--font-ui)', fontSize: 12, fontWeight: 600, padding: '7px 14px', borderRadius: 4, border: '1px solid var(--border-hairline)', background: 'transparent', color: 'var(--fg-primary)', cursor: 'pointer' }}>
          Suscribirse al boletín
        </button>
      </div>
    </header>
  );
};

// ——— Footer ———
window.SiteFooter = function SiteFooter() {
  return (
    <footer style={{ borderTop: '1px solid var(--border-hairline)', padding: '36px 28px 28px', marginTop: 64 }}>
      <div style={{ maxWidth: 1280, margin: '0 auto', display: 'grid', gridTemplateColumns: '2fr 1fr 1fr 1fr', gap: 40 }}>
        <div>
          <MartaLogo size={20} />
          <p style={{ fontFamily: 'var(--font-ui)', fontSize: 13, color: 'var(--fg-secondary)', lineHeight: 1.6, marginTop: 14, maxWidth: 320 }}>
            Observatorio geopolítico en tiempo real. Triangulación automática de fuentes, puntuación de veracidad, transparencia metodológica.
          </p>
          <p style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--fg-tertiary)', marginTop: 20 }}>
            Del arameo <em style={{ color: 'var(--accent-amber)', fontStyle: 'italic' }}>Marta</em> — "señora".
          </p>
        </div>
        {[
          ['OBSERVATORIOS', ['Oriente Medio', 'Europa Este', 'Sahel', 'Indo‑Pacífico']],
          ['PRODUCTO', ['Verificador', 'Boletín diario', 'API', 'RSS']],
          ['TRANSPARENCIA', ['Metodología', 'Fuentes consultadas', 'Disputas resueltas', 'Sobre Marta']],
        ].map(([h, items]) => (
          <div key={h}>
            <div style={{ fontFamily: 'var(--font-ui)', fontSize: 11, fontWeight: 700, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--fg-tertiary)', marginBottom: 14 }}>{h}</div>
            <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 8 }}>
              {items.map(i => <li key={i}><a href="#" style={{ fontFamily: 'var(--font-ui)', fontSize: 13, color: 'var(--fg-secondary)', textDecoration: 'none' }}>{i}</a></li>)}
            </ul>
          </div>
        ))}
      </div>
      <div style={{ maxWidth: 1280, margin: '40px auto 0', paddingTop: 20, borderTop: '1px solid var(--border-hairline)', display: 'flex', justifyContent: 'space-between', fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--fg-tertiary)' }}>
        <span>© 2026 Marta.news · Todos los derechos reservados</span>
        <span>ISSN 3045‑9921 · Madrid · Beirut</span>
      </div>
    </footer>
  );
};
