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

// TEMPLATE — Feature detail (LIGHT)
// Reusable on-brand feature explainer. Clone this for "what is it / what is the value"
// feature walkthroughs.
// - Ground: --flux-background (#F9FAF8)
// - LEFT column: bold title, then Q&A blocks (bold lead + Lexend Light body)
// - RIGHT: large white screenshot card extending off the right edge, vertically
//   centered, with a layered soft shadow stack. Swap the placeholder for a real
//   product screenshot when available.
// - Bottom-left: running footer label, bold --flux-black at 50% opacity
const title = 'Cabin Seating Tool';
const blocks = [
  {
    lead: 'What is it?',
    body: 'The ability to sign up for specific departures that are either sold out or not yet available for booking.',
  },
  {
    lead: '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';
// Layered soft shadow (a shadow stack, not a brand color)
const cardShadow =
  '0px 100px 80px rgba(0, 0, 0, 0.07), 0px 41.8px 33.4px rgba(0, 0, 0, 0.05), 0px 22.3px 17.9px rgba(0, 0, 0, 0.042), 0px 12.5px 10px rgba(0, 0, 0, 0.035), 0px 6.7px 5.3px rgba(0, 0, 0, 0.028), 0px 2.8px 2.2px rgba(0, 0, 0, 0.02)';
---

<PresentationLayout title="Template · Feature detail">
  <div
    class="slide"
    style="padding: 0 !important; overflow: hidden !important; background: var(--flux-background);"
  >
    <!-- Left: text column (~35% width, inset from the left edge) -->
    <div
      class="flex flex-col justify-center"
      style="position: absolute; top: 0; bottom: 0; left: 6.25%; width: 35%;"
    >
      <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.25;
              color: var(--flux-black);
              margin-bottom: 0.5rem;
            "
          >
            {block.lead}
          </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: large white screenshot card, off the right edge, vertically centered -->
    <div
      style={`
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 48%;
        right: -8%;
        aspect-ratio: 16 / 11;
        background: var(--flux-surface);
        border-radius: var(--flux-radius-md);
        box-shadow: ${cardShadow};
        display: flex;
        align-items: center;
        justify-content: center;
      `}
      aria-hidden="true"
    >
      <span
        style="
          font-family: var(--flux-font-sans);
          font-weight: 300;
          font-size: var(--flux-text-base);
          color: var(--flux-grey-300);
          margin-right: 12%;
        "
      >
        Product screenshot
      </span>
    </div>

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