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

// TEMPLATE — Implementation (LIGHT)
// Reusable on-brand enterprise onboarding phases slide.
// - Ground: --flux-background (#F9FAF8)
// - Bold headline, 4 equal columns with phase numbers, titles, and bullets
// - Subtle vertical dividers (--flux-grey-100) between columns
// - Kaptio logo (dark) centered near the bottom
const headline = 'Implementation approach';
const phases = [
  {
    number: '01',
    title: 'Discovery',
    items: ['Requirements workshop', 'Data migration audit', 'Success criteria defined'],
  },
  {
    number: '02',
    title: 'Build',
    items: ['Product configuration', 'Integration setup', 'User acceptance testing'],
  },
  {
    number: '03',
    title: 'UAT',
    items: ['End-to-end scenario testing', 'Training and enablement', 'Go-live readiness review'],
  },
  {
    number: '04',
    title: 'Go-live',
    items: ['Production cutover', 'Hypercare support', 'Steady-state handover'],
  },
];
---

<PresentationLayout title="Template · Implementation">
  <div
    class="slide"
    style="padding: 0 !important; background: var(--flux-background);"
  >
    <div
      class="relative w-full h-full flex flex-col items-center justify-center"
      style="padding: 8% 6% 6%;"
    >
      <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);
          text-align: center;
          margin-bottom: clamp(2.5rem, 5vh, 4rem);
        "
      >
        {headline}
      </h1>

      <div
        class="grid w-full"
        style="
          grid-template-columns: repeat(4, 1fr);
          max-width: 92%;
          align-items: start;
        "
      >
        {phases.map((phase, i) => (
          <div
            style={`
              display: flex;
              flex-direction: column;
              padding: 0 clamp(1rem, 2vw, 2rem);
              ${i > 0 ? 'border-left: 1px solid var(--flux-grey-100);' : ''}
            `}
          >
            <span
              style="
                font-family: var(--flux-font-sans);
                font-weight: 700;
                font-size: clamp(1.5rem, 2vw, 2.25rem);
                line-height: 1;
                color: var(--flux-primary-400);
                margin-bottom: 0.75rem;
              "
            >
              {phase.number}
            </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.title}
            </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, 1vw, 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>