---
/**
 * ProofNumbers Component
 *
 * A compact horizontal "stat band" rendered between the social-proof logo
 * strip and the services grid on the homepage. Replaces the older
 * "Why Choose Us" / "Built for Your Success" benefits grid — the goal is
 * to lead with hard, scannable proof points instead of soft adjectives.
 *
 * Layout:
 *   - 2 × 2 grid on mobile (<md)
 *   - 4 × 1 horizontal band on desktop (md+)
 *
 * Typography matches the site's existing tokens (text-secondary-* /
 * text-primary-*) and supports dark mode via Tailwind's `dark:` variants
 * so the band stays legible under the theme toggle.
 *
 * @prop {Array<{ value: string; label: string }>} [items] - override the
 *        default set of proof points. Each `value` is rendered as the large
 *        headline number, `label` is the one-line caption underneath.
 *
 * NOTE on the default copy: these numbers are placeholder defaults pending
 * stakeholder confirmation — update them against the latest delivery log
 * / Google Analytics / Lighthouse run before each release.
 */

interface ProofItem {
  value: string;
  label: string;
}

interface Props {
  items?: ProofItem[];
}

// Canonical site-wide proof set. These four numbers are the single source of
// truth for WorkRoot's headline stats and MUST stay identical to the homepage
// stats band (src/pages/index.astro), the /portfolio stats bar, and the
// /about stats grid. Changing one without the others reintroduces the
// credibility bug this set was created to fix.
//
//  - "20+ Projects"            — total delivered engagements
//  - "11 Districts Deployed"   — matches hero trust badge copy
//  - "50,000+ Records Managed" — records under management across deployments
//  - "8+ Years Avg Experience" — average team experience
const defaultItems: ProofItem[] = [
  { value: '20+', label: 'Projects' },
  { value: '11', label: 'Districts Deployed' },
  { value: '50,000+', label: 'Records Managed' },
  { value: '8+', label: 'Years Avg Experience' },
];

const { items = defaultItems } = Astro.props;
// Cap at 4 — the band is designed as a 4×1 / 2×2 layout and extra entries
// would break the responsive grid. Trim silently rather than overflowing.
const proofItems = items.slice(0, 4);
---

<section
  id="proof-numbers"
  class="py-16 sm:py-20 bg-white dark:bg-secondary-900 border-y border-secondary-100 dark:border-secondary-800"
  aria-label="WorkRoot by the numbers"
>
  <div class="container-wrapper">
    <dl
      class="grid grid-cols-2 md:grid-cols-4 gap-y-10 gap-x-6 sm:gap-x-10 max-w-6xl mx-auto"
      data-animate="fade-up"
    >
      {proofItems.map((item, index) => (
        <div
          class:list={[
            'text-center',
            // Subtle vertical divider between columns on desktop — keeps the
            // band feeling like one continuous strip rather than four cards.
            index > 0
              ? 'md:border-l md:border-secondary-100 md:dark:border-secondary-800'
              : '',
          ]}
          data-animate="fade-up"
          data-delay={String(index * 100)}
        >
          <dt
            class="text-4xl sm:text-5xl lg:text-6xl font-bold text-secondary-900 dark:text-secondary-100 tracking-tight leading-none"
          >
            <span class="bg-gradient-to-br from-primary-600 to-primary-500 dark:from-primary-400 dark:to-primary-300 bg-clip-text text-transparent">
              {item.value}
            </span>
          </dt>
          <dd
            class="mt-3 text-sm sm:text-base font-semibold text-secondary-600 dark:text-secondary-400 uppercase tracking-wider"
          >
            {item.label}
          </dd>
        </div>
      ))}
    </dl>
  </div>
</section>
