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

// TEMPLATE — Cover (DARK)
// Reusable on-brand deck cover. Clone this to open a presentation.
// - Ground: --flux-primary-800 (#032E36)
// - Full-bleed photo + teal overlay rgba(3,46,54,0.72) + subtle spectrum texture
// - Left-aligned block: one yellow eyebrow/date (the only yellow), large WHITE bold title
// - Bottom-left: Kaptio logo (light) + thin low-opacity divider + light tagline
const eyebrow = 'April 2025';
const title = 'Kaptio Success Stories';
const tagline = 'Serve travellers not spreadsheets';
const photo = '/images/bg-iceland-fjord-road.png';
const spectrum = '/images/texture-spectrum.png';
---

<PresentationLayout title="Template · Cover">
  <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;"
    />

    <!-- Left-aligned content block -->
    <div
      class="relative flex flex-col justify-center h-full"
      style="padding: 0 6%;"
    >
      <p
        style="
          font-family: var(--flux-font-sans);
          font-weight: 300;
          font-size: clamp(1rem, 1.25vw, 1.5rem);
          letter-spacing: 0.01em;
          color: var(--flux-yellow-400);
          margin-bottom: 1rem;
        "
      >
        {eyebrow}
      </p>
      <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: 70%;
          text-shadow: 0 2px 24px rgba(3, 46, 54, 0.45);
        "
      >
        {title}
      </h1>
    </div>

    <!-- Bottom-left: logo + divider + tagline -->
    <div
      class="absolute flex flex-col"
      style="left: 6%; bottom: 8%; gap: 0.875rem;"
    >
      <KaptioLogo variant="light" height={36} />
      <span
        style="width: 9rem; height: 1px; background: rgba(255, 255, 255, 0.35);"
        aria-hidden="true"
      ></span>
      <p
        style="
          font-family: var(--flux-font-sans);
          font-weight: 300;
          font-size: clamp(0.875rem, 1vw, 1.125rem);
          color: #FFFFFF;
          opacity: 0.9;
        "
      >
        {tagline}
      </p>
    </div>
  </div>
</PresentationLayout>