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

// TEMPLATE — Status grid (LIGHT)
// Reusable on-brand product-status / progress slide. Rebuilt as real structured
// markup (the source Figma slide is a flattened image).
// - Ground: --flux-background (#F9FAF8)
// - Centered bold black title (optional leading emoji) + light black subtitle
// - Three equal columns: a Flux Badge status pill, a bold product name, and a list
//   of items each prefixed by a green check icon + light black label
// - Kaptio logo (dark) centered near the bottom
//
// Badge tint mapping (Flux Badge convention — pill, text-xs, bold, dark text on tint):
//   UAT   -> --flux-yellow-300  (pending / in-testing)
//   PILOT -> --flux-green-200   (confirmed / live)
//   GA    -> --flux-blue-200    (awaiting / available)
const title = '🚀 Product-by-Product Progress';
const subtitle = 'Where we are today';
const columns = [
  {
    status: 'UAT',
    tint: 'var(--flux-yellow-300)',
    product: 'Voyage',
    items: ['Multiple operators in testing', '2026 departures loaded', 'Cabins configured'],
  },
  {
    status: 'PILOT',
    tint: 'var(--flux-green-200)',
    product: 'Circle',
    items: ['>40 DMC offices live', 'Processing 10k calculations daily', 'Series & custom group support'],
  },
  {
    status: 'GA',
    tint: 'var(--flux-blue-200)',
    product: 'Quest',
    items: ['Foundation in place', '20+ supplier connections', 'Supports tailormade E2E'],
  },
];
---

<PresentationLayout title="Template · Status grid">
  <div
    class="slide"
    style="padding: 0 !important; background: var(--flux-background);"
  >
    <div
      class="relative w-full h-full flex flex-col"
      style="padding: 8% 8% 6%;"
    >
      <!-- Title block -->
      <div class="text-center" style="margin-bottom: clamp(2.5rem, 5vh, 4.5rem);">
        <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: 0.75rem;
          "
        >
          {title}
        </h1>
        <p
          style="
            font-family: var(--flux-font-sans);
            font-weight: 300;
            font-size: clamp(1.125rem, 1.6vw, 1.75rem);
            color: var(--flux-black);
          "
        >
          {subtitle}
        </p>
      </div>

      <!-- Three columns -->
      <div
        class="grid"
        style="grid-template-columns: repeat(3, 1fr); column-gap: clamp(2rem, 5vw, 5rem); align-items: start;"
      >
        {columns.map((col) => (
          <div style="display: flex; flex-direction: column;">
            <!-- Status pill -->
            <span
              style={`
                align-self: flex-start;
                font-family: var(--flux-font-sans);
                font-weight: 700;
                font-size: var(--flux-text-xs);
                letter-spacing: 0.08em;
                text-transform: uppercase;
                color: var(--flux-black);
                background: ${col.tint};
                border-radius: var(--flux-radius-full);
                padding: 0.4rem 1.1rem;
                margin-bottom: 1.25rem;
              `}
            >
              {col.status}
            </span>

            <!-- Product name -->
            <p
              style="
                font-family: var(--flux-font-sans);
                font-weight: 700;
                font-size: clamp(1.5rem, 1.9vw, 2rem);
                line-height: 1.1;
                color: var(--flux-black);
                margin-bottom: 1.25rem;
              "
            >
              {col.product}
            </p>

            <!-- Items -->
            <ul style="list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.875rem;">
              {col.items.map((item) => (
                <li style="display: flex; align-items: flex-start; gap: 0.625rem;">
                  <svg
                    width="20"
                    height="20"
                    viewBox="0 0 20 20"
                    fill="none"
                    aria-hidden="true"
                    style="flex-shrink: 0; margin-top: 0.15rem;"
                  >
                    <rect x="1" y="1" width="18" height="18" rx="4" fill="var(--flux-green-400)" />
                    <path
                      d="M5.5 10.2l2.8 2.8 6-6.2"
                      stroke="#FFFFFF"
                      stroke-width="2"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                    />
                  </svg>
                  <span
                    style="
                      font-family: var(--flux-font-sans);
                      font-weight: 300;
                      font-size: clamp(1rem, 1.2vw, 1.375rem);
                      line-height: 1.3;
                      color: var(--flux-black);
                    "
                  >
                    {item}
                  </span>
                </li>
              ))}
            </ul>
          </div>
        ))}
      </div>
    </div>

    <!-- Kaptio logo centered near the bottom -->
    <div
      class="absolute left-0 right-0 flex justify-center"
      style="bottom: 5%;"
    >
      <KaptioLogo variant="dark" height={32} />
    </div>
  </div>
</PresentationLayout>