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

/* Índice de los artículos del blog del censo.
 *
 * No reproduce el texto: cada tarjeta enlaza al artículo publicado. El equipo
 * escribe en el blog; el sitio los reúne y los ordena por tema, con su tiempo
 * de lectura, para que se puedan encontrar.
 *
 * El estudio de salud se publicó en dos entregas. Aquí es una sola pieza con
 * dos partes, porque para quien busca «lo del hospital» es un solo tema.
 *
 * BILINGÜE: el texto de cada tarjeta (tema, título, extracto) vive en el
 * diccionario L, en español e inglés. Los enlaces apuntan al blog en español;
 * cuando existan las versiones en inglés se cambian los href por idioma.
 */

const BLOG = 'https://www.censonosara.com/post/';

const CN_L_ARTICULOS = {
  es: {
    heroBadge: 'Artículos',
    heroTitulo: 'Los datos, contados como historias',
    heroLede: 'Estudios, crónicas de historia local y opinión, escritos por el equipo del censo a partir de sus propios datos.',

    saludTema: 'Estudio · Salud',
    saludMeta: 'min · estudio en dos partes',
    saludTitulo: 'Análisis de necesidades de servicios de salud pública para el distrito de Nosara',
    saludExtracto: 'Nosara presenta una brecha crítica entre la necesidad y la capacidad de atención. El estudio examina las causas de mortalidad por sexo y año, los tiempos de traslado al Hospital La Anexión y la capacidad de los servicios de emergencia del distrito.',
    saludParte1: 'Leer la parte 1',
    saludParte2: 'Leer la parte 2',
    saludCifra: 'Traslado en ambulancia al Hospital La Anexión, en buenas condiciones.',

    estudios: [
      { tema: 'Estudio · Servicios públicos', minutos: 8, titulo: 'Sondeo sobre la percepción de los servicios públicos en Nosara, 2025', extracto: 'Estudio conexo al censo: cómo perciben las personas del distrito la calidad de los servicios públicos que reciben.', slug: 'sondeoserviciospublicos' },
      { tema: 'Estudio · Agua', minutos: 3, titulo: 'Reporte hídrico: agua, ASADAS y viviendas en Nosara, 2024', extracto: 'Documenta el déficit de servicio de agua que afecta a los hogares del distrito y el papel de las seis ASADAS.', slug: 'aguanosara' },
      { tema: 'Panorama general', minutos: 20, titulo: 'Una fotografía del distrito de Nosara', extracto: 'A través de los lentes de la investigación histórica y estadística del Censo Nosara 2024: el recorrido del proyecto y sus hallazgos principales.', slug: 'fotografiadelcensonosara' }
    ],
    historia: [
      { tema: 'Historia y origen', minutos: 4, titulo: 'Nosara: un siglo de historia, presente y un futuro que nos desafía', extracto: 'La transformación del distrito a lo largo de un siglo, leída con los datos del censo 2024: crecimiento acelerado, riesgos en salud y participación cívica a la baja.', slug: 'nosara-un-siglo-de-historia-presente-y-un-futuro-que-nos-desafía' },
      { tema: 'Historia y origen', minutos: 2, titulo: 'Nosara, hoy nos contamos', extracto: 'El relato leído en el acto comunitario: de las familias fundadoras al momento en que el distrito decide contarse a sí mismo.', slug: 'nosara-hoy-nos-contamos' },
      { tema: 'Historia y origen', minutos: 3, titulo: 'Un relato sobre la historia de Nosara', extracto: '«Mi familia vino a Nosara para hacer trabajos. Sembramos arroz, maíz y frijoles.» La memoria de quienes llegaron primero.', slug: 'un-relato-sobre-la-historia-de-nosara' },
      { tema: 'Historia y origen', minutos: 3, titulo: 'Las primeras familias nosareñas', extracto: 'La llegada de las familias fundadoras que poblaron el distrito.', slug: 'las-primeras-personas-nosareñas' },
      { tema: 'Historia y origen', minutos: 2, titulo: 'La leyenda de Garza', extracto: 'Una leyenda chorotega-mangue sobre este punto de la costa de la península de Nicoya.', slug: 'la-leyenda-de-garza' },
      { tema: 'Historia y origen', minutos: 2, titulo: 'El «primer» nacido de Nosara', extracto: 'Evidencia arqueológica que sugiere presencia humana de hace unos dos mil años en el territorio.', slug: 'el-primer-nacido-de-nosara' },
      { tema: 'Historia y origen', minutos: 2, titulo: 'Mapas y vistas aéreas de Nosara de 1944', extracto: 'Cartografía histórica del distrito: cómo se veía Nosara desde el aire hace ochenta años.', slug: 'mapas-y-vistas-aéreas-de-nosara-de-1944' }
    ],
    opinion: [
      { tema: 'Opinión', minutos: 3, titulo: 'El bien para la mayoría en Nosara', extracto: 'Por qué conviene pasar de la caridad para causas individuales a soluciones sistémicas, ahora que la comunidad creció. Con los datos del censo sobre las prioridades del distrito.', slug: 'el-bien-para-la-mayoría-en-nosara' }
    ],

    lecturaMin: 'min de lectura',
    leerBlog: 'Leer en el blog →',
    estudiosEyebrow: 'Estudios y análisis',
    estudiosTitulo: 'La investigación, tema por tema',
    historiaEyebrow: 'Historia y origen',
    historiaTitulo: 'De dónde viene Nosara',
    historiaLede: 'Crónica, memoria y leyenda del distrito, recogidas junto al censo.',
    opinionEyebrow: 'Opinión',
    opinionTitulo: 'Lo que los datos nos hacen pensar',
    escribirTitulo: '¿Quiere escribir uno?',
    escribirCuerpo1: 'Investigadores, estudiantes y periodistas pueden usar los datos libremente. Escriba a ',
    escribirCuerpo2: ' y le pasamos los cuadros de origen.',
    fuente: 'Todos los artículos están publicados en el blog del proyecto, en censonosara.com/blog.',
    reelsTitulo: 'Descargue y comparta',
    reelsLede: 'Diez piezas verticales con un dato cada una, la fuente al pie y el texto sugerido para la publicación.'
  },
  en: {
    heroBadge: 'Articles',
    heroTitulo: 'The data, told as stories',
    heroLede: 'Studies, local-history pieces, and opinion, written by the census team from its own data.',

    saludTema: 'Study · Health',
    saludMeta: 'min · two-part study',
    saludTitulo: 'Analysis of public health service needs for the district of Nosara',
    saludExtracto: 'Nosara faces a critical gap between the need for care and the capacity to provide it. The study examines causes of death by sex and year, transfer times to La Anexión Hospital, and the capacity of the district’s emergency services.',
    saludParte1: 'Read part 1',
    saludParte2: 'Read part 2',
    saludCifra: 'Ambulance transfer to La Anexión Hospital, under good conditions.',

    estudios: [
      { tema: 'Study · Public services', minutos: 8, titulo: 'Survey on the perception of public services in Nosara, 2025', extracto: 'A study connected to the census: how district residents perceive the quality of the public services they receive.', slug: 'sondeoserviciospublicos' },
      { tema: 'Study · Water', minutos: 3, titulo: 'Water report: water, ASADAS, and housing in Nosara, 2024', extracto: 'Documents the water-service deficit affecting district households and the role of the six ASADAS (community water utilities).', slug: 'aguanosara' },
      { tema: 'Overview', minutos: 20, titulo: 'A portrait of the district of Nosara', extracto: 'Through the lens of the historical and statistical research of the Nosara Census 2024: the project’s path and its main findings.', slug: 'fotografiadelcensonosara' }
    ],
    historia: [
      { tema: 'History & origins', minutos: 4, titulo: 'Nosara: a century of history, a present, and a future that challenges us', extracto: 'The district’s transformation over a century, read through the 2024 census data: rapid growth, health risks, and declining civic participation.', slug: 'nosara-un-siglo-de-historia-presente-y-un-futuro-que-nos-desafía' },
      { tema: 'History & origins', minutos: 2, titulo: 'Nosara, today we count ourselves', extracto: 'The account read at the community event: from the founding families to the moment the district decides to count itself.', slug: 'nosara-hoy-nos-contamos' },
      { tema: 'History & origins', minutos: 3, titulo: 'A story about the history of Nosara', extracto: '“My family came to Nosara to work the land. We grew rice, corn, and beans.” The memory of those who arrived first.', slug: 'un-relato-sobre-la-historia-de-nosara' },
      { tema: 'History & origins', minutos: 3, titulo: 'The first Nosara families', extracto: 'The arrival of the founding families who settled the district.', slug: 'las-primeras-personas-nosareñas' },
      { tema: 'History & origins', minutos: 2, titulo: 'The legend of Garza', extracto: 'A Chorotega-Mangue legend about this point on the coast of the Nicoya Peninsula.', slug: 'la-leyenda-de-garza' },
      { tema: 'History & origins', minutos: 2, titulo: 'The “first” person born in Nosara', extracto: 'Archaeological evidence suggesting human presence here some two thousand years ago.', slug: 'el-primer-nacido-de-nosara' },
      { tema: 'History & origins', minutos: 2, titulo: 'Maps and aerial views of Nosara from 1944', extracto: 'Historical cartography of the district: how Nosara looked from the air eighty years ago.', slug: 'mapas-y-vistas-aéreas-de-nosara-de-1944' }
    ],
    opinion: [
      { tema: 'Opinion', minutos: 3, titulo: 'The greater good in Nosara', extracto: 'Why it makes sense to move from charity for individual causes to systemic solutions, now that the community has grown. With census data on the district’s priorities.', slug: 'el-bien-para-la-mayoría-en-nosara' }
    ],

    lecturaMin: 'min read',
    leerBlog: 'Read on the blog →',
    estudiosEyebrow: 'Studies & analysis',
    estudiosTitulo: 'The research, topic by topic',
    historiaEyebrow: 'History & origins',
    historiaTitulo: 'Where Nosara comes from',
    historiaLede: 'Chronicle, memory, and legend of the district, gathered alongside the census.',
    opinionEyebrow: 'Opinion',
    opinionTitulo: 'What the data makes us think about',
    escribirTitulo: 'Want to write one?',
    escribirCuerpo1: 'Researchers, students, and journalists may use the data freely. Write to ',
    escribirCuerpo2: ' and we will send you the source tables.',
    fuente: 'Every article is published on the project blog, at censonosara.com/blog.',
    reelsTitulo: 'Download and share',
    reelsLede: 'Ten vertical pieces, each with one figure, its source at the foot, and suggested caption text for posting.'
  }
};

function TarjetaArticulo({ a, c }) {
  return (
    <a href={BLOG + a.slug} target="_blank" rel="noopener" style={{ textDecoration: 'none' }}>
      <Card tone="surface" interactive padding="var(--space-6)">
        <div style={{ display: 'flex', gap: 'var(--space-3)', alignItems: 'center', marginBottom: 'var(--space-4)', flexWrap: 'wrap' }}>
          <Badge tone="navy" size="sm">{a.tema}</Badge>
          <span style={{ fontFamily: 'var(--font-mono)', fontSize: 'var(--fs-3xs)', letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--text-faint)' }}>{a.minutos} {c.lecturaMin}</span>
        </div>
        <h3 style={{ fontSize: 'var(--fs-lg)', margin: '0 0 8px', maxWidth: '26ch' }}>{a.titulo}</h3>
        <p style={{ margin: 0, fontSize: 'var(--fs-sm)', color: 'var(--text-muted)', lineHeight: 1.6 }}>{a.extracto}</p>
        <span style={{ display: 'inline-block', marginTop: 'var(--space-4)', fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 'var(--fs-sm)', color: 'var(--cn-red-600)' }}>{c.leerBlog}</span>
      </Card>
    </a>
  );
}

window.Articulos = function Articulos({ onGo, lang = 'es' }) {
  const c = CN_L_ARTICULOS[lang] || CN_L_ARTICULOS.es;
  return (
    <main id="articulos">
      <section style={{ background: 'var(--surface-sunken)' }}>
        <div style={{ maxWidth: 'var(--container-wide)', margin: '0 auto', padding: 'clamp(40px,5vw,72px) var(--gutter)' }}>
          <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 14px', maxWidth: '17ch' }}>
            {c.heroTitulo}
          </h1>
          <p style={{ fontSize: 'var(--fs-lg)', color: 'var(--text-muted)', maxWidth: '58ch', margin: 0 }}>
            {c.heroLede}
          </p>
        </div>
      </section>

      {/* Estudio de salud, pieza destacada, en dos partes */}
      <section style={{ maxWidth: 'var(--container-wide)', margin: '0 auto', padding: 'var(--section-y) var(--gutter) 0' }}>
        <Card tone="inverse" padding="clamp(28px,4vw,48px)" style={{ display: 'grid', gridTemplateColumns: 'minmax(0,1.5fr) minmax(0,1fr)', gap: 'var(--space-8)', alignItems: 'center' }} data-stack>
          <div>
            <div style={{ display: 'flex', gap: 'var(--space-3)', alignItems: 'center', marginBottom: 'var(--space-3)', flexWrap: 'wrap' }}>
              <Eyebrow tone="inverse">{c.saludTema}</Eyebrow>
              <span style={{ fontFamily: 'var(--font-mono)', fontSize: 'var(--fs-3xs)', letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--cn-navy-300)' }}>24 {c.saludMeta}</span>
            </div>
            <h2 style={{ color: 'var(--cn-cream-300)', fontSize: 'clamp(1.7rem,3vw,2.4rem)', margin: '0 0 12px', maxWidth: '20ch' }}>{c.saludTitulo}</h2>
            <p style={{ color: 'var(--cn-navy-200)', fontSize: 'var(--fs-md)', maxWidth: '56ch', margin: '0 0 var(--space-5)' }}>{c.saludExtracto}</p>
            <div style={{ display: 'flex', gap: 'var(--space-3)', flexWrap: 'wrap' }}>
              <Button variant="inverse" href={BLOG + 'estudiosalud1'} target="_blank" rel="noopener">{c.saludParte1}</Button>
              <Button variant="inverse" href={BLOG + 'estudiosalud2'} target="_blank" rel="noopener">{c.saludParte2}</Button>
            </div>
          </div>
          <div style={{ border: '2px solid var(--border-inverse)', borderRadius: 'var(--radius-md)', padding: 'var(--space-6)', display: 'grid', gap: 'var(--space-4)' }}>
            <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 'clamp(2rem,4vw,2.8rem)', lineHeight: 0.95, color: 'var(--cn-cream-300)', fontVariantNumeric: 'tabular-nums' }}>
              1 h 15<span style={{ fontSize: '0.4em', fontWeight: 600 }}> min</span>
            </div>
            <div style={{ fontSize: 'var(--fs-xs)', color: 'var(--cn-navy-300)' }}>{c.saludCifra}</div>
          </div>
        </Card>
      </section>

      <section style={{ maxWidth: 'var(--container-wide)', margin: '0 auto', padding: 'var(--section-y) var(--gutter)' }}>
        <SectionHeading eyebrow={c.estudiosEyebrow} title={c.estudiosTitulo} />
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(300px,1fr))', gap: 'var(--space-5)' }}>
          {c.estudios.map(a => <TarjetaArticulo key={a.slug} a={a} c={c} />)}
        </div>
      </section>

      <section style={{ background: 'var(--surface-sunken)' }}>
        <div style={{ maxWidth: 'var(--container-wide)', margin: '0 auto', padding: 'var(--section-y) var(--gutter)' }}>
          <SectionHeading eyebrow={c.historiaEyebrow} title={c.historiaTitulo} lede={c.historiaLede} />
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(300px,1fr))', gap: 'var(--space-5)' }}>
            {c.historia.map(a => <TarjetaArticulo key={a.slug} a={a} c={c} />)}
          </div>
        </div>
      </section>

      <section style={{ maxWidth: 'var(--container-wide)', margin: '0 auto', padding: 'var(--section-y) var(--gutter)' }}>
        <SectionHeading eyebrow={c.opinionEyebrow} title={c.opinionTitulo} />
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(300px,1fr))', gap: 'var(--space-5)' }}>
          {c.opinion.map(a => <TarjetaArticulo key={a.slug} a={a} c={c} />)}
        </div>
        <Callout tone="quiet" title={c.escribirTitulo} style={{ marginTop: 'var(--space-8)' }}>
          {c.escribirCuerpo1}<a href="mailto:adcdesarrollocomunitario@gmail.com">adcdesarrollocomunitario@gmail.com</a>{c.escribirCuerpo2}
        </Callout>
        <SourceNote>{c.fuente}</SourceNote>
      </section>

      <window.TiraReels titulo={c.reelsTitulo} lede={c.reelsLede} lang={lang} />
    </main>
  );
};