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

// TEMPLATE — Categorized lists (LIGHT)
// Reusable on-brand taxonomy / two-column list slide. Clone this for extension
// categories, product groupings, or any side-by-side categorized lists.
// - Ground: --flux-background (#F9FAF8)
// - Left-aligned bold headline (optional single emoji), no kicker required
// - Two equal columns: full-width header chips + unordered list below each
// - NO per-column colored eyebrows beyond the chips
const headline = '💡 Extension Examples';
const columns = [
  {
    chipLabel: 'Core Extensions',
    chipBg: 'var(--flux-primary-100)',
    chipBorder: 'var(--flux-primary-600)',
    items: [
      'Itinerary Builder Service Extensions',
      'Package Search Extensions',
      'Passenger Grid',
      'Commission Override Extensions',
    ],
  },
  {
    chipLabel: 'Edge Apps',
    chipBg: 'var(--flux-yellow-200)',
    chipBorder: 'var(--flux-yellow-800)',
    items: [
      'Operational Apps (e.g. Guest Check-in)',
      'FinTech apps (e.g. supplier payments)',
      'Doc Generation & Customer Payments',
      'Mobile Guest App',
      'Data Intelligence Apps',
    ],
  },
];
---

<PresentationLayout title="Template · Categorized lists">
  <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.25% 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);
          margin-bottom: clamp(2.5rem, 5vh, 4rem);
        "
      >
        {headline}
      </h1>

      <div
        class="grid"
        style="grid-template-columns: repeat(2, 1fr); column-gap: clamp(2rem, 4vw, 4rem); align-items: start;"
      >
        {columns.map((col) => (
          <div style="display: flex; flex-direction: column;">
            <div
              style={`
                width: 100%;
                text-align: center;
                font-family: var(--flux-font-sans);
                font-weight: 700;
                font-size: clamp(1.25rem, 1.75vw, 2rem);
                color: var(--flux-black);
                background: ${col.chipBg};
                border: 1px solid ${col.chipBorder};
                border-radius: var(--flux-radius-sm);
                padding: 0.75rem 1rem;
                margin-bottom: clamp(1.5rem, 3vh, 2.5rem);
              `}
            >
              {col.chipLabel}
            </div>
            <ul
              style="
                list-style: disc;
                margin: 0;
                padding-left: 1.5rem;
                display: flex;
                flex-direction: column;
                gap: clamp(0.75rem, 1.5vh, 1.25rem);
              "
            >
              {col.items.map((item) => (
                <li
                  style="
                    font-family: var(--flux-font-sans);
                    font-weight: 300;
                    font-size: clamp(1.125rem, 1.5vw, 1.875rem);
                    line-height: 1.45;
                    color: var(--flux-primary-800);
                  "
                >
                  {item}
                </li>
              ))}
            </ul>
          </div>
        ))}
      </div>
    </div>
  </div>
</PresentationLayout>