const { Button, Card, Eyebrow, SectionHeading, DataTable, Stat, SourceNote, Callout, Badge } = window.CensoNosaraDesignSystem_f123a0;
const RD = window.CN_DATA;

const CN_L_REPORTE = {
  es: {
    chapters: [
      { n: '01', t: 'Población', d: '8.716 residentes permanentes. Crecimiento cercano al 5 % anual desde 2000; la migración explica 3.595 de las 5.841 personas adicionales.' },
      { n: '02', t: 'Vivienda', d: '3.228 viviendas ocupadas y 6.270 puntos de vivienda mapeados. Alta prevalencia de vivienda desocupada ligada al alquiler y al turismo residencial.' },
      { n: '03', t: 'Educación', d: 'Escolaridad promedio de 8 años. La mejora agregada convive con una brecha territorial que se amplía.' },
      { n: '04', t: 'Salud y vitalidad', d: '57 defunciones en 2024 frente a 10 en 2010. Casi la mitad de las muertes recientes, sin asistencia médica.' },
      { n: '05', t: 'Trabajo y movilidad', d: '84,1 % trabaja dentro del distrito; 11 % en su propia vivienda. La motocicleta concentra el 67,9 % de los traslados.' },
      { n: '06', t: 'Agua', d: 'Seis ASADAS, 3.322 conexiones activas. Las proyecciones técnicas usan 2,45 % anual frente a un crecimiento real cercano al 8 %.' },
      { n: '07', t: 'Seguridad', d: '11 homicidios, 24 hurtos y 28 robos de vehículo en 2024. Violencia doméstica, el incidente más reportado al 9-1-1.' },
      { n: '08', t: 'Gobernanza', d: 'El padrón pasó de 1.632 (2002) a 4.525 (2024), pero el abstencionismo municipal llegó al 74 %.' }
    ],
    heroBadge: '374 páginas · español e inglés',
    heroTitle: 'Informe del Censo de Población y Vivienda, Nosara 2024',
    heroLede: 'A la vez un retrato y un instrumento. Un retrato de cómo era Nosara en 2024; un instrumento para que instituciones, organizaciones y personas discutan con evidencia.',
    downloadPdf: 'Descargar el informe (PDF)',
    otherLangPdf: 'Read in English',
    methodEyebrow: 'Metodología en una línea',
    methodText: 'Base: cuestionario del Censo Nacional de Población y Vivienda 2022 del INEC, más preguntas de la ficha familiar de salud de la CCSS.',
    statCoverageValue: '95,1',
    statCoverageLabel: 'Cobertura',
    statPeopleValue: '2,7',
    statPeopleLabel: 'Personas por vivienda',
    contentEyebrow: 'Contenido',
    contentTitle: 'Ocho capítulos, un distrito',
    contentLede: 'Cada capítulo trae sus cuadros, su serie histórica y su nota metodológica.',
    askEyebrow: 'Consulta directa',
    askTitle: 'Pregúntele al informe lo que necesite saber',
    askText: 'Las 374 páginas están cargadas en un cuaderno de NotebookLM. Escriba su pregunta en español o en inglés y le responde citando la página y el cuadro de origen.',
    openNotebook: 'Abrir el cuaderno',
    linkPending: 'Enlace pendiente',
    sampleQuestion: '¿Cuánta gente vive en Santa Marta?',
    tableCaption: 'Población y vivienda del distrito, 1970–2024',
    colYear: 'Año',
    colInhabitants: 'Habitantes',
    colDwellings: 'Viviendas',
    confidEyebrow: 'Confidencialidad y resguardo',
    confidText: 'El manejo de la información se realizó bajo estrictos protocolos de confidencialidad.'
  },
  en: {
    chapters: [
      { n: '01', t: 'Population', d: '8,716 permanent residents. Growth of close to 5% per year since 2000; migration accounts for 3,595 of the 5,841 additional people.' },
      { n: '02', t: 'Housing', d: '3,228 occupied dwellings and 6,270 mapped dwelling points. High prevalence of vacant housing tied to rentals and residential tourism.' },
      { n: '03', t: 'Education', d: 'Average schooling of 8 years. The aggregate improvement coexists with a widening territorial gap.' },
      { n: '04', t: 'Health and vitality', d: '57 deaths in 2024 compared with 10 in 2010. Nearly half of recent deaths occurred without medical care.' },
      { n: '05', t: 'Work and mobility', d: '84.1% work within the district; 11% from their own home. Motorcycles account for 67.9% of trips.' },
      { n: '06', t: 'Water', d: 'Six ASADAS, 3,322 active connections. Technical projections use 2.45% per year against real growth of close to 8%.' },
      { n: '07', t: 'Safety', d: '11 homicides, 24 thefts, and 28 vehicle robberies in 2024. Domestic violence was the most reported incident to 9-1-1.' },
      { n: '08', t: 'Governance', d: 'The voter roll grew from 1,632 (2002) to 4,525 (2024), but municipal abstention reached 74%.' }
    ],
    heroBadge: '374 pages · Spanish and English',
    heroTitle: 'Population and Housing Census Report, Nosara 2024',
    heroLede: 'Both a portrait and an instrument. A portrait of what Nosara was like in 2024; an instrument for institutions, organizations, and people to debate with evidence.',
    downloadPdf: 'Download the report (PDF)',
    otherLangPdf: 'Leer en español',
    methodEyebrow: 'Methodology in one line',
    methodText: "Basis: the questionnaire from INEC's 2022 National Population and Housing Census, plus questions from the CCSS family health record.",
    statCoverageValue: '95.1',
    statCoverageLabel: 'Coverage',
    statPeopleValue: '2.7',
    statPeopleLabel: 'People per dwelling',
    contentEyebrow: 'Contents',
    contentTitle: 'Eight chapters, one district',
    contentLede: 'Each chapter brings its own tables, historical series, and methodological note.',
    askEyebrow: 'Direct query',
    askTitle: 'Ask the report whatever you need to know',
    askText: 'All 374 pages are loaded into a NotebookLM notebook. Type your question in Spanish or English and it responds, citing the source page and table.',
    openNotebook: 'Open the notebook',
    linkPending: 'Link pending',
    sampleQuestion: 'How many people live in Santa Marta?',
    tableCaption: 'District population and housing, 1970–2024',
    colYear: 'Year',
    colInhabitants: 'Inhabitants',
    colDwellings: 'Dwellings',
    confidEyebrow: 'Confidentiality and safeguarding',
    confidText: 'The information was handled under strict confidentiality protocols.'
  }
};

window.Reporte = function Reporte({ lang = 'es' }) {
  const c = CN_L_REPORTE[lang] || CN_L_REPORTE.es;
  return (
    <main id="reporte">
      <section style={{ background: 'var(--surface-sunken)' }}>
        <div style={{ maxWidth: 'var(--container-wide)', margin: '0 auto', padding: 'clamp(40px,5vw,80px) var(--gutter)', display: 'grid', gridTemplateColumns: 'minmax(0,1.2fr) minmax(0,0.8fr)', gap: 'var(--space-10)', alignItems: 'center' }} data-stack>
          <div>
            <Badge tone="accent">{c.heroBadge}</Badge>
            <h1 style={{ fontSize: 'clamp(2.2rem,4.4vw,3.6rem)', letterSpacing: 'var(--ls-hero)', lineHeight: 1.02, margin: '16px 0 16px', maxWidth: '17ch' }}>{c.heroTitle}</h1>
            <p style={{ fontSize: 'var(--fs-lg)', color: 'var(--text-muted)', maxWidth: '52ch' }}>
              {c.heroLede}
            </p>
            <div style={{ display: 'flex', gap: 'var(--space-3)', flexWrap: 'wrap', marginTop: 'var(--space-6)' }}>
              <Button variant="accent" size="lg" href="#">{c.downloadPdf}</Button>
              <Button variant="outline" size="lg" href="#">{c.otherLangPdf}</Button>
            </div>
          </div>
          <Card tone="surface" padding="var(--space-6)">
            <Eyebrow>{c.methodEyebrow}</Eyebrow>
            <p style={{ fontSize: 'var(--fs-sm)', color: 'var(--text-body)' }}>{c.methodText}</p>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'var(--space-5)', marginTop: 'var(--space-5)' }}>
              <Stat size="sm" value={c.statCoverageValue} unit="%" label={c.statCoverageLabel} />
              <Stat size="sm" value={c.statPeopleValue} label={c.statPeopleLabel} />
            </div>
          </Card>
        </div>
      </section>

      <section style={{ maxWidth: 'var(--container-wide)', margin: '0 auto', padding: 'var(--section-y) var(--gutter)' }}>
        <SectionHeading eyebrow={c.contentEyebrow} title={c.contentTitle} lede={c.contentLede} />
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(300px,1fr))', gap: 'var(--space-4)' }}>
          {c.chapters.map(ch => (
            <Card key={ch.n} tone="surface" interactive href="#" padding="var(--space-6)">
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 'var(--fs-3xs)', color: 'var(--cn-red-600)', letterSpacing: '0.14em' }}>{ch.n}</div>
              <h3 style={{ fontSize: 'var(--fs-lg)', margin: '8px 0 8px' }}>{ch.t}</h3>
              <p style={{ margin: 0, fontSize: 'var(--fs-sm)', color: 'var(--text-muted)' }}>{ch.d}</p>
            </Card>
          ))}
        </div>
        <window.Arte hero="preguntele-al-informe" lang={lang} style={{ marginTop: 'var(--space-10)' }} />
        <Card tone="inverse" padding="clamp(28px,4vw,44px)" style={{ marginTop: 'var(--space-6)', display: 'grid', gridTemplateColumns: 'minmax(0,1.3fr) minmax(0,1fr)', gap: 'var(--space-8)', alignItems: 'center' }} data-stack>
          <div>
            <Eyebrow tone="inverse">{c.askEyebrow}</Eyebrow>
            <h3 style={{ color: 'var(--cn-cream-300)', fontSize: 'var(--fs-2xl)', margin: '0 0 12px', maxWidth: '20ch' }}>{c.askTitle}</h3>
            <p style={{ color: 'var(--cn-navy-200)', fontSize: 'var(--fs-md)', maxWidth: '52ch', margin: 0 }}>
              {c.askText}
            </p>
            <div style={{ marginTop: 'var(--space-5)' }}>
              {RD.notebooklm
                ? <Button variant="inverse" href={RD.notebooklm} target="_blank" rel="noopener">{c.openNotebook}</Button>
                : <Button variant="inverse" disabled>{c.linkPending}</Button>}
            </div>
          </div>
          <div style={{ border: 'var(--border-width-thick) solid var(--border-inverse)', borderRadius: 'var(--radius-pill)', padding: '18px 26px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 'var(--space-4)' }}>
            <span style={{ fontFamily: 'var(--font-text)', fontSize: 'var(--fs-md)', color: 'var(--cn-navy-300)' }}>{c.sampleQuestion}</span>
            <span aria-hidden="true" style={{ width: 40, height: 40, borderRadius: '50%', background: 'var(--cn-red-600)', display: 'grid', placeItems: 'center', color: 'var(--cn-white)', flex: 'none' }}>→</span>
          </div>
        </Card>
        <div data-stack style={{ marginTop: 'var(--space-10)', display: 'grid', gridTemplateColumns: 'minmax(0,1fr) minmax(0,1fr)', gap: 'var(--space-8)', alignItems: 'start' }}>
          <DataTable caption={c.tableCaption}
            columns={[{ key: 'a', label: c.colYear }, { key: 'b', label: c.colInhabitants }, { key: 'c', label: c.colDwellings }]}
            rows={[
              { a: '1970', b: '2.679', c: '420' },
              { a: '1980', b: '2.128', c: '419' },
              { a: '1990', b: '2.212', c: '436' },
              { a: '2000', b: '2.875', c: '917' },
              { a: '2011', b: '4.912', c: '2.179' },
              { a: '2024', b: '8.716', c: '3.228' }
            ]} />
          <div>
            <Eyebrow>{c.confidEyebrow}</Eyebrow>
            <p style={{ margin: '8px 0 0', fontSize: 'var(--fs-sm)', color: 'var(--text-muted)' }}>
              {c.confidText}
            </p>
          </div>
        </div>
        <SourceNote>{RD.source}</SourceNote>
      </section>
    </main>
  );
};