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

// TEMPLATE — Customer intro with map (DARK)
// Richer variant of the Customer intro template. Clone this to introduce an account
// when their home market matters to the story.
// - Ground: --flux-primary-800 (#032E36) + full-bleed photo + teal overlay
// - LEFT: tall teal panel (~33% width) with a white logo card on top and a dotted
//   world map below; ONE --flux-yellow-400 location dot marks the customer's market
// - RIGHT: big white Lexend Bold title with optional leading emoji, soft drop shadow
// The dotted map reuses the CSS mask technique from KaptioGlobalPresenceSlide:
// a dot grid masked by /slide-examples/world-map.svg (950x620, stretches to fill).
const title = '👋 Introduction';
const logoCaption = 'From Australia';
const photo = '/images/bg-iceland-bridge-aerial.png';
const spectrum = '/images/texture-spectrum.png';
const worldMap = '/slide-examples/world-map.svg';
// Plate-carree percentages for the location dot (lon 134, lat -26 ~= central Australia)
const dot = { left: '87%', top: '64%' };
---

<PresentationLayout title="Template · Customer intro (map)">
  <div
    class="slide"
    style="padding: 0 !important; background: var(--flux-primary-800);"
  >
    <!-- Layer stack: photo -> teal overlay 0.45 -> spectrum 0.15 -->
    <img
      src={photo}
      alt=""
      aria-hidden="true"
      style="position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;"
    />
    <div style="position: absolute; inset: 0; background: var(--flux-primary-800); opacity: 0.45;"></div>
    <img
      src={spectrum}
      alt=""
      aria-hidden="true"
      style="position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.15;"
    />

    <!-- Left: tall customer panel (tint layer at ~92% behind full-opacity content) -->
    <div
      style="
        position: absolute;
        top: 2rem;
        bottom: 2rem;
        left: 2rem;
        width: 33%;
        border-radius: var(--flux-radius-lg);
        padding: clamp(1.5rem, 2.5vw, 3rem);
        display: flex;
        flex-direction: column;
        gap: clamp(1.5rem, 3vh, 2.5rem);
        overflow: hidden;
      "
    >
      <div
        style="position: absolute; inset: 0; background: var(--flux-primary-800); opacity: 0.92; border-radius: var(--flux-radius-lg);"
        aria-hidden="true"
      ></div>

      <!-- Customer logo card -->
      <div
        style="
          position: relative;
          z-index: 1;
          background: var(--flux-white);
          border-radius: var(--flux-radius-md);
          box-shadow: var(--flux-shadow-lg);
          padding: clamp(1.5rem, 2.5vh, 2.25rem) 1.5rem;
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 0.5rem;
        "
      >
        <span
          style="
            font-family: var(--flux-font-sans);
            font-weight: 700;
            font-size: clamp(1.125rem, 1.4vw, 1.625rem);
            color: var(--flux-grey-300);
          "
        >
          Customer logo
        </span>
        <span
          style="
            font-family: var(--flux-font-sans);
            font-weight: 300;
            font-size: var(--flux-text-sm);
            color: var(--flux-black);
          "
        >
          {logoCaption}
        </span>
      </div>

      <!-- Dotted world map: dot grid masked by the world-map SVG, one yellow marker -->
      <div style="position: relative; z-index: 1; flex: 1; display: flex; align-items: center;">
        <div style="position: relative; width: 100%; aspect-ratio: 950 / 620;">
          <div
            style={`
              position: absolute;
              inset: 0;
              background-image:
                radial-gradient(circle, rgba(255, 255, 255, 0.55) 1.4px, transparent 1.8px),
                radial-gradient(circle, rgba(255, 255, 255, 0.55) 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>
          <!-- The customer's location: the single yellow accent on this slide -->
          <span
            style={`
              position: absolute;
              left: ${dot.left};
              top: ${dot.top};
              width: 0.625rem;
              height: 0.625rem;
              border-radius: var(--flux-radius-full);
              background: var(--flux-yellow-400);
              transform: translate(-50%, -50%);
            `}
            aria-hidden="true"
          ></span>
        </div>
      </div>
    </div>

    <!-- Right: headline, vertically centered over the photo -->
    <div
      class="flex items-center"
      style="position: absolute; top: 0; bottom: 0; left: 40%; right: 4%;"
    >
      <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: #FFFFFF;
          text-shadow: 0 2px 24px rgba(3, 46, 54, 0.5);
        "
      >
        {title}
      </h1>
    </div>
  </div>
</PresentationLayout>