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

// TEMPLATE — Chart (LIGHT)
// Reusable on-brand growth / trend slide. Simplified static version — do NOT
// import the React employee-count-chart component.
// - Ground: --flux-background with optional very low-opacity background photo
// - LEFT: dual headline stats + growth narrative
// - RIGHT: inline SVG line chart placeholder
// - Kaptio logo (dark) bottom-left
const statLeft = { year: '2024', value: '180' };
const statRight = { year: '2025', value: '240' };
const narrative = 'Steady growth across product, engineering, and customer success teams.';
const photo = '/images/bg-iceland-fjord-road.png';
---

<PresentationLayout title="Template · Chart">
  <div
    class="slide"
    style="padding: 0 !important; background: var(--flux-background); position: relative;"
  >
    <img
      src={photo}
      alt=""
      aria-hidden="true"
      style="position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.06;"
    />

    <div
      class="relative w-full h-full grid items-center"
      style="grid-template-columns: 42% 58%; padding: 8% 6% 6%; column-gap: 2rem;"
    >
      <div style="display: flex; flex-direction: column; gap: 1.5rem;">
        <div style="display: flex; gap: clamp(2rem, 4vw, 4rem);">
          <div>
            <p
              style="
                font-family: var(--flux-font-sans);
                font-weight: 700;
                font-size: clamp(1.25rem, 1.6vw, 2rem);
                color: var(--flux-black);
                margin-bottom: 0.25rem;
              "
            >
              {statLeft.year}
            </p>
            <p
              style="
                font-family: var(--flux-font-sans);
                font-weight: 700;
                font-size: clamp(3rem, 5vw, 5.5rem);
                line-height: 1;
                color: var(--flux-primary-600);
              "
            >
              {statLeft.value}
            </p>
          </div>
          <div>
            <p
              style="
                font-family: var(--flux-font-sans);
                font-weight: 700;
                font-size: clamp(1.25rem, 1.6vw, 2rem);
                color: var(--flux-black);
                margin-bottom: 0.25rem;
              "
            >
              {statRight.year}
            </p>
            <p
              style="
                font-family: var(--flux-font-sans);
                font-weight: 700;
                font-size: clamp(3rem, 5vw, 5.5rem);
                line-height: 1;
                color: var(--flux-primary-600);
              "
            >
              {statRight.value}
            </p>
          </div>
        </div>
        <p
          style="
            font-family: var(--flux-font-sans);
            font-weight: 300;
            font-size: clamp(1rem, 1.2vw, 1.375rem);
            line-height: 1.4;
            color: var(--flux-black);
            max-width: 90%;
          "
        >
          {narrative}
        </p>
      </div>

      <div
        style="
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          height: 100%;
        "
      >
        <svg
          viewBox="0 0 400 220"
          width="100%"
          height="auto"
          style="max-height: 55%;"
          aria-label="Chart placeholder"
        >
          <line x1="40" y1="180" x2="380" y2="180" stroke="var(--flux-grey-200)" stroke-width="1" />
          <line x1="40" y1="20" x2="40" y2="180" stroke="var(--flux-grey-200)" stroke-width="1" />
          <polygon
            points="40,160 120,140 200,100 280,80 360,50 360,180 40,180"
            fill="var(--flux-primary-100)"
          />
          <polyline
            points="40,160 120,140 200,100 280,80 360,50"
            fill="none"
            stroke="var(--flux-primary-400)"
            stroke-width="3"
            stroke-linejoin="round"
            stroke-linecap="round"
          />
          <text
            x="200"
            y="210"
            text-anchor="middle"
            style="font-family: var(--flux-font-sans); font-weight: 300; font-size: 12px; fill: var(--flux-grey-300);"
          >
            Chart placeholder
          </text>
        </svg>
      </div>
    </div>

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