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

// TEMPLATE — Customer intro (DARK)
// Reusable on-brand customer introduction. Clone this to introduce a new account.
// - Ground: --flux-primary-800 (#032E36)
// - Full-bleed photo + subtle teal overlay + spectrum texture
// - LEFT: big white bold title with optional leading emoji, soft drop shadow
// - RIGHT: teal panel (--flux-primary-800 @ 90%, --flux-radius-lg) with a logo
//   placeholder, light white description lines, and the Kaptio logo (light)
const title = '👋 New customer in 2024';
const lines = [
  'Specialise in selling small luxury international group tours to the Australian market',
  'Been in operation for 30+ years, well-established business',
  'Prominent and influential CEO, Chairman of CATO (Council of Australian Tour Operators)',
];
const photo = '/images/bg-egypt-pyramids.png';
const spectrum = '/images/texture-spectrum.png';
---

<PresentationLayout title="Template · Customer intro">
  <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;"
    />

    <div
      class="relative w-full h-full grid items-center"
      style="grid-template-columns: 57% 43%; padding: 0 4% 0 6%; column-gap: 3rem;"
    >
      <!-- Left: headline -->
      <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;
          max-width: 90%;
          text-shadow: 0 2px 24px rgba(3, 46, 54, 0.5);
        "
      >
        {title}
      </h1>

      <!-- Right: customer panel (tint layer at 90% behind full-opacity content) -->
      <div
        style="
          position: relative;
          border-radius: var(--flux-radius-lg);
          padding: clamp(2rem, 3vw, 3.5rem);
          display: flex;
          flex-direction: column;
          gap: 2rem;
          height: 86%;
          overflow: hidden;
        "
      >
        <div
          style="position: absolute; inset: 0; background: var(--flux-primary-800); opacity: 0.9; border-radius: var(--flux-radius-lg);"
          aria-hidden="true"
        ></div>

        <!-- Customer logo placeholder -->
        <div
          style="
            position: relative;
            z-index: 1;
            border: 1px dashed rgba(255, 255, 255, 0.4);
            border-radius: var(--flux-radius-md);
            min-height: 5.5rem;
            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: #FFFFFF;
              opacity: 0.7;
            "
          >
            Customer logo
          </span>
        </div>

        <!-- Description lines -->
        <div style="position: relative; z-index: 1; display: flex; flex-direction: column; gap: 1.5rem;">
          {lines.map((line) => (
            <p
              style="
                font-family: var(--flux-font-sans);
                font-weight: 300;
                font-size: clamp(1.125rem, 1.6vw, 2rem);
                line-height: 1.35;
                color: #FFFFFF;
              "
            >
              {line}
            </p>
          ))}
        </div>

        <!-- Kaptio logo at panel bottom -->
        <div style="position: relative; z-index: 1; margin-top: auto; display: flex; justify-content: flex-end;">
          <KaptioLogo variant="light" height={30} />
        </div>
      </div>
    </div>
  </div>
</PresentationLayout>