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

// TEMPLATE — Item cards (LIGHT)
// Centered headline + intro, then a row of icon cards (icon, bold label, description).
// Use for a small set of named concepts, layers, or steps — NOT inside a screenshot frame.
// - Top: centered title + optional subtitle (mid-aligned in upper half)
// - Cards: --flux-primary-50 tint, --flux-grey-100 border, Flux card hover (primary glow)
// - Each card: real icon (--flux-primary-800) + bold label + light description
const title = 'Design × AI';
const intro =
  'How Flux keeps agent-built decks on-brand — clone this card grid, not a product screenshot frame.';

// Icon inner markup (Lucide-style, 24×24 stroke). No emoji as the icon system.
const icons: Record<string, string> = {
  fileText:
    '<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><polyline points="10 9 9 9 8 9"/>',
  layout:
    '<rect x="3" y="3" width="18" height="18" rx="2"/><line x1="3" y1="9" x2="21" y2="9"/><line x1="9" y1="21" x2="9" y2="9"/>',
  bot:
    '<rect x="4" y="8" width="16" height="12" rx="2"/><path d="M12 8V4"/><circle cx="12" cy="3" r="1"/><line x1="9" y1="13" x2="9" y2="14"/><line x1="15" y1="13" x2="15" y2="14"/>',
  sparkles:
    '<path d="M12 3l1.9 5.1L19 10l-5.1 1.9L12 17l-1.9-5.1L5 10l5.1-1.9z"/><path d="M18 4v4"/><path d="M20 6h-4"/>',
};

const cards = [
  {
    icon: 'fileText',
    label: 'llms.txt',
    description: 'Design rules agents read before building',
  },
  {
    icon: 'layout',
    label: 'Templates',
    description: '30 slide sources at flux.kaptio.com',
  },
  {
    icon: 'bot',
    label: 'Agents',
    description: 'Vera and Kai clone markup — change copy only',
  },
  {
    icon: 'sparkles',
    label: 'Output',
    description: 'On-brand decks and surfaces, same session',
  },
];
---

<PresentationLayout title="Template · Item cards">
  <div
    class="slide"
    style="padding: 0 !important; background: var(--flux-background);"
  >
    <div
      class="relative w-full h-full flex flex-col"
      style="padding: 7% 8% 6%;"
    >
      <div
        class="flex flex-col items-center text-center"
        style="margin-bottom: clamp(2rem, 4vh, 3rem);"
      >
        <h2
          style="
            font-family: var(--flux-font-sans);
            font-weight: 700;
            font-size: clamp(2rem, 2.75vw, 3.25rem);
            line-height: 1.1;
            letter-spacing: -0.02em;
            color: var(--flux-black);
            margin-bottom: 0.75rem;
          "
        >
          {title}
        </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: 42rem;
          "
        >
          {intro}
        </p>
      </div>

      <div
        class="item-card-grid"
        style={`grid-template-columns: repeat(${cards.length}, 1fr);`}
      >
        {cards.map((card) => (
          <div class="item-card flux-glow-card">
            <svg
              width="30"
              height="30"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="1.75"
              stroke-linecap="round"
              stroke-linejoin="round"
              style="color: var(--flux-primary-800);"
              aria-hidden="true"
              set:html={icons[card.icon]}
            ></svg>
            <p
              style="
                font-family: var(--flux-font-sans);
                font-weight: 700;
                font-size: clamp(1rem, 1.15vw, 1.25rem);
                line-height: 1.2;
                color: var(--flux-black);
              "
            >
              {card.label}
            </p>
            <p
              style="
                font-family: var(--flux-font-sans);
                font-weight: 300;
                font-size: var(--flux-text-sm);
                line-height: 1.4;
                color: var(--flux-black);
              "
            >
              {card.description}
            </p>
          </div>
        ))}
      </div>
    </div>
  </div>
</PresentationLayout>

<style>
  .item-card-grid {
    flex: 1;
    display: grid;
    gap: clamp(1rem, 1.75vw, 1.5rem);
    align-content: center;
  }

  .item-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.875rem;
    padding: clamp(1.25rem, 2.5vh, 2rem) 1.25rem;
    border-radius: var(--flux-radius-md);
    border: 1px solid var(--flux-grey-100);
    background: var(--flux-primary-50);
    box-shadow: var(--flux-shadow-sm);
  }
</style>