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

// TEMPLATE A — Chapter / section divider (DARK)
// Reusable on-brand chapter slide. Clone this structure for any section divider.
// - Ground: --flux-primary-800 (#032E36)
// - Full-bleed photo + teal overlay rgba(3,46,54,0.4) so any image reads on-brand
// - One white Lexend Bold headline, centered, soft drop shadow
// - Kaptio logo (light) centered near the bottom
const headline = 'Voyage Deep Dive';
const photo = '/images/bg-iceland-fjord-road.png';
const spectrum = '/images/texture-spectrum.png';
---

<PresentationLayout title="Template · Chapter divider">
  <div
    class="slide"
    style="padding: 0 !important; background: var(--flux-primary-800);"
  >
    <!-- Layer stack (back -> front): photo 100% -> Seagreen 800 at 60% -> spectrum 40% -->
    <!-- 1. Full-bleed background photo, full opacity -->
    <img
      src={photo}
      alt=""
      aria-hidden="true"
      style="position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;"
    />
    <!-- 2. Seagreen 800 (#032E36) fill at 60% -->
    <div style="position: absolute; inset: 0; background: var(--flux-primary-800); opacity: 0.6;"></div>

    <!-- 3. Spectrum aurora texture at 30% -->
    <img
      src={spectrum}
      alt=""
      aria-hidden="true"
      style="position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.3;"
    />

    <!-- Centered content -->
    <div
      class="relative flex flex-col items-center justify-center text-center w-full h-full"
      style="padding: 0 6rem;"
    >
      <h2
        style="
          font-family: var(--flux-font-sans);
          font-weight: 700;
          font-size: clamp(3rem, 7.5vw, 9rem);
          line-height: 1.05;
          letter-spacing: -0.02em;
          color: #FFFFFF;
          max-width: 75%;
          text-shadow: 0 2px 24px rgba(3, 46, 54, 0.45);
        "
      >
        {headline}
      </h2>
    </div>

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