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

// TEMPLATE — Q&A (DARK)
// Reusable on-brand pre-closing Q&A slide. Clone this before the closing slide.
// - Ground: --flux-primary-800 + full-bleed photo + teal overlay + spectrum
// - Centered large white headline, optional light support line
// - Kaptio logo (light) centered bottom
// - NO yellow, no emoji
const headline = 'Questions?';
const support = 'We would love to hear from you.';
const photo = '/images/bg-iceland-fjord-road.png';
const spectrum = '/images/texture-spectrum.png';
---

<PresentationLayout title="Template · Q&A">
  <div
    class="slide"
    style="padding: 0 !important; background: var(--flux-primary-800);"
  >
    <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.15;"
    />

    <div
      class="relative flex flex-col items-center justify-center text-center w-full h-full"
      style="padding: 0 8%; gap: 1.25rem;"
    >
      <h1
        style="
          font-family: var(--flux-font-sans);
          font-weight: 700;
          font-size: clamp(3.5rem, 6vw, 6rem);
          line-height: 1.04;
          letter-spacing: -0.02em;
          color: #FFFFFF;
          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>
    </div>

    <div
      class="absolute left-0 right-0 flex justify-center"
      style="bottom: 5%;"
    >
      <KaptioLogo variant="light" height={36} />
    </div>
  </div>
</PresentationLayout>