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

// TEMPLATE — Logo strip (LIGHT)
// Reusable on-brand social proof / customer logo grid. Simplified clone-able
// version of the client-ecosystem pattern — do NOT import FitEcosystemSlide.
// - Ground: --flux-background (#F9FAF8)
// - ONE optional muted grey kicker, bold headline, one light support line
// - Grid of logo placeholder cells (no colored top borders, no coral eyebrows)
// - Kaptio logo (dark) centered near the bottom
const kicker = 'Trusted by';
const headline = 'Global customers';
const support = 'Tour operators and DMCs across six continents rely on Kaptio.';
const logoCount = 8;
---

<PresentationLayout title="Template · Logo strip">
  <div
    class="slide"
    style="padding: 0 !important; background: var(--flux-background);"
  >
    <div
      class="relative w-full h-full flex flex-col items-center"
      style="padding: 8% 8% 6%;"
    >
      <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);
          text-align: center;
          margin-bottom: 0.75rem;
        "
      >
        {headline}
      </h1>
      <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);
          text-align: center;
          max-width: 60%;
          margin-bottom: clamp(2rem, 4vh, 3rem);
        "
      >
        {support}
      </p>

      <div
        class="grid w-full"
        style="
          grid-template-columns: repeat(4, 1fr);
          gap: clamp(0.75rem, 1.5vw, 1.25rem);
          max-width: 85%;
        "
      >
        {Array.from({ length: logoCount }).map((_, i) => (
          <div
            style="
              background: var(--flux-surface);
              border: 1px solid var(--flux-grey-100);
              border-radius: var(--flux-radius-md);
              aspect-ratio: 2.2 / 1;
              display: flex;
              align-items: center;
              justify-content: center;
            "
          >
            <span
              style="
                font-family: var(--flux-font-sans);
                font-weight: 300;
                font-size: var(--flux-text-sm);
                color: var(--flux-grey-300);
              "
            >
              Logo
            </span>
          </div>
        ))}
      </div>
    </div>

    <div
      class="absolute left-0 right-0 flex justify-center"
      style="bottom: 5%;"
    >
      <KaptioLogo variant="dark" height={32} />
    </div>
  </div>
</PresentationLayout>