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

// TEMPLATE — Process / journey (LIGHT)
// Reusable on-brand how-it-works slide. Inspired by Flux Journey component
// semantics but pure static Astro — NOT the compare template.
// - Ground: --flux-background (#F9FAF8)
// - Bold headline + optional one-line intro
// - 4 horizontal steps with numbered tiles, grey arrows, bold titles, light descriptions
// - Kaptio logo (dark) centered near the bottom
const headline = 'How it works';
const intro = 'From first enquiry to confirmed booking in four connected steps.';
const steps = [
  { title: 'Discover', description: 'Search products and build tailored itineraries.' },
  { title: 'Configure', description: 'Apply pricing, availability, and passenger details.' },
  { title: 'Quote', description: 'Generate proposals and share with customers.' },
  { title: 'Book', description: 'Confirm reservations and trigger operations.' },
];
---

<PresentationLayout title="Template · Process / journey">
  <div
    class="slide"
    style="padding: 0 !important; background: var(--flux-background);"
  >
    <div
      class="relative w-full h-full flex flex-col items-center justify-center"
      style="padding: 8% 6% 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);
          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: 55%;
          margin-bottom: clamp(2.5rem, 5vh, 4rem);
        "
      >
        {intro}
      </p>

      <div
        class="flex items-start w-full"
        style="max-width: 92%; justify-content: center; gap: 0;"
      >
        {steps.map((step, i) => (
          <div class="flex items-start" style="flex: 1; max-width: none;">
            <div
              style="
                display: flex;
                flex-direction: column;
                align-items: center;
                text-align: center;
                flex: 1;
                max-width: 14rem;
              "
            >
              <div
                style="
                  width: clamp(3.5rem, 5vw, 4.5rem);
                  height: clamp(3.5rem, 5vw, 4.5rem);
                  border-radius: var(--flux-radius-md);
                  background: var(--flux-primary-100);
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  margin-bottom: 1rem;
                "
              >
                <span
                  style="
                    font-family: var(--flux-font-sans);
                    font-weight: 700;
                    font-size: clamp(1.25rem, 1.6vw, 1.75rem);
                    color: var(--flux-primary-400);
                  "
                >
                  {i + 1}
                </span>
              </div>
              <p
                style="
                  font-family: var(--flux-font-sans);
                  font-weight: 700;
                  font-size: clamp(1rem, 1.2vw, 1.375rem);
                  line-height: 1.2;
                  color: var(--flux-black);
                  margin-bottom: 0.5rem;
                "
              >
                {step.title}
              </p>
              <p
                style="
                  font-family: var(--flux-font-sans);
                  font-weight: 300;
                  font-size: clamp(0.875rem, 1vw, 1.125rem);
                  line-height: 1.35;
                  color: var(--flux-black);
                "
              >
                {step.description}
              </p>
            </div>
            {i < steps.length - 1 && (
              <div
                style="
                  display: flex;
                  align-items: center;
                  padding-top: 1.5rem;
                  flex-shrink: 0;
                  width: clamp(1.5rem, 3vw, 3rem);
                "
              >
                <svg width="100%" height="16" viewBox="0 0 48 16" fill="none" aria-hidden="true">
                  <path
                    d="M0 8h36m0 0l-6-6m6 6l-6 6"
                    stroke="var(--flux-grey-200)"
                    stroke-width="2"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  />
                </svg>
              </div>
            )}
          </div>
        ))}
      </div>
    </div>

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