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

const CN_L_TRANSP = {
  es: {
    heroBadge: 'Proyecto entregado',
    heroH1: '¿Cómo se hizo el censo?',
    heroP: 'El Censo de Nosara se financió con donaciones y aportes voluntarios e incondicionales, y se ejecutó con asesoría técnica del INEC y participación de la CCSS. Compartimos el registro completo: el calendario, lo que se entregó, cómo se hizo y a quién contactar.',
    stat1Value: '95,1', stat1Label: 'Cobertura verificada',
    stat2Value: '150', stat2Label: 'Personas participantes',
    stat3Value: '374', stat3Label: 'Informe público',

    tl1Eyebrow: 'Línea de tiempo · Fase 1',
    tl1Title: 'De la pregunta al informe',
    tl1Lede: 'Etapas verificables, cada una con fecha pública.',
    tl2Eyebrow: 'Línea de tiempo · Fase 2',
    tl2Title: 'Incidencia',
    tl2Lede: 'Qué se hizo con los datos después de publicados.',

    hitos1: [
      { f: '2022–2024', t: 'Investigación previa', d: 'Casi tres años de trabajo: antecedentes, historia del distrito, marco conceptual y diseño del cuestionario sobre la base del Censo Nacional 2022 del INEC.' },
      { f: 'Abril 2024', t: 'Aprobación del Concejo de Distrito', d: 'Presentación del proyecto ante el Concejo de Distrito de Nosara y aprobación para su ejecución.' },
      { f: 'Agosto 2024', t: 'Presentación a organizaciones de base', d: 'Presentación del plan, presupuesto, cronograma y estrategia de cobertura con organizaciones de base comunitaria (OBC) de Nosara.' },
      { f: 'Set–oct 2024', t: 'Pre-censo y capacitación', d: 'Inicio de ejecución del pre-censo: capacitación de censistas, planeamiento, formulario y aplicaciones.' },
      { f: '11 nov – 21 dic 2024', t: 'Levantamiento en campo', d: 'Más de 150 personas entre censistas, cartógrafos, estadísticos, investigadores, estudiantes, docentes y analistas.' },
      { f: 'hasta 15 ene 2025', t: 'Autocenso', d: 'Ventana adicional para hogares no contactados en campo. Cobertura final: 95,1 %.' },
      { f: '18 jul 2025', t: 'Acto comunitario y cápsula del tiempo', d: 'Encuentro abierto con cerca de 100 personas de la comunidad e instituciones del Gobierno central, y sellado de la cápsula del tiempo.' },
      { f: '2 dic 2025', t: 'Presentación pública de resultados', d: 'Presentación de los resultados completos del censo, con cobertura de CRHoy, Delfino.cr, CRC 891 y Periódico Mensaje.' }
    ],
    hitos2: [
      { f: '2025', t: 'Incidencia y gestión de fondos', d: 'Estudio de Necesidades de Salud para la CCSS, presentaciones para grupos organizados del distrito, y búsqueda de fondos para dar seguimiento con asignaciones presupuestarias. Se concreta el presupuesto para el estudio Balance Fiscal de Nosara.' },
      { f: '8 abr 2026', t: 'Presentación del Balance Fiscal', d: 'En instalaciones de la ADI Nosara, con Municipalidad y concejo local invitados, representantes de organizaciones y comunidad en general.' },
      { f: 'Ago 2026', t: 'Cierre de la etapa de recaudación', d: 'Cierre de los esfuerzos de recaudación para seguimiento y de trabajo voluntario. Queda publicada la herramienta para que la ciudadanía haga incidencia con instituciones sobre temas clave.' }
    ],

    finEyebrow: 'Financiamiento',
    finTitle: 'Quién ha sostenido el proyecto',
    finLede: 'El censo lo financiaron familias, vecinos, empresas y donantes de la comunidad interesados en la investigación estadística y el bienestar común, sin incidencia, condiciones ni participación en los procesos operativos, de datos, de recolección o de producción de informes. El proceso se rigió por los principios de ética que forman parte de los censos según el estándar internacional.',
    finBullets: [
      ['ADC, Alianza para el Desarrollo Comunitario', 'Coordinación general de investigación y trabajo comunitario.'],
      ['Asociación ConoSer', 'Coordinación de aportes y seguimiento.'],
      ['INEC', 'Asesoría técnica: materiales, protocolos, cartografía y asesoría hasta julio de 2025. Sin aporte financiero.'],
      ['Familias, vecinos, empresas y donantes de la comunidad', 'Financiamiento íntegro e incondicional de la Fase 1, y parcial del estudio fiscal de la Fase 2.']
    ],
    finButton: 'Escribir para apoyar la Fase 2',

    entEyebrow: 'Qué se entregó',
    entTitle: 'Informes y presentación, públicos',
    entBadge: 'Publicado',
    entregables: [
      { k: 'Informe completo (español)', d: '378 páginas, con cuadros, series históricas y notas metodológicas por capítulo.', accion: 'Descargar PDF (10,7 MB)' },
      { k: 'Full report (English)', d: '374 pages, the complete report translated to English.', accion: 'Download PDF (10,6 MB)' },
      { k: 'Reporte ejecutivo', d: 'Antecedentes, resultados, tendencias y desafíos, la versión resumida del informe completo.', accion: 'Descargar PDF (976 KB)' },
      { k: 'Balance Fiscal de Nosara', d: 'Segundo informe, hecho con un esfuerzo extra tras el censo: cuánto aporta el distrito y cuánto recibe de vuelta. 123 páginas, publicado en marzo de 2026.', accion: 'Descargar PDF (1,3 MB)', accion2: 'Preguntar en NotebookLM' },
      { k: 'Presentación ante el Concejo Municipal', d: 'Exposición completa de los resultados del censo ante el Concejo Municipal de Nicoya, en video.', accion: 'Ver en YouTube' }
    ],

    covEyebrow: 'Cobertura',
    covTitle: 'Lo que dijeron de nosotros',
    covLede: 'Teletica, Repretel, CRHoy, Delfino.cr, Diario Extra, Semanario Universidad y más. La cobertura se agrupa en tres temas.',
    grupos: {
      censo: { title: 'El censo', lede: 'Los resultados del censo distrital y la realidad que retratan.' },
      balance: { title: 'El Balance Fiscal', lede: 'Cuánto genera Nosara al año y cuánto recibe de vuelta.' },
      gemelo: { title: 'El gemelo digital 3D', lede: 'El primer gemelo digital 3D de un distrito costarricense.' }
    },
    videoHeading: 'En video y redes',
    videos: ['Nosara genera millones al año que no llegan directamente a la zona', 'Informe revela que Nosara genera millones pero cuestiona su impacto en la comunidad', 'Entrevista en Edición Nocturna sobre el Censo Nosara (con subtítulos en inglés)', 'Situación de las tierras en Nosara (programa Desayunos)', 'Cobertura del censo', 'Reel del censo'],

    faqEyebrow: 'Preguntas frecuentes',
    faqTitle: 'Lo que suelen preguntarnos',
    faq: [
      ['¿Quién hará cambios en Nosara con estos datos?', 'En la sección Cartas usted puede hacer solicitudes sugeridas a las autoridades responsables de los temas más urgentes, aunque hay más instituciones con competencias en la zona (por ejemplo, PANI, SENARA, OIJ). La comunidad tiene grupos organizados que también recibieron la información, o que pueden usar la publicada acá para acelerar los cambios que el distrito necesita en emergencias, salud, agua, seguridad, vivienda y ambiente. Consulte la información, haga solicitudes o contribuya en los esfuerzos organizados que existan en cada tema.'],
      ['¿Puedo usar los datos?', 'Sí, para lo que quiera: una tesis, una nota, una carta, una sesión municipal. Solo cite la fuente.'],
      ['¿Quién pagó el censo?', 'Familias, vecinos, empresas y donantes de la comunidad, de forma voluntaria e incondicional. Ninguna institución pública aportó dinero; el INEC aportó asesoría técnica.'],
      ['¿Y si veo una cifra rara?', 'Escríbanos y le mandamos el cuadro de origen. Si hay un error, lo corregimos a la vista.'],
      ['¿Habrá otro censo?', 'No hay fecha. Lo que sigue es usar estos datos mientras estén frescos.'],
      ['¿Cómo ayudo?', 'Quedan frentes de la Fase 2 abiertos para quien quiera continuar el esfuerzo. Vea la página de Apoyar.']
    ],

    btnEmail: 'Escribir a adcdesarrollocomunitario@gmail.com',
    btnReport: 'Ver el informe'
  },
  en: {
    heroBadge: 'Project delivered',
    heroH1: 'How was the census done?',
    heroP: 'The Nosara Census was funded by voluntary, unconditional donations and contributions, and carried out with technical guidance from INEC and the participation of the CCSS. We share the full record here: the timeline, what was delivered, how it was done, and who to contact.',
    stat1Value: '95.1', stat1Label: 'Verified coverage',
    stat2Value: '150', stat2Label: 'People involved',
    stat3Value: '374', stat3Label: 'Public report',

    tl1Eyebrow: 'Timeline · Phase 1',
    tl1Title: 'From question to report',
    tl1Lede: 'Verifiable stages, each with a public date.',
    tl2Eyebrow: 'Timeline · Phase 2',
    tl2Title: 'Advocacy',
    tl2Lede: 'What was done with the data after it was published.',

    hitos1: [
      { f: '2022–2024', t: 'Prior research', d: 'Nearly three years of work: background, district history, conceptual framework, and questionnaire design based on INEC’s 2022 National Census.' },
      { f: 'April 2024', t: 'District Council approval', d: 'Presentation of the project to the Nosara District Council and approval to carry it out.' },
      { f: 'August 2024', t: 'Presentation to grassroots organizations', d: 'Presentation of the plan, budget, schedule, and coverage strategy with Nosara’s community based organizations (CBOs).' },
      { f: 'Sep–Oct 2024', t: 'Pre-census and training', d: 'Start of the pre-census: enumerator training, planning, questionnaire, and apps.' },
      { f: 'Nov 11 – Dec 21, 2024', t: 'Field enumeration', d: 'More than 150 people, including enumerators, cartographers, statisticians, researchers, students, teachers, and analysts.' },
      { f: 'through Jan 15, 2025', t: 'Self-enumeration', d: 'Additional window for households not reached in the field. Final coverage: 95.1%.' },
      { f: 'Jul 18, 2025', t: 'Community event and time capsule', d: 'Open gathering with nearly 100 people from the community and central government institutions, and the sealing of the time capsule.' },
      { f: 'Dec 2, 2025', t: 'Public presentation of results', d: 'Presentation of the full census results, with coverage from CRHoy, Delfino.cr, CRC 891, and Periódico Mensaje.' }
    ],
    hitos2: [
      { f: '2025', t: 'Advocacy and fundraising', d: 'Health Needs Study for the CCSS, presentations for organized groups in the district, and fundraising to follow up with budget allocations. The budget for the Nosara Fiscal Balance study is secured.' },
      { f: 'Apr 8, 2026', t: 'Presentation of the Fiscal Balance', d: 'At the ADI Nosara facilities, with the Municipality and local council invited, along with representatives of organizations and the community at large.' },
      { f: 'Aug 2026', t: 'Close of the fundraising stage', d: 'Close of the fundraising and volunteer efforts for follow-up. The tool is published so that citizens can advocate with institutions on key issues.' }
    ],

    finEyebrow: 'Funding',
    finTitle: 'Who has sustained the project',
    finLede: 'The census was funded by families, neighbors, businesses, and community donors interested in statistical research and the common good, with no influence, conditions, or involvement in the operational, data, collection, or report production processes. The process followed the ethical principles that are part of censuses under the international standard.',
    finBullets: [
      ['ADC, Community Development Alliance', 'Overall coordination of research and community work.'],
      ['ConoSer Association', 'Coordination of contributions and follow-up.'],
      ['INEC', 'Technical guidance: materials, protocols, cartography, and advice through July 2025. No financial contribution.'],
      ['Families, neighbors, businesses, and community donors', 'Full, unconditional funding of Phase 1, and partial funding of the Phase 2 fiscal study.']
    ],
    finButton: 'Write to support Phase 2',

    entEyebrow: 'What was delivered',
    entTitle: 'Reports and presentation, all public',
    entBadge: 'Published',
    entregables: [
      { k: 'Full report (Spanish)', d: '378 pages, with tables, historical series, and methodological notes by chapter.', accion: 'Download PDF (10.7 MB)' },
      { k: 'Full report (English)', d: '374 pages, the complete report translated to English.', accion: 'Download PDF (10.6 MB)' },
      { k: 'Executive report', d: 'Background, results, trends, and challenges, the summary version of the full report.', accion: 'Download PDF (976 KB)' },
      { k: 'Nosara Fiscal Balance', d: 'Second report, produced through an extra effort after the census: how much the district contributes and how much it receives back. 123 pages, published in March 2026.', accion: 'Download PDF (1.3 MB)', accion2: 'Ask in NotebookLM' },
      { k: 'Presentation to the Municipal Council', d: 'Full presentation of the census results to the Nicoya Municipal Council, on video.', accion: 'Watch on YouTube' }
    ],

    covEyebrow: 'Coverage',
    covTitle: 'What they said about us',
    covLede: 'Teletica, Repretel, CRHoy, Delfino.cr, Diario Extra, Semanario Universidad, and more. The coverage is grouped into three topics.',
    grupos: {
      censo: { title: 'The census', lede: 'The district census results and the reality they portray.' },
      balance: { title: 'The Fiscal Balance', lede: 'How much Nosara generates a year and how much it gets back.' },
      gemelo: { title: 'The 3D digital twin', lede: 'The first 3D digital twin of a Costa Rican district.' }
    },
    videoHeading: 'On video and social media',
    videos: ['Nosara generates millions a year that do not reach the area directly', 'Report reveals Nosara generates millions but questions its impact on the community', 'Interview on Edición Nocturna about the Nosara Census (English subtitles)', 'The land situation in Nosara (Desayunos program)', 'Census coverage', 'Census reel'],

    faqEyebrow: 'Frequently asked questions',
    faqTitle: 'What we are often asked',
    faq: [
      ['Who will make changes in Nosara with this data?', 'In the Letters section you can send suggested requests to the authorities responsible for the most urgent issues, although there are other institutions with jurisdiction in the area (for example, PANI, SENARA, OIJ). The community has organized groups that also received the information, or that can use what is published here to speed up the changes the district needs in emergencies, health, water, security, housing, and the environment. Review the information, submit requests, or contribute to the organized efforts that exist on each issue.'],
      ['Can I use the data?', 'Yes, for whatever you like: a thesis, an article, a letter, a municipal session. Just cite the source.'],
      ['Who paid for the census?', 'Families, neighbors, businesses, and community donors, voluntarily and unconditionally. No public institution contributed money; INEC provided technical guidance.'],
      ['What if I see an odd figure?', 'Write to us and we will send you the source table. If there is an error, we correct it in plain sight.'],
      ['Will there be another census?', 'There is no date. What comes next is using this data while it is still fresh.'],
      ['How can I help?', 'There are Phase 2 fronts still open for anyone who wants to continue the effort. See the Support page.']
    ],

    btnEmail: 'Write to adcdesarrollocomunitario@gmail.com',
    btnReport: 'View the report'
  }
};

const ENT_HREFS = [
  { href: '../../assets/docs/informe-completo-es.pdf' },
  { href: '../../assets/docs/informe-completo-en.pdf' },
  { href: '../../assets/docs/reporte-ejecutivo-es.pdf' },
  { href: '../../assets/docs/balance-fiscal-es.pdf', href2: 'https://notebook.google.com/notebook/555cd2fe-a8b7-403c-9aa3-c48bae440ba9' },
  { href: 'https://www.youtube.com/watch?v=l3izlhV5Amk' }
];
const ENTREGABLES = (c) => c.entregables.map((e, i) => ({ ...e, ...ENT_HREFS[i] }));

const PRENSA = [
  { tema: 'censo', medio: 'El Faro', titulo: 'Welcome to Guanacaste: la marea de dólares y lujo que inunda la provincia más turística de Costa Rica', fecha: 'Reportaje', href: 'https://beta.elfaro.net/destacados/welcome-to-guanacaste-la-marea-de-dolares-y-lujo-que-inunda-la-provincia-mas-turistica-de-costa-rica' },
  { tema: 'censo', medio: 'Teletica', titulo: 'El presente: las dos caras del auge inmobiliario en Guanacaste', fecha: 'Reportaje', href: 'https://www.teletica.com/reportajes/el-presente-las-dos-caras-del-auge-inmobiliario-en-guanacaste_413847' },
  { tema: 'censo', medio: 'Teletica', titulo: 'El futuro: la lucha por un Guanacaste sostenible', fecha: 'Reportaje', href: 'https://www.teletica.com/reportajes/el-futuro-la-lucha-guanacaste-sostenible_413851' },
  { tema: 'censo', medio: 'Repretel', titulo: 'Preocupante estadística: 45 % de los fallecidos en zona costera no recibió atención médica', fecha: '2025', href: 'https://www.repretel.com/noticia/preocupante-estadistica-45-de-los-fallecidos-en-zona-costera-no-recibio-atencion-medica/' },
  { tema: 'censo', medio: 'Diario Extra', titulo: 'Zona azul en riesgo: esto dice el censo en Nosara', fecha: '2025', href: 'https://www.diarioextra.com/noticia/zona-azul-en-riesgo-esto-dice-censo-en-nosara/' },
  { tema: 'censo', medio: 'CRHoy', titulo: 'Nosara presenta su primer censo distrital y expone cambios, brechas y desafíos urgentes', fecha: '2 dic 2025', href: 'https://crhoy.com/nacionales/nosara-presenta-su-primer-censo-distrital-y-expone-cambios-brechas-y-desafios-urgentes/' },
  { tema: 'censo', medio: 'Delfino.cr', titulo: 'Primer censo distrital comunitario revela fuerte desbalance entre crecimiento y capacidad estatal en Nosara', fecha: '2 dic 2025', href: 'https://delfino.cr/2025/12/primer-censo-distrital-comunitario-revela-fuerte-desbalance-entre-crecimiento-y-capacidad-estatal-en-nosara' },
  { tema: 'censo', medio: 'Semanario Universidad', titulo: 'Resultados de primer censo distrital liderado por una comunidad realizado en Nosara revelan brechas crecientes', fecha: 'Dic 2025', href: 'https://semanariouniversidad.com/pais/resultados-de-primer-censo-distrital-liderado-por-una-comunidad-realizado-en-nosara-revelan-brechas-crecientes/' },
  { tema: 'censo', medio: 'CRC 891', titulo: 'Nosara enciende alertas: censo comunitario revela fuerte desequilibrio entre boom turístico y rezago estatal', fecha: '5 dic 2025', href: 'https://crc891.com/nacionales/nosara-enciende-alertas-censo-comunitario-revela-fuerte-desequilibrio-entre-boom-turistico-y-rezago-estatal/' },
  { tema: 'censo', medio: 'Periódico Mensaje (Guanacaste)', titulo: 'Censo realizado en Nosara destaca la necesidad de ampliar los servicios de emergencias 24/7', fecha: '11 dic 2025', href: 'https://www.periodicomensaje.com/cantonales/14207-censo-realizado-en-nosara-destaca-la-necesidad-de-ampliar-los-servicios-de-emergencias-24-7' },
  { tema: 'censo', medio: 'Semanario Universidad', titulo: 'Nosara: aprender sobre datos y relatos', fecha: '3 jun 2026', href: 'https://semanariouniversidad.com/opinion/nosara-aprender-sobre-datos-y-relatos/' },
  { tema: 'balance', medio: 'Semanario Universidad', titulo: 'Nosara genera ₡958.000 millones al año y solo recibe ₡12 millones en inversión directa', fecha: '6 may 2026', href: 'https://semanariouniversidad.com/pais/nosara-genera-%E2%82%A1958-000-millones-al-ano-y-solo-recibe-%E2%82%A112-millones-en-inversion-directa/' },
  { tema: 'balance', medio: 'Surcos Digital', titulo: 'Nosara genera USD 2.130 millones al año pero recibe menos de 1 céntimo por cada colón que le genera al municipio', fecha: '2026', href: 'https://surcosdigital.com/nosara-genera-usd-2-130-millones-al-ano-pero-recibe-menos-de-1-centimo-por-cada-colon-que-le-genera-al-municipio/' },
  { tema: 'gemelo', medio: 'Semanario Universidad', titulo: 'Nosara cuenta con el primer gemelo digital 3D de un distrito costarricense', fecha: '7 ago 2026', href: 'https://semanariouniversidad.com/pais/nosara-cuenta-con-el-primer-gemelo-digital-3d-de-un-distrito-costarricense/' },
  { tema: 'gemelo', medio: 'Delfino.cr', titulo: 'Nosara es el primer lugar de Centroamérica en obtener un gemelo digital, dicen investigadores', fecha: '8 ago 2026', href: 'https://delfino.cr/2026/08/nosara-es-el-primer-lugar-de-centroamerica-en-obtener-un-gemelo-digital-dicen-investigadores' },
  { tema: 'gemelo', medio: 'Guanacaste a la Altura', titulo: 'Presentan el primer gemelo digital 3D de un distrito costarricense', fecha: '7 ago 2026', href: 'https://www.guanacastealaaltura.com/presentan-el-primer-gemelo-digital-3d-de-un-distrito-costarricense/' }
];

const VID_HREFS = [
  { medio: 'Radioemisoras UCR', href: 'https://www.youtube.com/watch?v=5L97kWtNm4U' },
  { medio: 'Radioemisoras UCR', href: 'https://www.youtube.com/watch?v=4l2wPK_mQt8' },
  { medio: 'Repretel', href: 'https://www.youtube.com/watch?v=4FbU9Nh1hJc' },
  { medio: 'Radioemisoras UCR', href: 'https://www.youtube.com/watch?v=GR32M5o6T4I' },
  { medio: 'Instagram', href: 'https://www.instagram.com/p/DMv8vruN1Oc/' },
  { medio: 'Instagram', href: 'https://www.instagram.com/reel/DYVu4-6MuzL/' }
];
const VIDEOS = (c) => c.videos.map((titulo, i) => ({ ...VID_HREFS[i], titulo }));

function Timeline({ hitos }) {
  return (
    <div style={{ display: 'grid', gap: 0 }}>
      {hitos.map((h, i) => (
        <div key={h.t} style={{ display: 'grid', gridTemplateColumns: '190px 28px 1fr', gap: 'var(--space-5)', alignItems: 'start', paddingBottom: 'var(--space-8)' }}>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 'var(--fs-3xs)', letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--cn-red-600)', paddingTop: 5, textAlign: 'right' }}>{h.f}</div>
          <div style={{ position: 'relative', display: 'grid', justifyItems: 'center' }}>
            <span style={{ width: 14, height: 14, borderRadius: '50%', border: '3px solid var(--cn-navy-700)', background: 'var(--surface-page)', marginTop: 4, zIndex: 1 }} />
            {i < hitos.length - 1 && <span style={{ position: 'absolute', top: 18, bottom: -32, width: 2, background: 'var(--border-default)' }} />}
          </div>
          <div>
            <h3 style={{ fontSize: 'var(--fs-lg)', margin: '0 0 6px' }}>{h.t}</h3>
            <p style={{ margin: 0, fontSize: 'var(--fs-sm)', color: 'var(--text-muted)', maxWidth: '62ch' }}>{h.d}</p>
          </div>
        </div>
      ))}
    </div>
  );
}

window.Transparencia = function Transparencia({ onGo, lang = 'es' }) {
  const c = CN_L_TRANSP[lang] || CN_L_TRANSP.es;
  return (
    <main id="transparencia">
      <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.heroBadge}</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: '19ch' }}>
            {c.heroH1}
          </h1>
          <p style={{ color: 'var(--cn-navy-200)', fontSize: 'var(--fs-lg)', maxWidth: '62ch', margin: 0 }}>
            {c.heroP}
          </p>
          <div style={{ display: 'flex', gap: 'var(--space-10)', marginTop: 'var(--space-8)', flexWrap: 'wrap' }}>
            <Stat tone="inverse" size="sm" value={c.stat1Value} unit="%" label={c.stat1Label} />
            <Stat tone="inverse" size="sm" value={c.stat2Value} unit="+" label={c.stat2Label} />
            <Stat tone="inverse" size="sm" value={c.stat3Value} unit="pp." label={c.stat3Label} />
          </div>
        </div>
      </section>

      <section style={{ maxWidth: 'var(--container-wide)', margin: '0 auto', padding: 'var(--section-y) var(--gutter)' }}>
        <SectionHeading eyebrow={c.tl1Eyebrow} title={c.tl1Title} lede={c.tl1Lede} />
        <Timeline hitos={c.hitos1} />
      </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.tl2Eyebrow} title={c.tl2Title} lede={c.tl2Lede} />
          <Timeline hitos={c.hitos2} />
        </div>
      </section>

      <section style={{ maxWidth: 'var(--container-prose)', margin: '0 auto', padding: 'var(--section-y) var(--gutter)' }}>
        <SectionHeading eyebrow={c.finEyebrow} title={c.finTitle}
          lede={c.finLede} />
        <ul style={{ margin: 0, padding: 0, listStyle: 'none', display: 'grid', gap: 'var(--space-6)' }}>
          {c.finBullets.map(([a, b]) => (
            <li key={a} style={{ display: 'grid', gridTemplateColumns: '10px 1fr', gap: 'var(--space-4)' }}>
              <span style={{ width: 10, height: 10, borderRadius: '50%', background: 'var(--cn-red-600)', marginTop: 8 }} />
              <div>
                <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 'var(--fs-md)', color: 'var(--cn-navy-700)' }}>{a}</div>
                <div style={{ fontSize: 'var(--fs-sm)', color: 'var(--text-muted)', marginTop: 2 }}>{b}</div>
              </div>
            </li>
          ))}
        </ul>
        <div style={{ marginTop: 'var(--space-8)' }}>
          <Button variant="accent" href="mailto:adcdesarrollocomunitario@gmail.com?subject=Apoyar%20la%20Fase%202%20del%20Censo%20Nosara">{c.finButton}</Button>
        </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.entEyebrow} title={c.entTitle} />
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(260px,1fr))', gap: 'var(--space-4)' }}>
            {ENTREGABLES(c).map(e => (
              <Card key={e.k} tone="surface" accentTop padding="var(--space-6)">
                <Badge tone="navy" size="sm">{c.entBadge}</Badge>
                <h3 style={{ fontSize: 'var(--fs-lg)', margin: '12px 0 8px' }}>{e.k}</h3>
                <p style={{ margin: '0 0 var(--space-4)', fontSize: 'var(--fs-sm)', color: 'var(--text-muted)' }}>{e.d}</p>
                <div style={{ display: 'flex', gap: 'var(--space-2)', flexWrap: 'wrap' }}>
                  <Button variant="outline" size="sm" href={e.href} target="_blank" rel="noopener">{e.accion}</Button>
                  {e.href2 && <Button variant="ghost" size="sm" href={e.href2} target="_blank" rel="noopener">{e.accion2}</Button>}
                </div>
              </Card>
            ))}
          </div>
        </div>
      </section>

      <section style={{ maxWidth: 'var(--container-wide)', margin: '0 auto', padding: 'var(--section-y) var(--gutter)' }}>
        <SectionHeading eyebrow={c.covEyebrow} title={c.covTitle}
          lede={c.covLede} />
        {['censo', 'balance', 'gemelo'].map(function (tk) {
          const items = PRENSA.filter(p => p.tema === tk);
          if (!items.length) return null;
          const g = c.grupos[tk];
          return (
            <div key={tk} style={{ marginBottom: 'var(--space-8)' }}>
              <h3 style={{ fontSize: 'var(--fs-lg)', margin: '0 0 2px' }}>{g.title}</h3>
              <p style={{ margin: '0 0 var(--space-4)', fontSize: 'var(--fs-sm)', color: 'var(--text-muted)' }}>{g.lede}</p>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(300px,1fr))', gap: 'var(--space-4)' }}>
                {items.map(p => (
                  <a key={p.href} href={p.href} target="_blank" rel="noopener" style={{ textDecoration: 'none', display: 'block' }}>
                    <Card tone="surface" interactive padding="var(--space-5)">
                      <div style={{ display: 'flex', justifyContent: 'space-between', gap: 'var(--space-3)', marginBottom: 6 }}>
                        <span style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 'var(--fs-xs)', color: 'var(--cn-red-600)' }}>{p.medio}</span>
                        <span style={{ fontFamily: 'var(--font-mono)', fontSize: 'var(--fs-3xs)', color: 'var(--text-faint)', whiteSpace: 'nowrap' }}>{p.fecha}</span>
                      </div>
                      <p style={{ margin: 0, fontSize: 'var(--fs-sm)', color: 'var(--text-body)', lineHeight: 1.5 }}>{p.titulo}</p>
                    </Card>
                  </a>
                ))}
              </div>
            </div>
          );
        })}

        <h3 style={{ fontSize: 'var(--fs-lg)', margin: 'var(--space-10) 0 var(--space-5)' }}>{c.videoHeading}</h3>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 'var(--space-3)' }}>
          {VIDEOS(c).map(v => (
            <Button key={v.href} variant="outline" size="sm" href={v.href} target="_blank" rel="noopener">
              {v.medio}: {v.titulo}
            </Button>
          ))}
        </div>
      </section>

      <section 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={c.faqEyebrow} title={c.faqTitle} />
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(300px,1fr))', gap: 'var(--space-6)' }}>
            {c.faq.map(function (q) {
              return <div key={q[0]}>
                <h3 style={{ color: 'var(--cn-cream-300)', fontSize: 'var(--fs-lg)', margin: '0 0 8px', maxWidth: '26ch' }}>{q[0]}</h3>
                <p style={{ color: 'var(--cn-navy-200)', fontSize: 'var(--fs-sm)', margin: 0, maxWidth: '52ch' }}>{q[1]}</p>
              </div>;
            })}
          </div>
          <div style={{ display: 'flex', gap: 'var(--space-3)', flexWrap: 'wrap', marginTop: 'var(--space-10)' }}>
            <Button variant="inverse" href="mailto:adcdesarrollocomunitario@gmail.com">{c.btnEmail}</Button>
            <Button variant="inverseOutline" onClick={() => onGo && onGo('reporte')}>{c.btnReport}</Button>
          </div>
          <SourceNote tone="inverse">{TD.source}</SourceNote>
        </div>
      </section>
    </main>
  );
};