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

// TEMPLATE — Cards band (LIGHT)
// Centered headline in the upper zone; numbered cards below on a single light ground.
// Use for pillars, steps, or parallel themes — NOT inside a screenshot frame.
// - Ground: --flux-background, centered title + optional intro
// - Cards: white surface, --flux-shadow-md, bold index (/01), title, light description
const headline = 'Leaders must leverage modern tools to compete';
const intro = 'Three parallel moves that compound — each card is one theme, not a screenshot placeholder.';
const cards = [
  {
    number: '01',
    title: 'Standardise on Flux',
    description: 'One token system and deck kit so every surface and agent output stays on-brand.',
  },
  {
    number: '02',
    title: 'Upgrade technology',
    description: 'Apply modern tooling and automation to tackle inefficiencies in delivery.',
  },
  {
    number: '03',
    title: 'Measure ROI',
    description: 'Track adoption and time saved on each team that ships with the system.',
  },
];

const cardShadow = 'var(--flux-shadow-md)';
---

<PresentationLayout title="Template · Cards band">
  <div
    class="slide"
    style="padding: 0 !important; overflow: hidden !important; background: var(--flux-background);"
  >
    <div
      class="flex flex-col items-center justify-center text-center"
      style="position: absolute; top: 0; left: 0; right: 0; height: 50%; padding: 0 12%;"
    >
      <h2
        style="
          font-family: var(--flux-font-sans);
          font-weight: 700;
          font-size: clamp(2rem, 2.75vw, 3.25rem);
          line-height: 1.12;
          letter-spacing: -0.02em;
          color: var(--flux-black);
          margin-bottom: 0.75rem;
          max-width: 48rem;
        "
      >
        {headline}
      </h2>
      <p
        style="
          font-family: var(--flux-font-sans);
          font-weight: 300;
          font-size: clamp(1rem, 1.2vw, 1.375rem);
          line-height: 1.35;
          color: var(--flux-black);
          max-width: 40rem;
        "
      >
        {intro}
      </p>
    </div>

    <div
      style="
        position: absolute;
        left: 6%;
        right: 6%;
        top: 46%;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem;
      "
    >
      {cards.map((card) => (
        <div
          class="flux-glow-card"
          style={`
            background: var(--flux-surface);
            border: 1px solid var(--flux-grey-100);
            border-radius: var(--flux-radius-md);
            box-shadow: ${cardShadow};
            padding: 1.5rem 1.25rem 1.25rem;
            min-height: 11rem;
            display: flex;
            flex-direction: column;
          `}
        >
          <p
            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: 1rem;
            "
          >
            /{card.number}
          </p>
          <p
            style="
              font-family: var(--flux-font-sans);
              font-weight: 700;
              font-size: clamp(1rem, 1.2vw, 1.25rem);
              line-height: 1.25;
              color: var(--flux-black);
              margin-bottom: 0.5rem;
            "
          >
            {card.title}
          </p>
          <p
            style="
              font-family: var(--flux-font-sans);
              font-weight: 300;
              font-size: var(--flux-text-sm);
              line-height: 1.45;
              color: var(--flux-black);
              margin-top: auto;
            "
          >
            {card.description}
          </p>
        </div>
      ))}
    </div>
  </div>
</PresentationLayout>