const { Button, Badge, Eyebrow, Card, PatternBand, SectionHeading, Stat, DataBar, DataTable, SourceNote, Callout, TopicChip } = window.CensoNosaraDesignSystem_f123a0;
const AB = '../..';

const heroStyles = {
  wrap: { position: 'relative', background: 'var(--cn-navy-700)', color: 'var(--cn-cream-300)', overflow: 'hidden' },
  inner: { maxWidth: 'var(--container-wide)', margin: '0 auto', padding: 'clamp(48px,7vw,96px) var(--gutter)', display: 'grid', gridTemplateColumns: 'minmax(0,1.15fr) minmax(0,0.85fr)', gap: 'clamp(32px,5vw,72px)', alignItems: 'center' }
};

function Hero({ onGo, lang, t }) {
  const cifras = window.CN_CIFRAS_PORTADA;
  const [i, setI] = React.useState(0);
  React.useEffect(() => { const id = setInterval(() => setI(v => (v + 1) % cifras.length), 3200); return () => clearInterval(id); }, []);
  const c = cifras[i], etiqueta = t.headline[i];
  const valor = c.crudo || window.num(c.valor, lang);

  return (
    <section id="inicio" style={heroStyles.wrap}>
      <div aria-hidden="true" style={{ position: 'absolute', inset: 0, background: 'linear-gradient(100deg,var(--cn-navy-700) 22%,rgba(23,48,91,0.82) 55%,rgba(11,23,48,0.68) 100%)' }} />
      <div aria-hidden="true" style={{ position: 'absolute', inset: 0, backgroundImage: 'radial-gradient(rgba(239,236,230,0.16) 1px,transparent 1px)', backgroundSize: '22px 22px', maskImage: 'linear-gradient(to bottom,#000,transparent 70%)', WebkitMaskImage: 'linear-gradient(to bottom,#000,transparent 70%)' }} />
      <div data-stack style={{ ...heroStyles.inner, position: 'relative' }}>
        <div>
          <Badge tone="solidAccent">{t.hero.badge}</Badge>
          <h1 style={{ fontSize: 'var(--fs-hero)', lineHeight: 0.95, letterSpacing: 'var(--ls-hero)', color: 'var(--cn-cream-300)', margin: '18px 0 20px', maxWidth: '14ch' }}>
            {t.hero.l1}<br />{t.hero.l2}
          </h1>
          <p style={{ fontSize: 'var(--fs-lg)', color: 'var(--cn-navy-200)', maxWidth: '46ch', margin: '0 0 8px' }}>{t.hero.p1}</p>
          <p style={{ fontSize: 'var(--fs-md)', color: 'var(--cn-navy-300)', maxWidth: '46ch', margin: '0 0 32px' }}>{t.hero.p2}</p>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 'var(--space-3)' }}>
            <Button variant="accent" size="lg" onClick={() => onGo('cartas')}>{t.hero.ctaCartas}</Button>
            <Button variant="inverseOutline" size="lg" onClick={() => onGo('datos')}>{t.hero.ctaDatos}</Button>
          </div>
        </div>
        <div style={{ display: 'grid', gap: 'var(--space-4)' }}>
          <Card tone="accent" padding="clamp(24px,3vw,36px)" style={{ minHeight: 210, display: 'grid', alignContent: 'center' }}>
            <div key={i} style={{ animation: 'cnFade var(--dur-slow) var(--ease-out)' }}>
              <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 'clamp(48px,6vw,84px)', lineHeight: 0.92, letterSpacing: '-0.03em', fontVariantNumeric: 'tabular-nums' }}>{valor}</div>
              <div style={{ fontFamily: 'var(--font-display)', fontSize: 'var(--fs-2xs)', fontWeight: 600, letterSpacing: 'var(--ls-caps)', textTransform: 'uppercase', marginTop: 14 }}>{etiqueta.label}</div>
              <div style={{ fontSize: 'var(--fs-xs)', opacity: 0.85, marginTop: 6 }}>{etiqueta.note}</div>
            </div>
            <div style={{ display: 'flex', gap: 6, marginTop: 22 }}>
              {cifras.map((_, n) => <button key={n} aria-label={t.hero.dato + ' ' + (n + 1)} onClick={() => setI(n)}
                style={{ width: n === i ? 26 : 10, height: 6, borderRadius: 999, border: 0, cursor: 'pointer', background: n === i ? '#fff' : 'rgba(255,255,255,.4)', transition: 'width var(--motion-hover)' }} />)}
            </div>
          </Card>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'var(--space-4)' }}>
            <Card tone="inverse" padding="20px" style={{ border: '1px solid var(--border-inverse)' }}>
              <Stat tone="inverse" size="sm" value={window.dec('95.1', lang)} unit="%" label={t.hero.cobertura} />
            </Card>
            <Card tone="inverse" padding="20px" style={{ border: '1px solid var(--border-inverse)' }}>
              <Stat tone="inverse" size="sm" value="150" unit="+" label={t.hero.censistas} />
            </Card>
          </div>
        </div>
      </div>
      <PatternBand height={26} assetBase={AB} />
    </section>
  );
}

function ThreeThings({ onGo, t, cita }) {
  return (
    <section style={{ maxWidth: 'var(--container-wide)', margin: '0 auto', padding: 'var(--section-y) var(--gutter)' }}>
      <SectionHeading eyebrow={t.tres.eyebrow} title={t.tres.title} lede={t.tres.lede} />
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(280px,1fr))', gap: 'var(--space-5)' }}>
        {t.tres.items.map((it, n) => (
          <Card key={n} tone="surface" accentTop padding="var(--space-6)" interactive onClick={() => onGo('fichas')}>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 'var(--fs-3xs)', color: 'var(--cn-red-600)', letterSpacing: '0.14em' }}>
              {String(n + 1).padStart(2, '0')}
            </div>
            <h3 style={{ fontSize: 'var(--fs-xl)', margin: '10px 0 10px', maxWidth: '20ch' }}>{it.t}</h3>
            <p style={{ margin: 0, fontSize: 'var(--fs-sm)', color: 'var(--text-muted)' }}>{it.d}</p>
          </Card>
        ))}
      </div>
      <SourceNote>{cita}</SourceNote>
    </section>
  );
}

function Priorities({ onGo, lang, t, cita }) {
  const temas = window.temasDe(lang);
  const [sel, setSel] = React.useState('salud');
  const tema = temas.find(x => x.id === sel) || temas[0];
  return (
    <section id="prioridades" style={{ background: 'var(--surface-sunken)' }}>
      <div style={{ maxWidth: 'var(--container-wide)', margin: '0 auto', padding: 'var(--section-y) var(--gutter)' }}>
        <SectionHeading eyebrow={t.prioridades.eyebrow} title={t.prioridades.title} lede={t.prioridades.lede} />
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 'var(--space-3)', marginBottom: 'var(--space-8)' }}>
          {temas.map(x => <TopicChip key={x.id} topic={x.id} label={x.label} selected={sel === x.id} onClick={() => setSel(x.id)} />)}
        </div>
        <div data-stack style={{ display: 'grid', gridTemplateColumns: 'minmax(0,1.3fr) minmax(0,1fr)', gap: 'var(--space-8)', alignItems: 'start' }}>
          <div>
            <h3 style={{ fontSize: 'var(--fs-2xl)', maxWidth: '22ch', color: 'var(--cn-navy-700)' }}>{tema.headline}</h3>
            <ul style={{ margin: '0 0 var(--space-5)', padding: 0, listStyle: 'none', display: 'grid', gap: 'var(--space-3)' }}>
              {tema.facts.map((f, n) => (
                <li key={n} style={{ display: 'grid', gridTemplateColumns: '22px 1fr', gap: 'var(--space-3)', fontSize: 'var(--fs-md)', color: 'var(--text-body)' }}>
                  <span style={{ width: 10, height: 10, borderRadius: '50%', background: 'var(--topic-' + tema.id + ')', marginTop: 9 }} />
                  <span>{f}</span>
                </li>
              ))}
            </ul>
            <SourceNote>{cita}</SourceNote>
          </div>
          <Card tone="surface" padding="var(--space-6)">
            <Eyebrow>{t.prioridades.askEyebrow}</Eyebrow>
            <p style={{ fontSize: 'var(--fs-md)', color: 'var(--text-body)' }}>{t.prioridades.askPrefix}{tema.ask}.</p>
            <Button variant="accent" fullWidth onClick={() => onGo('cartas', tema.id)}>
              {t.prioridades.ctaPrefix}{tema.label.toLowerCase()}
            </Button>
          </Card>
        </div>
      </div>
    </section>
  );
}

const MAPA_IMG = [AB + '/assets/maps/polarizacion_hero.png', AB + '/assets/maps/salud_acceso_panel.png'];

function TerritoryMap({ onGo, t }) {
  const [abierto, setAbierto] = React.useState(false);
  const [i, setI] = React.useState(0);
  const [verMetodo, setVerMetodo] = React.useState(false);
  const mapas = t.mapa.mapas;
  const m = mapas[i];

  return (
    <section style={{ background: 'var(--cn-navy-900)' }}>
      <div style={{ maxWidth: 'var(--container-wide)', margin: '0 auto', padding: 'var(--section-y) var(--gutter)' }}>
        <SectionHeading tone="inverse" eyebrow={t.mapa.eyebrow} title={t.mapa.title} lede={t.mapa.lede} />

        {!abierto ? (
          <Button variant="inverseOutline" onClick={() => setAbierto(true)}>{t.mapa.verMapas}</Button>
        ) : (
          <div>
            <Card tone="surface" padding="0" style={{ overflow: 'hidden' }}>
              <div style={{ position: 'relative', background: 'var(--cn-cream-100)' }}>
                <img src={MAPA_IMG[i]} alt={m.caption} style={{ width: '100%', display: 'block', maxHeight: 560, objectFit: 'contain', margin: '0 auto' }} loading="lazy" />
              </div>
              <div style={{ padding: 'var(--space-5) var(--space-6)', display: 'grid', gap: 'var(--space-3)' }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-3)', flexWrap: 'wrap' }}>
                  <Badge tone="neutral" size="sm">{t.mapa.propio}</Badge>
                  <div style={{ display: 'flex', gap: 6, marginLeft: 'auto' }}>
                    {mapas.map((_, n) => (
                      <button key={n} aria-label={mapas[n].titulo} onClick={() => { setI(n); setVerMetodo(false); }}
                        style={{ width: n === i ? 26 : 10, height: 6, borderRadius: 999, border: 0, cursor: 'pointer', background: n === i ? 'var(--cn-navy-700)' : 'var(--cn-ink-200)', transition: 'width var(--motion-hover)' }} />
                    ))}
                  </div>
                </div>
                <h3 style={{ margin: 0, fontSize: 'var(--fs-lg)' }}>{m.titulo}</h3>
                <p style={{ margin: 0, fontSize: 'var(--fs-sm)', color: 'var(--text-body)' }}>{m.caption}</p>

                <div style={{ display: 'flex', gap: 'var(--space-3)', flexWrap: 'wrap' }}>
                  {mapas.length > 1 && (
                    <Button variant="ghost" size="sm" onClick={() => { setI((i + 1) % mapas.length); setVerMetodo(false); }}>
                      {mapas[(i + 1) % mapas.length].titulo} →
                    </Button>
                  )}
                  <Button variant="ghost" size="sm" onClick={() => setVerMetodo(v => !v)}>{t.mapa.verMetodologia}</Button>
                </div>
                {verMetodo && (
                  <p style={{ margin: 0, fontSize: 'var(--fs-xs)', color: 'var(--text-muted)', background: 'var(--surface-sunken)', borderRadius: 'var(--radius-sm)', padding: 'var(--space-4)' }}>
                    {m.metodologia}
                  </p>
                )}
                <div style={{ display: 'flex', gap: 'var(--space-3)', flexWrap: 'wrap' }}>
                  <Button variant="outline" onClick={() => onGo('datos')}>{t.mapa.cta}</Button>
                  <Button variant="ghost" onClick={() => setAbierto(false)}>{t.mapa.ocultarMapas}</Button>
                </div>
              </div>
            </Card>
          </div>
        )}
      </div>
    </section>
  );
}

function Who({ t }) {
  return (
    <section id="quienes" style={{ background: 'var(--cn-navy-900)', color: 'var(--text-on-inverse)' }}>
      <div style={{ maxWidth: 'var(--container-wide)', margin: '0 auto', padding: 'var(--section-y) var(--gutter)' }}>
        <SectionHeading tone="inverse" eyebrow={t.quienes.eyebrow} title={t.quienes.title} lede={t.quienes.lede} />
        <div style={{ display: 'flex', gap: 'var(--space-10)', marginTop: 'var(--space-6)', flexWrap: 'wrap' }}>
          <Stat tone="inverse" size="sm" value="150" unit="+" label={t.quienes.stat1} />
          <Stat tone="inverse" size="sm" value="3" unit={t.quienes.stat2Unidad} label={t.quienes.stat2} />
        </div>
      </div>
    </section>
  );
}

window.Home = function Home({ onGo, lang }) {
  const t = window.T(lang);
  const cita = window.CN_CITA[lang] || window.CN_CITA.es;
  return <main>
    <Hero onGo={onGo} lang={lang} t={t} />
    <window.BandaArte hero="casa-por-casa" lang={lang} accion={{ onClick: () => onGo('datos'), label: t.verTodos }} />
    <ThreeThings onGo={onGo} t={t} cita={cita} />
    <Priorities onGo={onGo} lang={lang} t={t} cita={cita} />
    <TerritoryMap onGo={onGo} t={t} />
    <window.BandaArte hero="dato-a-carta" fondo="inverse" invertir lang={lang} accion={{ onClick: () => onGo('cartas'), label: t.generarCarta }} />
    <Who t={t} />
  </main>;
};