/* global React */

window.Hero = function Hero() {
  return (
    <section style={{ padding: '80px 28px 60px' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--fg-tertiary)', marginBottom: 28, display: 'flex', alignItems: 'center', gap: 10 }}>
          <span style={{ width: 6, height: 6, borderRadius: 999, background: 'var(--accent-marta)' }} className="pulse" />
          <span>OBSERVATORIO GEOPOLÍTICO · EST. 2026</span>
        </div>
        <h1 style={{
          fontFamily: 'var(--font-editorial)',
          fontSize: 'clamp(52px, 7.5vw, 96px)',
          lineHeight: 1.04,
          letterSpacing: '-0.025em',
          fontWeight: 400,
          color: 'var(--fg-primary)',
          margin: 0,
          maxWidth: 1100,
          textWrap: 'balance',
        }}>
          Marta pone orden<br />en tus <em style={{ color: 'var(--accent-amber)', fontStyle: 'italic' }}>noticias</em>.
        </h1>
        <p style={{ fontFamily: 'var(--font-ui)', fontSize: 18, color: 'var(--fg-secondary)', lineHeight: 1.55, maxWidth: 620, marginTop: 28 }}>
          Triangulación automática de fuentes — voz directa, estatal, occidental —
          puntuación de veracidad, y transparencia metodológica. Sin titulares sueltos.
        </p>
        <div style={{ display: 'flex', gap: 10, marginTop: 32 }}>
          <a href="#" style={{ fontFamily: 'var(--font-ui)', fontSize: 14, fontWeight: 600, padding: '12px 20px', borderRadius: 4, border: '1px solid var(--fg-primary)', background: 'var(--fg-primary)', color: '#050505', textDecoration: 'none' }}>Ir al observatorio en vivo →</a>
          <a href="#" style={{ fontFamily: 'var(--font-ui)', fontSize: 14, fontWeight: 600, padding: '12px 20px', borderRadius: 4, border: '1px solid var(--border-hairline)', color: 'var(--fg-primary)', textDecoration: 'none' }}>Cómo funciona la triangulación</a>
        </div>
      </div>
    </section>
  );
};

window.KpiStrip = function KpiStrip() {
  const kpis = [
    ['14 832', 'FUENTES VERIFICADAS', '+128 últ. 24h', 'up'],
    ['47',     'EVENTOS ACTIVOS',     '3 en desarrollo', 'amb'],
    ['0.87',   'VERACIDAD MEDIA',     '+0.02',           'up'],
    ['6',      'DISPUTAS ABIERTAS',   '+2',              'down'],
  ];
  const deltaColor = k => k === 'up' ? 'var(--veracity-high)' : k === 'down' ? 'var(--veracity-low)' : 'var(--accent-amber)';
  return (
    <section style={{ padding: '0 28px' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto', border: '1px solid var(--border-hairline)', borderRadius: 6, background: 'var(--bg-card)', display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)' }}>
        {kpis.map(([n, l, d, k], i) => (
          <div key={l} style={{ padding: '20px 24px', borderLeft: i === 0 ? 'none' : '1px solid var(--border-hairline)', display: 'flex', flexDirection: 'column', gap: 6 }}>
            <span style={{ fontFamily: 'var(--font-ui)', fontSize: 10, fontWeight: 700, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--fg-tertiary)' }}>{l}</span>
            <span style={{ fontFamily: 'var(--font-mono)', fontSize: 32, color: 'var(--fg-primary)', fontVariantNumeric: 'tabular-nums', letterSpacing: '-0.02em', lineHeight: 1 }}>{n}</span>
            <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: deltaColor(k) }}>{d}</span>
          </div>
        ))}
      </div>
    </section>
  );
};

window.ProductCards = function ProductCards() {
  const cards = [
    { tone: '#dc2626', tag: 'EN VIVO', live: true, title: 'Oriente Medio', sub: 'Observatorio geopolítico con triangulación de voces en tiempo real. Eventos minuto a minuto, fuentes visibles.', foot: '47 eventos · 312 fuentes', cta: 'Entrar' },
    { tone: '#fbbf24', tag: 'BETA',   live: false, title: 'Verificador',  sub: 'Pega una URL o un titular. Marta lo triangula con voces divergentes y te devuelve una puntuación y un veredicto.',     foot: 'entrada manual',         cta: 'Probar' },
    { tone: '#71717a', tag: 'PRONTO', live: false, title: 'Boletín diario', sub: 'Cada mañana a las 07:00 CET: los cinco eventos del día, ordenados por veracidad. Sin opinión, solo fuentes.', foot: 'email · RSS',            cta: 'Notificarme' },
  ];
  return (
    <section style={{ padding: '64px 28px 0' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 20 }}>
          <h2 style={{ fontFamily: 'var(--font-editorial)', fontSize: 32, color: 'var(--fg-primary)', margin: 0, fontWeight: 400, letterSpacing: '-0.01em' }}>Productos</h2>
          <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--fg-tertiary)', letterSpacing: '0.12em', textTransform: 'uppercase' }}>03 · en marcha</span>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12 }}>
          {cards.map(c => (
            <a key={c.title} href="#" style={{ background: 'var(--bg-card)', border: '1px solid var(--border-hairline)', borderRadius: 6, padding: 22, display: 'flex', flexDirection: 'column', gap: 14, textDecoration: 'none', color: 'inherit', minHeight: 240 }}>
              <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', color: c.tone, display: 'flex', alignItems: 'center', gap: 7 }}>
                <span className={c.live ? 'pulse' : ''} style={{ width: 6, height: 6, borderRadius: 999, background: c.tone }} />
                {c.tag}
              </span>
              <h3 style={{ fontFamily: 'var(--font-editorial)', fontSize: 28, color: 'var(--fg-primary)', margin: 0, fontWeight: 400, letterSpacing: '-0.01em' }}>{c.title}</h3>
              <p style={{ fontFamily: 'var(--font-ui)', fontSize: 14, color: 'var(--fg-secondary)', lineHeight: 1.55, margin: 0 }}>{c.sub}</p>
              <div style={{ marginTop: 'auto', paddingTop: 14, borderTop: '1px solid var(--border-hairline)', display: 'flex', justifyContent: 'space-between', fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--fg-tertiary)' }}>
                <span>{c.foot}</span>
                <span style={{ color: 'var(--accent-amber)' }}>{c.cta} →</span>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
};

window.FeedLatest = function FeedLatest() {
  const items = [
    ['high', '14:32 UTC', 'Oriente Medio',  'Ataque con drones sobre instalación energética en el sur del Líbano', '12 fuentes'],
    ['mid',  '13:58 UTC', 'Diplomacia',     'Negociaciones reanudadas en Doha tras 72 horas de silencio', '5 fuentes'],
    ['low',  '12:10 UTC', 'Oriente Medio',  'Cifra de bajas reportada varía según la fuente — disputa abierta', 'disputada · 9'],
    ['high', '10:45 UTC', 'Europa / Rusia', 'Sanciones: Bruselas extiende paquete energético hasta 2027', '8 fuentes'],
    ['high', '09:12 UTC', 'Sahel',          'Movimientos de tropas reportados cerca de la frontera malí', '6 fuentes'],
    ['mid',  '07:30 UTC', 'Asia‑Pacífico',  'Ejercicios navales conjuntos: Seúl y Tokio extienden a 72 horas', '4 fuentes'],
  ];
  const dotColor = { high: 'var(--veracity-high)', mid: 'var(--veracity-mid)', low: 'var(--veracity-low)' };
  return (
    <section style={{ padding: '56px 28px 0' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 20 }}>
          <h2 style={{ fontFamily: 'var(--font-editorial)', fontSize: 32, color: 'var(--fg-primary)', margin: 0, fontWeight: 400, letterSpacing: '-0.01em' }}>Últimos informes</h2>
          <a href="#" style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--accent-amber)', textDecoration: 'none', letterSpacing: '0.1em', textTransform: 'uppercase' }}>Ver archivo completo →</a>
        </div>
        <div style={{ border: '1px solid var(--border-hairline)', borderRadius: 6, overflow: 'hidden', background: 'var(--bg-canvas)' }}>
          {items.map((r, i) => (
            <a key={i} href="#" style={{
              display: 'grid',
              gridTemplateColumns: '12px 90px 140px 1fr 110px',
              alignItems: 'center', gap: 16,
              padding: '16px 20px',
              borderBottom: i === items.length - 1 ? 'none' : '1px solid var(--border-hairline)',
              textDecoration: 'none',
              color: 'inherit',
            }}
              onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-hover)'}
              onMouseLeave={e => e.currentTarget.style.background = 'transparent'}
            >
              <span style={{ width: 8, height: 8, borderRadius: 999, background: dotColor[r[0]] }} />
              <span style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--fg-tertiary)' }}>{r[1]}</span>
              <span style={{ fontFamily: 'var(--font-ui)', fontSize: 11, fontWeight: 600, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--fg-secondary)' }}>{r[2]}</span>
              <span style={{ fontFamily: 'var(--font-editorial)', fontSize: 18, color: 'var(--fg-primary)', lineHeight: 1.3, letterSpacing: '-0.005em' }}>{r[3]}</span>
              <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--fg-tertiary)', textAlign: 'right' }}>{r[4]}</span>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
};

window.MethodologyStrip = function MethodologyStrip() {
  const voices = [
    ['#dc2626', 'DIRECTA',     'Facciones, grupos armados, comunicados oficiales. Voz primera.'],
    ['#3b82f6', 'ESTATAL',     'Agencias estatales, gabinetes, ministerios. Voz institucional.'],
    ['#22c55e', 'OCCIDENTAL',  'Reuters, AP, AFP, BBC, NYT. Prensa de referencia.'],
    ['#fbbf24', 'OSINT',       'Geolocalización abierta, imágenes satelitales, analistas verificados.'],
    ['#a855f7', 'CONTRARIA',   'Medios alineados con otros bloques. Narrativas divergentes.'],
  ];
  return (
    <section style={{ padding: '72px 28px 0' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: 64, alignItems: 'start' }}>
          <div>
            <span style={{ fontFamily: 'var(--font-ui)', fontSize: 11, fontWeight: 700, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--accent-amber)' }}>Metodología</span>
            <h2 style={{ fontFamily: 'var(--font-editorial)', fontSize: 42, color: 'var(--fg-primary)', margin: '12px 0 20px', fontWeight: 400, letterSpacing: '-0.015em', lineHeight: 1.1 }}>
              La autoridad se demuestra<br />mostrando las <em style={{ color: 'var(--accent-amber)' }}>fuentes</em>.
            </h2>
            <p style={{ fontFamily: 'var(--font-ui)', fontSize: 15, color: 'var(--fg-secondary)', lineHeight: 1.6, maxWidth: 420 }}>
              Para cada evento, Marta clasifica cinco tipos de voz. Cuando las voces coinciden, la veracidad sube.
              Cuando divergen, queda marcada como <em style={{ color: 'var(--accent-amber)' }}>disputada</em> — nunca silenciada.
            </p>
          </div>
          <div style={{ border: '1px solid var(--border-hairline)', borderRadius: 6, background: 'var(--bg-card)', padding: '6px 0' }}>
            {voices.map(([c, label, desc]) => (
              <div key={label} style={{ display: 'grid', gridTemplateColumns: '120px 1fr', alignItems: 'center', gap: 16, padding: '14px 20px 14px 18px', borderLeft: `3px solid ${c}`, borderBottom: '1px solid var(--border-hairline)' }}>
                <span style={{ fontFamily: 'var(--font-ui)', fontSize: 11, fontWeight: 700, letterSpacing: '0.14em', textTransform: 'uppercase', color: c }}>{label}</span>
                <span style={{ fontFamily: 'var(--font-ui)', fontSize: 13, color: 'var(--fg-secondary)', lineHeight: 1.5 }}>{desc}</span>
              </div>
            ))}
            <div style={{ padding: '14px 20px', fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--fg-tertiary)', display: 'flex', justifyContent: 'space-between' }}>
              <span>Leer el documento de metodología</span>
              <span style={{ color: 'var(--accent-amber)' }}>→</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};
