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

// TEMPLATE — Global presence (LIGHT)
// Reusable on-brand global footprint slide. Simplified from
// KaptioGlobalPresenceSlide — map technique only, pure static Astro.
// - Ground: --flux-background (#F9FAF8)
// - Centered headline + subtitle about follow-the-sun
// - Dotted world map using /slide-examples/world-map.svg mask on LIGHT ground
// - Regional markers with --flux-primary-400 dots + labels
// - Optional regional banner pills at top using Flux badge tints
// - Kaptio logo (dark) centered near the bottom
const headline = 'Global presence';
const subtitle = 'Follow-the-sun support model across AMER, EMEA, and APAC.';
const worldMap = '/slide-examples/world-map.svg';
const regions = [
  { label: 'AMER', tint: 'var(--flux-primary-100)' },
  { label: 'EMEA', tint: 'var(--flux-green-200)' },
  { label: 'APAC', tint: 'var(--flux-blue-200)' },
];
const markers = [
  { left: '18%', top: '38%', label: 'AMER' },
  { left: '48%', top: '32%', label: 'EMEA' },
  { left: '78%', top: '58%', label: 'APAC' },
];
---

<PresentationLayout title="Template · Global presence">
  <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: 7% 6% 6%;"
    >
      <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.5rem;
        "
      >
        {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;
          margin-bottom: 1.25rem;
        "
      >
        {subtitle}
      </p>

      <div
        class="flex"
        style="gap: 0.75rem; margin-bottom: clamp(1.5rem, 3vh, 2.5rem);"
      >
        {regions.map((region) => (
          <span
            style={`
              font-family: var(--flux-font-sans);
              font-weight: 700;
              font-size: var(--flux-text-xs);
              letter-spacing: 0.08em;
              text-transform: uppercase;
              color: var(--flux-black);
              background: ${region.tint};
              border-radius: var(--flux-radius-full);
              padding: 0.35rem 1rem;
            `}
          >
            {region.label}
          </span>
        ))}
      </div>

      <div style="position: relative; width: 72%; max-width: 52rem; aspect-ratio: 950 / 620;">
        <div
          style={`
            position: absolute;
            inset: 0;
            background-image:
              radial-gradient(circle, var(--flux-primary-300) 1.4px, transparent 1.8px),
              radial-gradient(circle, var(--flux-primary-300) 1.4px, transparent 1.8px);
            background-size: 6px 10px;
            background-position: 0 0, 3px 5px;
            -webkit-mask-image: url(${worldMap});
            mask-image: url(${worldMap});
            -webkit-mask-size: 100% 100%;
            mask-size: 100% 100%;
            -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
          `}
          aria-hidden="true"
        ></div>

        {markers.map((marker) => (
          <div
            style={`
              position: absolute;
              left: ${marker.left};
              top: ${marker.top};
              transform: translate(-50%, -50%);
              display: flex;
              flex-direction: column;
              align-items: center;
              gap: 0.35rem;
            `}
          >
            <span
              style="
                width: 0.75rem;
                height: 0.75rem;
                border-radius: var(--flux-radius-full);
                background: var(--flux-primary-400);
              "
              aria-hidden="true"
            ></span>
            <span
              style="
                font-family: var(--flux-font-sans);
                font-weight: 700;
                font-size: var(--flux-text-xs);
                letter-spacing: 0.06em;
                text-transform: uppercase;
                color: var(--flux-black);
              "
            >
              {marker.label}
            </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>