const { Badge, Card, Eyebrow, SectionHeading, DataBar, DataTable, SourceNote, Callout, Button } = window.CensoNosaraDesignSystem_f123a0;
const DD = window.CN_DATA;
const LOC = window.CN_LOCALIDADES;

const CN_L_DATOS = {
  es: {
    badge: 'Resultados 2024',
    heroTitle: 'Siete datos del censo que son clave',
    heroLede: 'Un dato por sección, con su fuente. Cada uno se puede llevar tal cual a una carta, una nota o una sesión municipal.',
    labelVivienda: 'Escribir sobre vivienda',
    labelAgua: 'Escribir sobre agua',
    labelSalud: 'Escribir sobre salud',
    labelEducacion: 'Escribir sobre educación',
    labelCalles: 'Escribir sobre calles',
    territorioEyebrow: 'Territorio',
    territorioTitle: 'Dónde vive Nosara',
    territorioLede: 'Distribución de las viviendas efectivamente censadas, con residentes que respondieron el cuestionario, el dato más relevante para saber dónde vive la población permanente.',
    sourceLocalidadPre: 'Fuente: Censo Nosara 2024, variable «Localidad o barrio». N = ',
    sourceLocalidadPost: ' viviendas ocupadas con localidad declarada.',
    thousands: '.',
    eyebrowPuntos: 'Puntos de vivienda mapeados',
    sourceCartografia: 'Fuente: cartografía poscensal, Censo Nosara 2024. 6.270 puntos de vivienda (incluye vacantes y de uso turístico).',
    calloutArenalesTitle: 'Dos formas de contar Arenales',
    calloutArenalesBody: 'De los puntos de vivienda mapeados, Arenales tiene el 18,3 %. De las viviendas efectivamente censadas (arriba), concentra casi el 25 %: es el centro poblacional de residentes permanentes. La diferencia entre ambos datos son las viviendas vacías o de uso turístico, que están en otras zonas.',
    tablaCaption: 'Escolaridad promedio de la población habitual',
    colAno: 'Año',
    colAnosEstudio: 'Años de estudio',
    calloutOrigenTitle: '¿Necesita el cuadro de origen?',
    calloutOrigenPre: 'Cualquier cifra de esta página sale del informe y tiene su cuadro. Escriba a ',
    calloutOrigenPost: ' y se lo mandamos.',
    btnFichas: 'Explorar las fichas de datos',
    btnInforme: 'Ver el informe completo',
  },
  en: {
    badge: '2024 Results',
    heroTitle: 'Seven key figures from the census',
    heroLede: 'One figure per section, each with its source. Every one can be used as is in a letter, an article, or a municipal session.',
    labelVivienda: 'Write about housing',
    labelAgua: 'Write about water',
    labelSalud: 'Write about health',
    labelEducacion: 'Write about education',
    labelCalles: 'Write about roads',
    territorioEyebrow: 'Territory',
    territorioTitle: 'Where Nosara lives',
    territorioLede: 'Distribution of the dwellings actually surveyed, those with residents who answered the questionnaire, the most relevant figure for knowing where the permanent population lives.',
    sourceLocalidadPre: 'Source: Nosara Census 2024, variable "Locality or neighborhood." N = ',
    sourceLocalidadPost: ' occupied dwellings with a declared locality.',
    thousands: ',',
    eyebrowPuntos: 'Mapped dwelling points',
    sourceCartografia: 'Source: post-census mapping, Nosara Census 2024. 6,270 dwelling points (includes vacant and tourist-use dwellings).',
    calloutArenalesTitle: 'Two ways to count Arenales',
    calloutArenalesBody: 'Of the mapped dwelling points, Arenales holds 18.3%. Of the dwellings actually surveyed (above), it concentrates nearly 25%: it is the population center of permanent residents. The difference between the two figures is the vacant or tourist-use dwellings, which are located in other areas.',
    tablaCaption: 'Average schooling of the usual population',
    colAno: 'Year',
    colAnosEstudio: 'Years of schooling',
    calloutOrigenTitle: 'Need the source table?',
    calloutOrigenPre: 'Every figure on this page comes from the report and has its source table. Write to ',
    calloutOrigenPost: ' and we will send it to you.',
    btnFichas: 'Explore the data sheets',
    btnInforme: 'View the full report',
  },
};

window.Datos = function Datos({ onGo, lang = 'es' }) {
  const c = CN_L_DATOS[lang] || CN_L_DATOS.es;
  return (
    <main id="datos">
      <section style={{ background: 'var(--cn-navy-700)', color: 'var(--cn-cream-300)' }}>
        <div style={{ maxWidth: 'var(--container-wide)', margin: '0 auto', padding: 'clamp(40px,5vw,72px) var(--gutter)' }}>
          <Badge tone="solidAccent">{c.badge}</Badge>
          <h1 style={{ color: 'var(--cn-cream-300)', fontSize: 'clamp(2.2rem,4.4vw,3.6rem)', letterSpacing: 'var(--ls-hero)', lineHeight: 1.02, margin: '16px 0 14px', maxWidth: '17ch' }}>
            {c.heroTitle}
          </h1>
          <p style={{ color: 'var(--cn-navy-200)', fontSize: 'var(--fs-lg)', maxWidth: '58ch', margin: 0 }}>
            {c.heroLede}
          </p>
        </div>
      </section>

      <window.BandaArte hero="casa-por-casa" lang={lang} />
      <window.BandaArte hero="de-donde-viene" fondo="sunken" invertir lang={lang} />
      <window.BandaArte hero="vivienda-vs-gente" lang={lang} accion={{ onClick: () => onGo('cartas', 'vivienda'), label: c.labelVivienda }} />
      <window.BandaArte hero="agua-2035" fondo="sunken" invertir lang={lang} accion={{ onClick: () => onGo('cartas', 'ambiente'), label: c.labelAgua }} />
      <window.BandaArte hero="salud-distancia" lang={lang} accion={{ onClick: () => onGo('cartas', 'salud'), label: c.labelSalud }} />
      <window.BandaArte hero="educacion-brecha" fondo="sunken" invertir lang={lang} accion={{ onClick: () => onGo('cartas', 'educacion'), label: c.labelEducacion }} />
      <window.BandaArte hero="trabajo-moto" lang={lang} accion={{ onClick: () => onGo('cartas', 'calles'), label: c.labelCalles }} />
      <window.BandaArte hero="padron-abstencion" fondo="inverse" invertir lang={lang} />

      <window.Mapa />

      <section style={{ maxWidth: 'var(--container-wide)', margin: '0 auto', padding: 'var(--section-y) var(--gutter)' }}>
        <SectionHeading eyebrow={c.territorioEyebrow} title={c.territorioTitle}
          lede={c.territorioLede} />
        <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0,1.2fr) minmax(0,1fr)', gap: 'var(--space-10)', alignItems: 'start' }} data-stack>
          <div style={{ display: 'grid', gap: 'var(--space-4)' }}>
            {LOC.filas.map((l, n) => <DataBar key={l.label} label={l.label} value={l.p} max={26} display={l.p.toFixed(1).replace('.', ',') + ' %'} color={'var(--data-' + ((n % 8) + 1) + ')'} />)}
            <SourceNote>{c.sourceLocalidadPre}{String(LOC.n).replace(/\B(?=(\d{3})+(?!\d))/g, c.thousands)}{c.sourceLocalidadPost}</SourceNote>
          </div>
          <div style={{ display: 'grid', gap: 'var(--space-5)' }}>
            <Eyebrow>{c.eyebrowPuntos}</Eyebrow>
            <div style={{ display: 'grid', gap: 'var(--space-3)' }}>
              {DD.localidades.map((l, n) => <DataBar key={l.label} label={l.label} value={l.value} max={45} display={l.display} color="var(--cn-ink-300)" />)}
            </div>
            <SourceNote>{c.sourceCartografia}</SourceNote>
            <Callout tone="quiet" title={c.calloutArenalesTitle}>
              {c.calloutArenalesBody}
            </Callout>
            <DataTable caption={c.tablaCaption} columns={[{ key: 'a', label: c.colAno }, { key: 'b', label: c.colAnosEstudio }]} rows={DD.escolaridad} />
            <Callout tone="info" title={c.calloutOrigenTitle}>
              {c.calloutOrigenPre}<a href="mailto:adcdesarrollocomunitario@gmail.com">adcdesarrollocomunitario@gmail.com</a>{c.calloutOrigenPost}
            </Callout>
            <Button variant="accent" onClick={() => onGo('fichas')}>{c.btnFichas}</Button>
            <Button variant="outline" onClick={() => onGo('reporte')}>{c.btnInforme}</Button>
          </div>
        </div>
      </section>

      <window.TiraReels lang={lang} />
    </main>
  );
};