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

// TEMPLATE B — Content (LIGHT)
// Reusable on-brand content slide. Clone this structure for "explainer" slides.
// - Ground: --flux-background (#F9FAF8)
// - Left text column: bold title, then "subhead + paragraph" blocks
// - Right: white card with a soft layered shadow as an image/screenshot placeholder
// - Footer running label bottom-left, --flux-black at 50% opacity
const title = 'Cabin Seating Tool';
const blocks = [
  {
    subhead: 'What is it?',
    body: 'The ability to sign up for specific departures that are either sold out or not yet available for booking.',
  },
  {
    subhead: 'What is the value?',
    body: 'Captures unmet demand and increases the likelihood of filling available seats. By offering customers to join waitlisted trips, it improves customer satisfaction and loyalty.',
  },
];
const footerLabel = 'What we built in 2025';
---

<PresentationLayout title="Template · Content">
  <div
    class="slide"
    style="padding: 0 !important; background: var(--flux-background);"
  >
    <div
      class="relative w-full h-full grid items-center"
      style="grid-template-columns: 44% 56%; padding: 7.5% 6.25%; column-gap: 4rem;"
    >
      <!-- Left: text column -->
      <div style="max-width: 40rem;">
        <h2
          style="
            font-family: var(--flux-font-sans);
            font-weight: 700;
            font-size: clamp(2rem, 2.5vw, 3rem);
            line-height: 1.1;
            letter-spacing: -0.01em;
            color: var(--flux-black);
            margin-bottom: 2rem;
          "
        >
          {title}
        </h2>

        {blocks.map((block) => (
          <div style="margin-bottom: 1.75rem;">
            <p
              style="
                font-family: var(--flux-font-sans);
                font-weight: 700;
                font-size: clamp(1.25rem, 1.6vw, 2rem);
                line-height: 1.2;
                color: var(--flux-black);
                margin-bottom: 0.5rem;
              "
            >
              {block.subhead}
            </p>
            <p
              style="
                font-family: var(--flux-font-sans);
                font-weight: 300;
                font-size: clamp(1.25rem, 1.6vw, 2rem);
                line-height: 1.25;
                color: var(--flux-black);
              "
            >
              {block.body}
            </p>
          </div>
        ))}
      </div>

      <!-- Right: white card image/screenshot placeholder -->
      <div
        style="
          background: var(--flux-white);
          border-radius: var(--flux-radius-md);
          box-shadow: var(--flux-shadow-xl);
          width: 100%;
          aspect-ratio: 16 / 10;
        "
        aria-hidden="true"
      ></div>
    </div>

    <!-- Footer running label -->
    <div
      class="absolute flex items-center"
      style="left: 6.25%; bottom: 4%; gap: 0.5rem;"
    >
      <span style="font-size: 1rem;" aria-hidden="true">🗒️</span>
      <span
        style="
          font-family: var(--flux-font-sans);
          font-weight: 700;
          font-size: var(--flux-text-sm);
          color: var(--flux-black);
          opacity: 0.5;
        "
      >
        {footerLabel}
      </span>
    </div>
  </div>
</PresentationLayout>