---
import PresentationLayout from '../../layouts/PresentationLayout.astro';
import KaptioLogo from '../../components/KaptioLogo';

// TEMPLATE — Big stat (LIGHT)
// Reusable on-brand single-number / KPI slide. Clone this when one figure
// carries the whole story.
// - Ground: --flux-background (#F9FAF8)
// - Centered: ONE muted kicker (context label), a giant Lexend Bold numeral in
//   --flux-primary-600 (seagreen — never yellow), a Lexend Light support line
// - Optional small source / footnote line in --flux-grey-300
// - Kaptio logo (dark) centered near the bottom
const kicker = 'Bookings processed';
const stat = '1.2M';
const support = 'Traveller bookings flowed through Kaptio in the last twelve months.';
const footnote = 'Source: Kaptio platform metrics, FY25.';
---

<PresentationLayout title="Template · Big stat">
  <div
    class="slide"
    style="padding: 0 !important; background: var(--flux-background);"
  >
    <div
      class="relative flex flex-col items-center justify-center text-center w-full h-full"
      style="padding: 0 8%;"
    >
      <p
        style="
          font-family: var(--flux-font-sans);
          font-weight: 700;
          font-size: var(--flux-text-xs);
          letter-spacing: 0.18em;
          text-transform: uppercase;
          color: var(--flux-grey-300);
          margin-bottom: 1.5rem;
        "
      >
        {kicker}
      </p>
      <p
        style="
          font-family: var(--flux-font-sans);
          font-weight: 700;
          font-size: clamp(6rem, 10.4vw, 12.5rem);
          line-height: 1;
          letter-spacing: -0.03em;
          color: var(--flux-primary-600);
          margin-bottom: 1.5rem;
        "
      >
        {stat}
      </p>
      <p
        style="
          font-family: var(--flux-font-sans);
          font-weight: 300;
          font-size: clamp(1.25rem, 1.875vw, 2.25rem);
          line-height: 1.4;
          color: var(--flux-black);
          max-width: 50%;
          margin-bottom: 1.25rem;
        "
      >
        {support}
      </p>
      <p
        style="
          font-family: var(--flux-font-sans);
          font-weight: 300;
          font-size: var(--flux-text-sm);
          color: var(--flux-grey-300);
        "
      >
        {footnote}
      </p>
    </div>

    <!-- Kaptio logo centered near the bottom -->
    <div
      class="absolute left-0 right-0 flex justify-center"
      style="bottom: 6%;"
    >
      <KaptioLogo variant="dark" height={32} />
    </div>
  </div>
</PresentationLayout>