// components/landing/BoletosCounter.tsx
// Live social-proof counter (ux.md 1.7). Renders the confirmed-boletos aggregate
// toward a goal with the SIGNATURE StripeProgressBar. The count is computed
// server-side from a CACHED aggregate (see components/landing/data.ts), counts
// PAID, non-voided tickets only, and exposes NO personal data.
//
// Honesty rules baked in: only confirmed-paid entries are counted (never pending
// or abandoned), and the figure shown matches the auditable boletos total.

import * as React from "react";
import { PopInNumber, StripeProgressBar } from "@/components/ui";
import { AnimatedHeading } from "./AnimatedHeading";
import { formatCount } from "./format";

export interface BoletosCounterProps {
  /** Confirmed (paid, non-voided) boletos. Aggregate only. */
  count: number;
  /** Goal the progress bar fills toward. */
  goal: number;
}

export function BoletosCounter({ count, goal }: BoletosCounterProps) {
  const safeCount = Math.max(0, Math.trunc(count));
  const safeGoal = goal > 0 ? goal : 1;

  return (
    <section
      className="bg-canvas px-5 py-section"
      aria-labelledby="participantes-title"
    >
      <div className="mx-auto flex max-w-[760px] flex-col items-center gap-md text-center">
        <AnimatedHeading
          as="h2"
          id="participantes-title"
          className="font-display text-heading-lg font-bold text-ink-strong"
        >
          Ya somos una comunidad
        </AnimatedHeading>
        <p className="font-body text-body-lg text-ink-strong">
          Ya van{" "}
          <strong className="font-impact text-primary">
            <PopInNumber value={formatCount(safeCount)} />
          </strong>{" "}
          boletos confirmados apoyando a Teletón.
        </p>

        <StripeProgressBar
          className="w-full max-w-[560px]"
          value={safeCount}
          max={safeGoal}
          label={`Boletos confirmados: ${formatCount(safeCount)} de ${formatCount(safeGoal)}`}
          caption={
            <span className="flex items-baseline justify-between gap-md">
              <span>Así vamos</span>
              <span className="font-body text-body-md text-muted">
                Meta: <PopInNumber value={formatCount(safeGoal)} /> boletos
              </span>
            </span>
          }
        />
      </div>
    </section>
  );
}