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

// TEMPLATE — Recap intro (LIGHT)
// Reusable on-brand recap / feature-section opener. Clone this to open a
// "what we built" or recap chapter inside a light deck section.
// - Ground: --flux-background (#F9FAF8)
// - Centered Lexend Bold headline (optional single leading emoji) + Lexend Light subtitle
// - Bottom third: a fan of tilted white "screenshot" cards bleeding off the bottom edge
//   (rotations roughly -8deg, +15deg, -15deg, +31deg). Swap the placeholder cards for real
//   product screenshots when available; the slide clips them (overflow hidden).
const headline = '🗒️ What we built for Voyage in 2025';
const subtitle = 'Notable features (we built much more of course)';
const cards = [
  { left: '-6%', bottom: '-24%', width: '30%', rotate: '-8deg' },
  { left: '20%', bottom: '-28%', width: '32%', rotate: '15deg' },
  { left: '48%', bottom: '-26%', width: '30%', rotate: '-15deg' },
  { left: '74%', bottom: '-22%', width: '30%', rotate: '31deg' },
];
// 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 · Recap intro">
  <div
    class="slide"
    style="padding: 0 !important; overflow: hidden !important; background: var(--flux-background);"
  >
    <!-- Centered title block in the top two thirds; the card fan owns the bottom third -->
    <div
      class="flex flex-col items-center justify-center text-center"
      style="position: absolute; top: 0; left: 0; right: 0; height: 64%; padding: 0 8%;"
    >
      <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: var(--flux-black);
          margin-bottom: 1rem;
        "
      >
        {headline}
      </h1>
      <p
        style="
          font-family: var(--flux-font-sans);
          font-weight: 300;
          font-size: clamp(1.25rem, 1.875vw, 2.25rem);
          line-height: 1.3;
          color: var(--flux-black);
        "
      >
        {subtitle}
      </p>
    </div>

    <!-- Fan of tilted screenshot cards bleeding off the bottom edge -->
    {cards.map((card) => (
      <div
        style={`
          position: absolute;
          left: ${card.left};
          bottom: ${card.bottom};
          width: ${card.width};
          aspect-ratio: 16 / 10;
          transform: rotate(${card.rotate});
          background: var(--flux-surface);
          border: 1px solid var(--flux-grey-100);
          border-radius: var(--flux-radius-lg);
          box-shadow: ${cardShadow};
          display: flex;
          align-items: flex-start;
          justify-content: center;
          padding-top: 2.5rem;
        `}
        aria-hidden="true"
      >
        <span
          style="
            font-family: var(--flux-font-sans);
            font-weight: 300;
            font-size: var(--flux-text-sm);
            color: var(--flux-grey-300);
          "
        >
          Product screenshot
        </span>
      </div>
    ))}
  </div>
</PresentationLayout>