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

// TEMPLATE — Roadmap (LIGHT)
// Reusable on-brand forward-looking roadmap slide. Status grid covers TODAY;
// this covers FORWARD horizons.
// - Ground: --flux-background (#F9FAF8)
// - Centered bold headline (optional single emoji) + light subtitle
// - Horizontal 4-column timeline with phase pills and bullet items
// - Kaptio logo (dark) centered near the bottom
const title = '🚀 Roadmap ahead';
const subtitle = 'Priorities for the next four quarters';
const phases = [
  {
    label: 'Q1',
    tint: 'var(--flux-yellow-300)',
    name: 'Foundation',
    items: ['Core API stabilisation', 'Migration tooling', 'Operator onboarding'],
  },
  {
    label: 'Q2',
    tint: 'var(--flux-primary-100)',
    name: 'Expansion',
    items: ['Multi-product packaging', 'Supplier integrations', 'Reporting v2'],
  },
  {
    label: 'Q3',
    tint: 'var(--flux-green-200)',
    name: 'Scale',
    items: ['Self-service config', 'Edge app marketplace', 'Performance tuning'],
  },
  {
    label: 'Q4',
    tint: 'var(--flux-blue-200)',
    name: 'Horizon',
    items: ['AI-assisted quoting', 'Global localisation', 'Partner ecosystem'],
  },
];
---

<PresentationLayout title="Template · Roadmap">
  <div
    class="slide"
    style="padding: 0 !important; background: var(--flux-background);"
  >
    <div
      class="relative w-full h-full flex flex-col"
      style="padding: 8% 6% 6%;"
    >
      <div class="text-center" style="margin-bottom: clamp(2rem, 4vh, 3.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>

      <div
        class="grid"
        style="
          grid-template-columns: repeat(4, 1fr);
          column-gap: clamp(1rem, 2vw, 2rem);
          align-items: start;
          position: relative;
        "
      >
        <div
          style="
            position: absolute;
            top: 1.25rem;
            left: 10%;
            right: 10%;
            height: 1px;
            background: var(--flux-grey-100);
            z-index: 0;
          "
          aria-hidden="true"
        ></div>

        {phases.map((phase) => (
          <div style="display: flex; flex-direction: column; position: relative; z-index: 1;">
            <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: ${phase.tint};
                border-radius: var(--flux-radius-full);
                padding: 0.4rem 1rem;
                margin-bottom: 1rem;
              `}
            >
              {phase.label}
            </span>
            <p
              style="
                font-family: var(--flux-font-sans);
                font-weight: 700;
                font-size: clamp(1.125rem, 1.4vw, 1.625rem);
                line-height: 1.2;
                color: var(--flux-black);
                margin-bottom: 1rem;
              "
            >
              {phase.name}
            </p>
            <ul style="list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.625rem;">
              {phase.items.map((item) => (
                <li
                  style="
                    font-family: var(--flux-font-sans);
                    font-weight: 300;
                    font-size: clamp(0.875rem, 1.05vw, 1.125rem);
                    line-height: 1.35;
                    color: var(--flux-black);
                  "
                >
                  {item}
                </li>
              ))}
            </ul>
          </div>
        ))}
      </div>
    </div>

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