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

// TEMPLATE — Closing (DARK)
// Reusable on-brand closing / thank-you / CTA slide. Clone this to end a deck.
// Derived from the Cover template's layer stack, but centered and white-only:
// - Ground: --flux-primary-800 (#032E36) + full-bleed photo + teal overlay + spectrum
// - Centered: big white Lexend Bold headline, one Lexend Light white support line,
//   thin low-opacity divider, Kaptio logo (light)
// - NO yellow eyebrow (yellow is the cover's accent — closing stays white-only), no emoji
const headline = "Let's build the future of travel";
const support = 'hello@kaptio.com · kaptio.com';
const photo = '/images/bg-ocean-sunset.png';
const spectrum = '/images/texture-spectrum.png';
---

<PresentationLayout title="Template · Closing">
  <div
    class="slide"
    style="padding: 0 !important; background: var(--flux-primary-800);"
  >
    <!-- Layer stack (back -> front): photo 100% -> Seagreen 800 at 72% -> spectrum 20% -->
    <img
      src={photo}
      alt=""
      aria-hidden="true"
      style="position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;"
    />
    <div style="position: absolute; inset: 0; background: var(--flux-primary-800); opacity: 0.72;"></div>
    <img
      src={spectrum}
      alt=""
      aria-hidden="true"
      style="position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.2;"
    />

    <!-- Centered content -->
    <div
      class="relative flex flex-col items-center justify-center text-center w-full h-full"
      style="padding: 0 8%; gap: 1.5rem;"
    >
      <h1
        style="
          font-family: var(--flux-font-sans);
          font-weight: 700;
          font-size: clamp(3rem, 5vw, 6rem);
          line-height: 1.04;
          letter-spacing: -0.02em;
          color: #FFFFFF;
          max-width: 75%;
          text-shadow: 0 2px 24px rgba(3, 46, 54, 0.45);
        "
      >
        {headline}
      </h1>
      <p
        style="
          font-family: var(--flux-font-sans);
          font-weight: 300;
          font-size: clamp(1.125rem, 1.4vw, 1.625rem);
          line-height: 1.4;
          color: #FFFFFF;
          opacity: 0.9;
        "
      >
        {support}
      </p>
      <span
        style="width: 9rem; height: 1px; background: rgba(255, 255, 255, 0.35); margin-top: 0.5rem;"
        aria-hidden="true"
      ></span>
      <KaptioLogo variant="light" height={36} />
    </div>
  </div>
</PresentationLayout>