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

// TEMPLATE — Team (LIGHT)
// Reusable on-brand leadership / team slide. Clone this to introduce key people.
// - Ground: --flux-background (#F9FAF8)
// - Bold headline (no emoji), row of person cards with circular avatars
// - No accent bars on cards
// - Kaptio logo (dark) centered near the bottom
const headline = 'Leadership';
const members = [
  { initials: 'JD', name: 'Jane Doe', role: 'Chief Executive Officer' },
  { initials: 'MS', name: 'Marcus Smith', role: 'Chief Technology Officer' },
  { initials: 'AL', name: 'Anna Lee', role: 'Chief Product Officer' },
  { initials: 'RK', name: 'Robert Kim', role: 'Chief Revenue Officer' },
];
---

<PresentationLayout title="Template · Team">
  <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: clamp(2.5rem, 5vh, 4rem);
        "
      >
        {headline}
      </h1>

      <div
        class="grid w-full"
        style="
          grid-template-columns: repeat(4, 1fr);
          column-gap: clamp(1.5rem, 3vw, 3rem);
          max-width: 90%;
        "
      >
        {members.map((member) => (
          <div
            style="
              display: flex;
              flex-direction: column;
              align-items: center;
              text-align: center;
              gap: 0.875rem;
            "
          >
            <div
              style="
                width: clamp(5rem, 8vw, 7rem);
                height: clamp(5rem, 8vw, 7rem);
                border-radius: var(--flux-radius-full);
                background: var(--flux-primary-100);
                display: flex;
                align-items: center;
                justify-content: center;
              "
            >
              <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);
                "
              >
                {member.initials}
              </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);
              "
            >
              {member.name}
            </p>
            <p
              style="
                font-family: var(--flux-font-sans);
                font-weight: 300;
                font-size: clamp(0.875rem, 1vw, 1.125rem);
                line-height: 1.3;
                color: var(--flux-grey-300);
              "
            >
              {member.role}
            </p>
          </div>
        ))}
      </div>
    </div>

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