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

/* Página para donantes, fundaciones y quien quiera continuar el esfuerzo.
 *
 * Lo que esta página NO hace, por decisión: no vende el censo como protección
 * del valor de la propiedad ni como seguridad para el turismo, y no insiste en
 * cifras de dólares que atraigan más objeciones que confianza. Habla de
 * población, de datos y de trabajo comunitario, eso es lo que sostiene la
 * legitimidad del proyecto.
 */

/* Datos de cada frente. monto y estado son datos y no dependen del idioma;
 * el texto visible (nombre, resultado, detalle) vive en el diccionario L. */
const FRENTES_DATA = [
  { monto: 7500, estado: 'ejecutado' },
  { monto: 3000, estado: 'ejecutado' },
  { monto: 7500, estado: 'abierto' },
  { monto: 7500, estado: 'abierto' },
  { monto: 7500, estado: 'abierto' },
  { monto: 1000, estado: 'abierto' }
];

const CN_L_APOYAR = {
  es: {
    numLocale: 'de-DE',

    heroBadge: 'Para donantes y para quien quiera continuar',
    heroH1: 'El segundo distrito de mayor crecimiento de población en Costa Rica, que aún no sabía cuánta gente vivía aquí',
    heroP: 'Ahora lo sabe, casa por casa y con 150 variables para tomar las mejores decisiones.',

    logradoEyebrow: 'Qué se logró',
    logradoTitle: 'Gracias al esfuerzo y la participación de todo un distrito, se alcanzó:',
    logradoBullets: [
      'Cobertura en medios nacionales.',
      'Presentación comunitaria y municipal.',
      'Preparación de informes: Salud, Fiscal y Censo Completo, en español e inglés.',
      'Incidencia: creación de comités cívicos y fortalecimiento de grupos ya organizados que buscan cambios positivos para el futuro de la comunidad.'
    ],
    pudoTitle: 'Se pudo haber alcanzado más',
    pudoBody: 'La cobertura de fondos para la etapa de incidencia llegó hasta julio de 2025. Lo que sigue abajo son los frentes que quedaron sin terminar.',

    diligenciaEyebrow: 'Diligencia debida',
    diligenciaTitle: 'Lo que suele pedirse antes de dar, ya respondido',
    diligenciaLede: 'Para no hacerle gastar treinta horas en un formulario. Si necesita algo que no está aquí, lo mandamos el mismo día.',
    diligenciaCards: [
      ['Quién ejecuta', 'ADC (Alianza para el Desarrollo Comunitario) y Asociación ConoSer, dos organizaciones sin fines de lucro costarricenses con domicilio en el distrito.'],
      ['Quién supervisa la plata', 'Junta Directiva de ConoSer, con la firma contable Alta Batalla y un contralor externo. Ninguna persona donante participa en la supervisión del gasto.'],
      ['Destino de los fondos de la Fase 1', '100 % a costos directos de programa. Cero gastos administrativos, cero costos indirectos.'],
      ['Contrapartida local', 'US$ 36.800 en hospedaje donado por empresas del distrito y la Asociación de Desarrollo Integral, más US$ 13.320 en otras especies.'],
      ['Respaldo técnico', 'INEC (instituto nacional de estadística) en materiales, protocolos, cartografía y resguardo final de la base. Participación de la CCSS en el diseño del cuestionario y acompañando la recolección de datos.'],
      ['Revisión académica', 'Docentes, investigadores y estudiantes de la Universidad Nacional y del Tecnológico de Costa Rica.'],
      ['Gobernanza local', 'El Concejo de Distrito de Nosara aprobó el proyecto por unanimidad, y fue presentado ante la comunidad y, después, ante el Concejo Municipal de Nicoya, para que lo usen en sus decisiones y procesos de asignación presupuestaria.']
    ],
    compromisoTitle: 'Nuestro compromiso, por escrito',
    compromisoBody: 'Ningún tercero, persona u organización donante tuvo acceso a los resultados antes de su publicación, ni la posibilidad de revisarlos, corregirlos o retrasarlos. La publicación fue completa y simultánea. No existen niveles de donación que otorguen asiento consultivo, acceso anticipado a datos ni influencia sobre qué se investiga. Quien aporta apoyo lo hace de forma voluntaria e incondicional, para resolver una pregunta abierta de investigación.',

    ejecutadoEyebrow: 'Lo ejecutado',
    ejecutadoTitle: 'Dos frentes financiados y ejecutados',
    ejecutadoCaption: 'Fase 2, frentes ya ejecutados.',
    colFrente: 'Frente',
    colMonto: 'Monto',
    colResultado: 'Resultado',

    pendienteEyebrow: 'Lo pendiente',
    pendienteTitle: 'Frentes abiertos para quien quiera continuar',
    pendienteLede: (total) => 'Estos quedan pendientes para otras entidades, voluntarios, universidades o grupos que quieran seguir el esfuerzo. Los montos son de la propuesta original (23 de setiembre de 2025) y hay que revisarlos antes de comprometer un aporte. Quedan US$ ' + total + ' sin financiar en total.',
    colMontoRef: 'Monto de referencia',
    colDetalle: 'Qué incluye',
    montoRefLabel: 'Presupuesto de referencia',
    botonContinuar: 'Escribir para continuar un frente',

    revisadoEyebrow: 'Quién más lo ha revisado',
    revisadoTitle: 'Prensa, academia e instituciones lo respaldan',
    revisadoCards: [
      ['Semanario Universidad', 'Cobertura de los resultados del censo y del Balance Fiscal, además de una columna del equipo sobre datos y relatos.'],
      ['Estado de la Nación', 'El informe 2025 usa a Nosara como caso de referencia nacional.'],
      ['INEC', 'Calculó la cobertura, aportó protocolos y cartografía, y resguarda la base final.'],
      ['UNA y TEC', 'Revisión metodológica por parte de personal docente e investigador.'],
      ['Contraloría General de la República', 'La rendición de cuentas del cantón de Nicoya obtuvo 4,5 sobre 100 en el índice de la Defensoría y la UCR: el último lugar del país. Ese es el vacío que este proyecto llena.']
    ],
    infraTitle: 'Una infraestructura común para todo el distrito',
    infraBody: 'En el distrito trabajan alrededor de sesenta organizaciones sociales, que compiten por los mismos fondos. El censo es la base compartida que le ahorra a cada una levantar su propio diagnóstico: un solo conteo, abierto, que todas pueden usar. Financiarlo es financiar el denominador de todo lo demás.',

    frentes: [
      { nombre: 'Recursos fiscales', resultado: 'Balance Fiscal Territorial de Nosara: 123 páginas, publicado en marzo de 2026.' },
      { nombre: 'Comunicación del censo', detalle: 'Difusión de resultados, sitio web bilingüe con los datos alojados al menos tres años, artículos e infografías. Copias digitales para asociaciones de desarrollo y la biblioteca comunitaria.' },
      { nombre: 'Educación: rezago educativo', detalle: 'Un programa de talleres con juntas de educación, familias y docentes, más entrega técnica al MEP regional y alfabetización en datos censales. Meta: 500 estudiantes alcanzados.' },
      { nombre: 'Ambiental y humano', detalle: 'Estudio de factibilidad de saneamiento, enlace técnico para ASADAS, estudio hídrico distrital y mapeo de zonas socialmente vulnerables, incluida la zona de amortiguamiento del Refugio de Ostional.' },
      { nombre: 'Historia y memoria', detalle: 'Libro «La Historia de Nosara» en español e inglés, con investigación documental y entrevistas orales a personas adultas mayores.' },
      { nombre: 'Administración e impresión', detalle: 'Copias impresas para entidades y archivo documental.' }
    ]
  },

  en: {
    numLocale: 'en-US',

    heroBadge: 'For donors and for anyone who wants to carry it forward',
    heroH1: "Costa Rica's second fastest-growing district by population, and it still did not know how many people lived here",
    heroP: 'Now it does, house by house, with 150 variables to make better decisions.',

    logradoEyebrow: 'What was achieved',
    logradoTitle: 'Thanks to the effort and participation of an entire district, we achieved:',
    logradoBullets: [
      'Coverage in national media.',
      'Community and municipal presentations.',
      'Reports prepared: Health, Fiscal, and Full Census, in Spanish and English.',
      "Advocacy: new civic committees formed and existing organized groups strengthened, all working toward positive change for the community's future."
    ],
    pudoTitle: 'More could have been done',
    pudoBody: 'Funding for the advocacy stage ran only through July 2025. What follows below are the fronts that were left unfinished.',

    diligenciaEyebrow: 'Due diligence',
    diligenciaTitle: 'What donors usually ask before giving, already answered',
    diligenciaLede: 'So you do not have to spend thirty hours on a form. If you need something that is not here, we will send it the same day.',
    diligenciaCards: [
      ['Who carries it out', 'ADC (Alianza para el Desarrollo Comunitario) and Asociación ConoSer, two Costa Rican nonprofits based in the district.'],
      ['Who oversees the money', "ConoSer's Board of Directors, together with the accounting firm Alta Batalla and an external auditor. No donor takes part in overseeing how funds are spent."],
      ['Where Phase 1 funds go', '100% to direct program costs. Zero administrative expenses, zero indirect costs.'],
      ['Local match', 'US$ 36,800 in lodging donated by district businesses and the Asociación de Desarrollo Integral, plus US$ 13,320 in other in-kind contributions.'],
      ['Technical support', 'INEC (the national statistics institute) provided materials, protocols, mapping, and final safekeeping of the database. The CCSS took part in designing the questionnaire and supported data collection.'],
      ['Academic review', 'Faculty, researchers, and students from the Universidad Nacional and the Tecnológico de Costa Rica.'],
      ['Local governance', 'The Nosara District Council approved the project unanimously. It was presented to the community and then to the Nicoya Municipal Council, for use in their decisions and budget allocation.']
    ],
    compromisoTitle: 'Our commitment, in writing',
    compromisoBody: 'No third party, donor, or organization had access to the results before publication, nor any ability to review, revise, or delay them. Publication was complete and simultaneous. There are no donation tiers that grant an advisory seat, early access to data, or influence over what gets studied. Anyone who contributes does so voluntarily and unconditionally, to help answer an open research question.',

    ejecutadoEyebrow: 'What has been delivered',
    ejecutadoTitle: 'Two fronts funded and delivered',
    ejecutadoCaption: 'Phase 2, fronts already delivered.',
    colFrente: 'Front',
    colMonto: 'Amount',
    colResultado: 'Result',

    pendienteEyebrow: 'What remains',
    pendienteTitle: 'Open fronts for anyone who wants to continue',
    pendienteLede: (total) => 'These remain open for other organizations, volunteers, universities, or groups that want to carry the work forward. The amounts come from the original proposal (September 23, 2025) and should be reviewed before committing a contribution. US$ ' + total + ' remains unfunded in total.',
    colMontoRef: 'Reference amount',
    colDetalle: 'What it includes',
    montoRefLabel: 'Reference budget',
    botonContinuar: 'Write to us about continuing a front',

    revisadoEyebrow: 'Who else has reviewed it',
    revisadoTitle: 'Press, academia, and institutions stand behind it',
    revisadoCards: [
      ['Semanario Universidad', 'Coverage of the census results and the Fiscal Balance, plus a column by the team on data and storytelling.'],
      ['Estado de la Nación', 'Its 2025 report uses Nosara as a national reference case.'],
      ['INEC', 'Calculated coverage, provided protocols and mapping, and safeguards the final database.'],
      ['UNA and TEC', 'Methodological review by faculty and research staff.'],
      ['Contraloría General de la República', "The canton of Nicoya scored 4.5 out of 100 for accountability in the index by the Ombudsman's Office and the UCR, the lowest in the country. That is the gap this project fills."]
    ],
    infraTitle: 'Shared infrastructure for the whole district',
    infraBody: 'Around sixty social organizations work in the district, all competing for the same funds. The census is the shared foundation that spares each one from building its own diagnostic: a single, open count that all of them can use. To fund it is to fund the denominator for everything else.',

    frentes: [
      { nombre: 'Fiscal resources', resultado: 'Nosara Territorial Fiscal Balance: 123 pages, published in March 2026.' },
      { nombre: 'Census communication', detalle: 'Dissemination of results, a bilingual website hosting the data for at least three years, articles, and infographics. Digital copies for development associations and the community library.' },
      { nombre: 'Education: learning gaps', detalle: 'A program of workshops with school boards, families, and teachers, plus a technical handoff to the regional MEP and training in census data literacy. Goal: 500 students reached.' },
      { nombre: 'Environment and people', detalle: 'A sanitation feasibility study, technical liaison for the ASADAS water boards, a district-wide water study, and mapping of socially vulnerable areas, including the buffer zone of the Ostional Refuge.' },
      { nombre: 'History and memory', detalle: 'The book "La Historia de Nosara" in Spanish and English, drawing on documentary research and oral interviews with older adults.' },
      { nombre: 'Administration and printing', detalle: 'Printed copies for institutions and a documentary archive.' }
    ]
  }
};

window.Apoyar = function Apoyar({ onGo, lang = 'es' }) {
  const c = CN_L_APOYAR[lang] || CN_L_APOYAR.es;

  const FRENTES = FRENTES_DATA.map((f, i) => ({ ...f, ...c.frentes[i] }));
  const abiertos = FRENTES.filter(f => f.estado === 'abierto');
  const abierto = abiertos.reduce((s, f) => s + f.monto, 0);

  return (
    <main id="apoyar">
      <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: '22ch' }}>
            {c.heroH1}
          </h1>
          <p style={{ color: 'var(--cn-navy-200)', fontSize: 'var(--fs-lg)', maxWidth: '58ch', margin: 0 }}>
            {c.heroP}
          </p>
        </div>
      </section>

      <section style={{ maxWidth: 'var(--container-wide)', margin: '0 auto', padding: 'var(--section-y) var(--gutter)' }}>
        <SectionHeading eyebrow={c.logradoEyebrow} title={c.logradoTitle} />
        <ul style={{ margin: '0 0 var(--space-6)', padding: 0, listStyle: 'none', display: 'grid', gap: 'var(--space-4)', maxWidth: '68ch' }}>
          {c.logradoBullets.map((texto, n) => (
            <li key={n} style={{ display: 'grid', gridTemplateColumns: '24px 1fr', gap: 'var(--space-3)', fontSize: 'var(--fs-md)', color: 'var(--text-body)' }}>
              <span style={{ width: 10, height: 10, borderRadius: '50%', background: 'var(--cn-red-600)', marginTop: 9 }} />
              <span>{texto}</span>
            </li>
          ))}
        </ul>
        <Callout tone="quiet" title={c.pudoTitle}>
          {c.pudoBody}
        </Callout>
      </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.diligenciaEyebrow} title={c.diligenciaTitle}
            lede={c.diligenciaLede} />
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(280px,1fr))', gap: 'var(--space-5)' }}>
            {c.diligenciaCards.map(([k, v]) => (
              <Card key={k} tone="surface" padding="var(--space-6)">
                <Eyebrow>{k}</Eyebrow>
                <p style={{ margin: '8px 0 0', fontSize: 'var(--fs-sm)', color: 'var(--text-body)' }}>{v}</p>
              </Card>
            ))}
          </div>

          <p style={{ marginTop: 'var(--space-8)', fontSize: 'var(--fs-xs)', color: 'var(--text-muted)', maxWidth: '86ch', lineHeight: 1.6 }}>
            <strong style={{ color: 'var(--text-body)', fontFamily: 'var(--font-display)', fontWeight: 600 }}>{c.compromisoTitle}.</strong> {c.compromisoBody}
          </p>
        </div>
      </section>

      <section style={{ maxWidth: 'var(--container-wide)', margin: '0 auto', padding: 'var(--section-y) var(--gutter)' }}>
        <SectionHeading eyebrow={c.ejecutadoEyebrow}
          title={c.ejecutadoTitle} />
        <DataTable
          caption={c.ejecutadoCaption}
          columns={[{ key: 'frente', label: c.colFrente }, { key: 'monto', label: c.colMonto }, { key: 'resultado', label: c.colResultado }]}
          rows={FRENTES.filter(f => f.estado === 'ejecutado').map(f => ({
            frente: f.nombre, monto: 'US$ ' + f.monto.toLocaleString(c.numLocale), resultado: f.resultado || f.detalle
          }))} />

        <SectionHeading eyebrow={c.pendienteEyebrow} title={c.pendienteTitle}
          lede={c.pendienteLede(abierto.toLocaleString(c.numLocale))}
          style={{ marginTop: 'var(--space-12)' }} />
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(280px,1fr))', gap: 'var(--space-5)' }}>
          {abiertos.map(f => (
            <Card key={f.nombre} tone="surface" padding="var(--space-6)">
              <h3 style={{ fontSize: 'var(--fs-md)', margin: '0 0 8px' }}>{f.nombre}</h3>
              <p style={{ margin: '0 0 var(--space-4)', fontSize: 'var(--fs-sm)', color: 'var(--text-muted)', lineHeight: 1.55 }}>{f.detalle}</p>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 'var(--fs-3xs)', letterSpacing: '0.06em', textTransform: 'uppercase', color: 'var(--text-faint)' }}>
                {c.montoRefLabel}: US$ {f.monto.toLocaleString(c.numLocale)}
              </div>
            </Card>
          ))}
        </div>

        <div style={{ display: 'flex', gap: 'var(--space-3)', flexWrap: 'wrap', marginTop: 'var(--space-6)' }}>
          <Button variant="accent" size="lg" href="mailto:adcdesarrollocomunitario@gmail.com?subject=Continuar%20un%20frente%20del%20Censo%20Nosara">
            {c.botonContinuar}
          </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)' }}>
          <Callout tone="quiet" title={c.infraTitle}>
            {c.infraBody}
          </Callout>
        </div>
      </section>
    </main>
  );
};