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

// TEMPLATE — Platform panel (DARK)
// Reusable on-brand platform / product positioning slide. Clone this to introduce
// Kaptio Core or a product platform narrative.
// - Ground: --flux-primary-800 + full-bleed photo + teal overlay + spectrum
// - LEFT panel ~43% width, inset ~2rem, --flux-primary-800 at ~90% opacity
// - Title and body INSIDE the panel (not split like customer-map)
// - KaptioLogo (light) at panel bottom-left
//
// SCOPED BRAND EXCEPTION: up to THREE bold inline verbs in the body may use
// --flux-yellow-400 on this dark panel only (e.g. build, sell, operate).
// Headline stays all white — yellow is never used in the title.
const titleLine1 = 'Kaptio';
const titleLine2 = 'Core Platform';
const photo = '/images/bg-iceland-fjord-road.png';
const spectrum = '/images/texture-spectrum.png';
---

<PresentationLayout title="Template · Platform panel">
  <div
    class="slide"
    style="padding: 0 !important; background: var(--flux-primary-800);"
  >
    <!-- Layer stack: photo -> teal overlay 0.45 -> spectrum 0.15 -->
    <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.45;"></div>
    <img
      src={spectrum}
      alt=""
      aria-hidden="true"
      style="position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.15;"
    />

    <!-- Left platform panel -->
    <div
      style="
        position: absolute;
        top: 2rem;
        bottom: 2rem;
        left: 2rem;
        width: 43%;
        border-radius: var(--flux-radius-lg);
        padding: clamp(2rem, 3vw, 3.5rem);
        display: flex;
        flex-direction: column;
        overflow: hidden;
      "
    >
      <div
        style="position: absolute; inset: 0; background: var(--flux-primary-800); opacity: 0.9; border-radius: var(--flux-radius-lg);"
        aria-hidden="true"
      ></div>

      <div style="position: relative; z-index: 1; display: flex; flex-direction: column; height: 100%;">
        <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: #FFFFFF;
            margin-bottom: clamp(1.5rem, 3vh, 2.5rem);
          "
        >
          {titleLine1}<br />{titleLine2}
        </h1>

        <p
          style="
            font-family: var(--flux-font-sans);
            font-weight: 300;
            font-size: clamp(1.125rem, 1.6vw, 2rem);
            line-height: 1.4;
            color: #FFFFFF;
          "
        >
          The unified travel commerce platform that helps operators{' '}
          <span style="font-weight: 700; color: var(--flux-yellow-400);">build</span>,{' '}
          <span style="font-weight: 700; color: var(--flux-yellow-400);">sell</span>, and{' '}
          <span style="font-weight: 700; color: var(--flux-yellow-400);">operate</span>{' '}
          complex travel products — from product creation and pricing through booking,
          operations, and financial reconciliation.
        </p>

        <div style="margin-top: auto; padding-top: 2rem;">
          <KaptioLogo variant="light" height={30} />
        </div>
      </div>
    </div>
  </div>
</PresentationLayout>