// components/landing/CauseImpact.tsx
// Cause + impact section (ux.md 1.5). Carries the cause-driven 35-50 segment and
// keeps the charity framing primary (INDECOPI posture). This is the one section
// where the playful tone yields to the institutional voice: warm but straight.
//
// Uses the SIGNATURE ImpactStat primitive. The two figures shown are Teleton
// Peru's own published cumulative national-impact numbers (the "Atenciones" and
// "Ninos beneficiados" counters from teleton.pe), framed explicitly as Teleton's
// historical impact, NOT as a projection of this raffle. No money-to-impact
// figure ("S/ X cubre una terapia") is invented here: that line stays a token
// until Teleton supplies a real, citable figure.

import * as React from "react";
import { ImpactStat, PopInNumber } from "@/components/ui";
import { AnimatedHeading } from "./AnimatedHeading";
import { BrushUnderline, Doodle } from "./brand";

export function CauseImpact() {
  return (
    <section
      className="relative overflow-hidden bg-canvas px-5 py-section"
      aria-labelledby="causa-title"
    >
      <Doodle name="corazon-01" className="absolute left-6 top-10 hidden w-12 opacity-20 sm:block" />
      <Doodle name="estrella-01" className="absolute right-8 bottom-12 hidden w-12 opacity-20 sm:block" />
      <div className="relative mx-auto flex max-w-[760px] flex-col items-center gap-md text-center">
        <AnimatedHeading
          as="h2"
          id="causa-title"
          className="font-display text-heading-lg font-bold text-ink-strong"
        >
          ¿A dónde va tu ayuda?
        </AnimatedHeading>
        <p className="max-w-[58ch] text-pretty font-body text-body-lg text-ink-strong">
          Cada boleto contribuye directamente al financiamiento de la atención y
          rehabilitación de cientos de niñas y niños de la Teletón a nivel
          nacional. Gracias al esfuerzo de todos, podemos seguir generando
          oportunidades para quienes más lo necesitan.
        </p>
        <p className="max-w-[58ch] text-pretty font-body text-body-md text-muted">
          Tu aporte, sumado al de miles de personas, permite lograr resultados
          como estos:
        </p>

        {/* Teleton's published cumulative national impact. These are Teleton's
            own historical figures, not a projection of this raffle. */}
        <dl className="mt-md grid w-full grid-cols-1 gap-lg xs:grid-cols-2">
          <div>
            <dt className="sr-only">Atenciones realizadas a nivel nacional</dt>
            <dd>
              <ImpactStat
                figure={<PopInNumber value="128,826" />}
                size="primary"
                label="Atenciones realizadas a nivel nacional por Teletón"
              />
            </dd>
          </div>
          <div>
            <dt className="sr-only">Niños beneficiados a nivel nacional</dt>
            <dd>
              <ImpactStat
                figure={<PopInNumber value="732" />}
                size="secondary"
                label="Niños beneficiados a nivel nacional por Teletón"
              />
            </dd>
          </div>
        </dl>

        <p className="mt-sm max-w-[58ch] font-body text-body-md text-muted">
          Cada sol recibido se administra de forma responsable y se rinde cuenta
          de forma pública.
        </p>

        {/* Campaign closing line (docx): the signature "La hacemos todos". */}
        <div className="mt-lg flex flex-col items-center gap-2">
          <p className="max-w-[42ch] font-display text-heading-lg font-extrabold text-ink-strong">
            Porque Teletón no la hace una persona.{" "}
            <span className="text-primary">La hacemos todos.</span>
          </p>
          <BrushUnderline className="h-3 w-56" />
        </div>
      </div>
    </section>
  );
}