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

// TEMPLATE — Two-column compare (LIGHT)
// Reusable on-brand "before / after" comparison. This is the CORRECTED version of a
// slide that previously went off-brand (coral eyebrows everywhere, yellow headline /
// emphasis). It encodes the Flux anti-leak rules:
//   - One bold black headline; NO colored / yellow / coral words.
//   - ONE muted grey eyebrow (text-xs, bold, tracking-widest, uppercase) — not one per column.
//   - Two equal subtle cards: --flux-radius, border --flux-grey-100, bg --flux-surface.
//   - Column headings are bold black (NOT a second eyebrow, NOT colored).
//   - Body is Lexend Light black; lead-in words may be bold (700) black — NEVER colored.
//   - No single-edge accent bars; shadow capped at --flux-shadow-md.
const eyebrow = 'Why Kaptio';
const headline = 'From spreadsheets to a single source of truth';
const columns = [
  {
    heading: 'What you have today',
    points: [
      { lead: 'Scattered data.', body: 'Itineraries, pricing, and availability live across disconnected spreadsheets.' },
      { lead: 'Manual rekeying.', body: 'Every change is copied by hand between tools, inviting costly errors.' },
      { lead: 'Slow to quote.', body: 'Building a complex multi-day trip takes days, not minutes.' },
      { lead: 'No live view.', body: 'Margins and capacity are only known after the fact.' },
    ],
  },
  {
    heading: 'What Kaptio gives you',
    points: [
      { lead: 'One platform.', body: 'Products, pricing, and bookings managed in a single connected system.' },
      { lead: 'Automated flows.', body: 'Changes propagate everywhere instantly, with no duplicate entry.' },
      { lead: 'Quote in minutes.', body: 'Assemble and price tailored itineraries while the customer is still on the call.' },
      { lead: 'Real-time insight.', body: 'See margin, capacity, and demand as they move.' },
    ],
  },
];
---

<PresentationLayout title="Template · Two-column compare">
  <div
    class="slide"
    style="padding: 0 !important; background: var(--flux-background);"
  >
    <div
      class="relative w-full h-full flex flex-col justify-center"
      style="padding: 7% 6.25%;"
    >
      <!-- One muted eyebrow (the only kicker) + one bold black headline -->
      <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;
        "
      >
        {eyebrow}
      </p>
      <h1
        style="
          font-family: var(--flux-font-sans);
          font-weight: 700;
          font-size: clamp(2.25rem, 3.2vw, 3.5rem);
          line-height: 1.08;
          letter-spacing: -0.02em;
          color: var(--flux-black);
          max-width: 70%;
          margin-bottom: clamp(2rem, 4vh, 3.5rem);
        "
      >
        {headline}
      </h1>

      <!-- Two equal cards -->
      <div
        class="grid"
        style="grid-template-columns: repeat(2, 1fr); column-gap: clamp(1.5rem, 3vw, 3rem); align-items: stretch;"
      >
        {columns.map((col) => (
          <div
            style="
              background: var(--flux-surface);
              border: 1px solid var(--flux-grey-100);
              border-radius: var(--flux-radius-lg);
              box-shadow: var(--flux-shadow-md);
              padding: clamp(1.75rem, 2.5vw, 2.75rem);
              display: flex;
              flex-direction: column;
            "
          >
            <p
              style="
                font-family: var(--flux-font-sans);
                font-weight: 700;
                font-size: clamp(1.25rem, 1.7vw, 1.875rem);
                line-height: 1.1;
                color: var(--flux-black);
                margin-bottom: 1.5rem;
              "
            >
              {col.heading}
            </p>
            <ul style="list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1rem;">
              {col.points.map((point) => (
                <li
                  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);
                  "
                >
                  <span style="font-weight: 700; color: var(--flux-black);">{point.lead}</span>{' '}{point.body}
                </li>
              ))}
            </ul>
          </div>
        ))}
      </div>
    </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>