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

// TEMPLATE — Statement (LIGHT)
// Reusable on-brand statement / thesis slide. Clone this for a single big idea.
// - Ground: --flux-background (#F9FAF8)
// - Centered column: optional single emoji accent, bold black headline, light black paragraph
// - Kaptio logo (dark) centered near the bottom
const emoji = '🔎';
const headline = 'Where we aim to focus efforts';
const body =
  'With our focus on innovation-ready customers, we must align our roadmap with those needs. Our success hinges on staying ahead of the curve, anticipating challenges and opportunities in managing complex, multi-day travel operations. To achieve this, we are defining innovation themes that will shape the future of our platform.';
---

<PresentationLayout title="Template · Statement">
  <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%;"
    >
      <span
        style="font-size: clamp(2rem, 3vw, 3rem); line-height: 1; margin-bottom: 1.5rem;"
        aria-hidden="true"
      >
        {emoji}
      </span>
      <h1
        style="
          font-family: var(--flux-font-sans);
          font-weight: 700;
          font-size: clamp(2.5rem, 3.75vw, 4.5rem);
          line-height: 1.05;
          letter-spacing: -0.02em;
          color: var(--flux-black);
          margin-bottom: 1.5rem;
        "
      >
        {headline}
      </h1>
      <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: 62%;
        "
      >
        {body}
      </p>
    </div>

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