const { Button, Badge, Card, Eyebrow, SectionHeading, SourceNote } = window.CensoNosaraDesignSystem_f123a0;

// Los @keyframes de las ilustraciones viven en los archivos de arte; se inyectan una vez.
(function inyectarCSS() {
  if (document.getElementById('cn-arte-css')) return;
  const s = document.createElement('style');
  s.id = 'cn-arte-css';
  s.textContent = (window.CENSO_HEROS_CSS ? window.CENSO_HEROS_CSS() : '') +
    (window.CENSO_REELS_CSS ? window.CENSO_REELS_CSS() : '');
  document.head.appendChild(s);
})();

const heroPorClave = (k, lang) => {
  const lista = window.censoHeros ? window.censoHeros(lang) : (window.CENSO_HEROS || []);
  return (lista || []).find(h => h.key === k);
};

// La ilustración sola, en su marco.
window.Arte = function Arte({ hero, style, lang = 'es' }) {
  const h = heroPorClave(hero, lang);
  if (!h) return null;
  return <div role="img" aria-label={h.titulo}
    style={{ borderRadius: 'var(--radius-lg)', overflow: 'hidden', border: 'var(--border-width) solid var(--border-subtle)', background: 'var(--surface-page)', ...style }}
    dangerouslySetInnerHTML={{ __html: h.svg }} />;
};

// Banda completa: texto a la izquierda, ilustración debajo o al lado.
window.BandaArte = function BandaArte({ hero, fondo = 'page', accion, invertir = false, lang = 'es' }) {
  const h = heroPorClave(hero, lang);
  if (!h) return null;
  const bg = fondo === 'sunken' ? 'var(--surface-sunken)' : fondo === 'inverse' ? 'var(--cn-navy-900)' : 'transparent';
  const inverso = fondo === 'inverse';
  return (
    <section style={{ background: bg }}>
      <div style={{ maxWidth: 'var(--container-wide)', margin: '0 auto', padding: 'var(--section-y) var(--gutter)' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0,1fr) minmax(0,1.1fr)', gap: 'clamp(28px,4vw,64px)', alignItems: 'center', direction: invertir ? 'rtl' : 'ltr' }} data-stack>
          <div style={{ direction: 'ltr' }}>
            <Eyebrow tone={inverso ? 'inverse' : 'accent'}>{h.kicker}</Eyebrow>
            <h2 style={{ fontSize: 'var(--fs-3xl)', margin: '0 0 14px', maxWidth: '18ch', color: inverso ? 'var(--cn-cream-300)' : 'var(--cn-navy-700)' }}>{h.titulo}</h2>
            <p style={{ fontSize: 'var(--fs-lg)', color: inverso ? 'var(--cn-navy-200)' : 'var(--text-muted)', maxWidth: '52ch' }}>{h.bajada}</p>
            <Badge tone={inverso ? 'solid' : 'neutral'} size="sm">{h.dato}</Badge>
            {accion && <div style={{ marginTop: 'var(--space-6)' }}><Button variant={inverso ? 'inverse' : 'accent'} onClick={accion.onClick} href={accion.href}>{accion.label || h.cta}</Button></div>}
          </div>
          <window.Arte hero={hero} lang={lang} style={{ direction: 'ltr' }} />
        </div>
      </div>
    </section>
  );
};

// Tira horizontal de reels descargables.
const REELS_T = {
  es: { eyebrow: 'Para redes', titulo: 'Piezas listas para compartir', lede: 'Formato vertical 9:16 con la fuente al pie. Descargue la imagen y copie el texto sugerido para la publicación.', copiar: 'Copiar el texto', copiado: 'Texto copiado ✓', fuente: 'Todas las piezas citan el Censo de Población y Vivienda, Nosara 2024 (ADC · ConoSer, asesoría técnica INEC).' },
  en: { eyebrow: 'For social media', titulo: 'Pieces ready to share', lede: 'Vertical 9:16 format with the source at the foot. Download the image and copy the suggested caption for your post.', copiar: 'Copy the text', copiado: 'Text copied ✓', fuente: 'Every piece cites the Population and Housing Census, Nosara 2024 (ADC · ConoSer, technical advice INEC).' }
};
window.TiraReels = function TiraReels({ titulo, lede, lang = 'es' }) {
  const rt = REELS_T[lang] || REELS_T.es;
  const reels = window.censoReels ? window.censoReels(lang) : (window.CENSO_REELS || []);
  const [copiado, setCopiado] = React.useState(null);
  const copiar = r => { navigator.clipboard && navigator.clipboard.writeText(r.texto); setCopiado(r.key); setTimeout(() => setCopiado(null), 1600); };
  return (
    <section style={{ background: 'var(--surface-sunken)' }}>
      <div style={{ maxWidth: 'var(--container-wide)', margin: '0 auto', padding: 'var(--section-y) var(--gutter)' }}>
        <SectionHeading eyebrow={rt.eyebrow} title={titulo || rt.titulo}
          lede={lede || rt.lede} />
        <div style={{ display: 'grid', gridAutoFlow: 'column', gridAutoColumns: 'minmax(232px,1fr)', gap: 'var(--space-5)', overflowX: 'auto', paddingBottom: 'var(--space-5)', scrollSnapType: 'x mandatory' }}>
          {reels.map(r => {
            const oscuro = r.tono === 'navy' || r.tono === 'rojo';
            const logo = '../../assets/logo-stacked' + (r.tono === 'rojo' ? '-mono-cream' : r.tono === 'navy' ? '-reverse' : '') + '.png';
            return (
              <div key={r.key} style={{ scrollSnapAlign: 'start', display: 'grid', gap: 'var(--space-3)', alignContent: 'start' }}>
                <div style={{ position: 'relative', aspectRatio: '9/16', borderRadius: 'var(--radius-lg)', overflow: 'hidden', boxShadow: 'var(--shadow-sm)', background: '#fff' }}>
                  <div style={{ width: '100%', height: '100%' }} dangerouslySetInnerHTML={{ __html: r.svg }} />
                  <img src={logo} alt="" aria-hidden="true" style={{ position: 'absolute', left: '7.4%', top: '7.8%', width: '20.7%' }} />
                  <span style={{ position: 'absolute', insetInline: 0, top: 0, height: '3.75%', background: 'url(../../assets/pattern-band.png) repeat-x center/auto 100%' }} />
                  <span style={{ position: 'absolute', insetInline: 0, bottom: 0, height: '3.75%', background: 'url(../../assets/pattern-band.png) repeat-x center/auto 100%', transform: 'scaleY(-1)' }} />
                </div>
                <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 'var(--fs-sm)', color: 'var(--cn-navy-700)' }}>{r.tema}</div>
                <button type="button" onClick={() => copiar(r)}
                  style={{ justifySelf: 'start', minHeight: 36, padding: '8px 16px', borderRadius: 'var(--radius-pill)', border: 'var(--border-width-thick) solid var(--cn-navy-700)', background: 'transparent', color: 'var(--cn-navy-700)', fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 'var(--fs-xs)', cursor: 'pointer' }}>
                  {copiado === r.key ? rt.copiado : rt.copiar}
                </button>
              </div>
            );
          })}
        </div>
        <SourceNote>{rt.fuente}</SourceNote>
      </div>
    </section>
  );
};