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

// TEMPLATE — Quote (LIGHT)
// Reusable on-brand quote / testimonial slide. Clone this for a customer voice
// or leadership statement.
// - Ground: --flux-background (#F9FAF8)
// - Centered column (~60% width): ONE optional muted kicker, the quote in
//   Lexend Light (no italics, no giant colored glyphs), attribution below
//   (bold name + light role/company in --flux-grey-300)
// - Kaptio logo (dark) centered near the bottom; no yellow anywhere
const kicker = 'Customer voice';
const quote =
  'Kaptio replaced four disconnected systems with one platform. Our team quotes complex itineraries in minutes, and finance finally trusts the numbers.';
const name = 'Jane Castle';
const role = 'Head of Operations, Horizon Expeditions';
---

<PresentationLayout title="Template · Quote">
  <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 20%;"
    >
      <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: 2rem;
        "
      >
        {kicker}
      </p>
      <blockquote
        style="
          font-family: var(--flux-font-sans);
          font-weight: 300;
          font-size: clamp(1.875rem, 2.7vw, 3.25rem);
          line-height: 1.35;
          letter-spacing: -0.01em;
          color: var(--flux-black);
          margin: 0 0 2.5rem;
        "
      >
        &ldquo;{quote}&rdquo;
      </blockquote>
      <p
        style="
          font-family: var(--flux-font-sans);
          font-weight: 700;
          font-size: clamp(1.125rem, 1.4vw, 1.625rem);
          line-height: 1.3;
          color: var(--flux-black);
          margin-bottom: 0.25rem;
        "
      >
        {name}
      </p>
      <p
        style="
          font-family: var(--flux-font-sans);
          font-weight: 300;
          font-size: clamp(1rem, 1.2vw, 1.375rem);
          line-height: 1.3;
          color: var(--flux-grey-300);
        "
      >
        {role}
      </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>