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

// TEMPLATE — Agenda (LIGHT)
// Reusable on-brand agenda / "what we'll cover" slide. Clone this near the start
// of a deck to set expectations.
// - Ground: --flux-background (#F9FAF8)
// - ONE muted grey kicker (the only kicker), bold black headline
// - Vertical numbered list: large bold number in --flux-primary-400, bold item
//   title, one short Lexend Light description line
// - Kaptio logo (dark) centered near the bottom
const kicker = 'Agenda';
const headline = "What we'll cover";
const items = [
  { title: 'Where we are today', description: 'Product status, go-lives, and key milestones from the year.' },
  { title: 'What customers told us', description: 'Themes from advisory boards, support, and the field.' },
  { title: 'The roadmap ahead', description: 'Priorities and innovation themes for the next four quarters.' },
  { title: 'How we get there', description: 'Teams, timelines, and what we need from each other.' },
];
---

<PresentationLayout title="Template · Agenda">
  <div
    class="slide"
    style="padding: 0 !important; background: var(--flux-background);"
  >
    <div
      class="relative flex flex-col justify-center h-full"
      style="padding: 7% 6.25%; max-width: 62%;"
    >
      <p
        style="
          font-family: var(--flux-font-sans);
          font-weight: 700;
          font-size: var(--flux-text-xs);
          letter-spacing: 0.18em;
          text-transform: uppercase;
          color: var(--flux-grey-300);
          margin-bottom: 1rem;
        "
      >
        {kicker}
      </p>
      <h1
        style="
          font-family: var(--flux-font-sans);
          font-weight: 700;
          font-size: clamp(2.25rem, 3.2vw, 4rem);
          line-height: 1.08;
          letter-spacing: -0.02em;
          color: var(--flux-black);
          margin-bottom: clamp(2rem, 4.5vh, 3.5rem);
        "
      >
        {headline}
      </h1>

      <ol style="list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: clamp(1.25rem, 3vh, 2.25rem);">
        {items.map((item, i) => (
          <li style="display: flex; align-items: baseline; gap: 1.5rem;">
            <span
              style="
                font-family: var(--flux-font-sans);
                font-weight: 700;
                font-size: clamp(1.5rem, 2vw, 2.5rem);
                line-height: 1;
                color: var(--flux-primary-400);
                min-width: 2.25rem;
              "
            >
              {i + 1}
            </span>
            <span style="display: flex; flex-direction: column; gap: 0.25rem;">
              <span
                style="
                  font-family: var(--flux-font-sans);
                  font-weight: 700;
                  font-size: clamp(1.25rem, 1.6vw, 2rem);
                  line-height: 1.2;
                  color: var(--flux-black);
                "
              >
                {item.title}
              </span>
              <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.description}
              </span>
            </span>
          </li>
        ))}
      </ol>
    </div>

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