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

// TEMPLATE — Feature matrix (LIGHT)
// Reusable on-brand competitive comparison TABLE slide. Different from the
// compare template's narrative columns — this is a structured feature matrix.
// - Ground: --flux-background (#F9FAF8)
// - Flux table in a card wrapper per AGENTS.md
// - Header row uppercase grey-300; Kaptio column green checks; alternative dash/X
// - NO colored column header eyebrows
const headline = 'How we compare';
const features = [
  { name: 'Unified product catalogue', kaptio: true, alt: false },
  { name: 'Real-time availability', kaptio: true, alt: false },
  { name: 'Multi-product packaging', kaptio: true, alt: true },
  { name: 'Salesforce-native platform', kaptio: true, alt: false },
  { name: 'Automated pricing engine', kaptio: true, alt: false },
  { name: 'Edge app ecosystem', kaptio: true, alt: false },
];
---

<PresentationLayout title="Template · Feature matrix">
  <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% 8% 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: clamp(2rem, 4vh, 3rem);
        "
      >
        {headline}
      </h1>

      <div
        style="
          width: 100%;
          max-width: 75%;
          background: var(--flux-surface);
          border: 1px solid var(--flux-grey-100);
          border-radius: var(--flux-radius-lg);
          overflow: hidden;
        "
      >
        <table style="width: 100%; border-collapse: collapse; font-size: var(--flux-text-sm); text-align: left;">
          <thead>
            <tr>
              <th
                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-grey-300);
                  padding: 0.875rem 1.25rem;
                  border-bottom: 1px solid var(--flux-grey-100);
                  text-align: left;
                "
              >
                Feature
              </th>
              <th
                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-grey-300);
                  padding: 0.875rem 1.25rem;
                  border-bottom: 1px solid var(--flux-grey-100);
                  text-align: center;
                "
              >
                Kaptio
              </th>
              <th
                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-grey-300);
                  padding: 0.875rem 1.25rem;
                  border-bottom: 1px solid var(--flux-grey-100);
                  text-align: center;
                "
              >
                Alternative
              </th>
            </tr>
          </thead>
          <tbody>
            {features.map((row, i) => (
              <tr>
                <td
                  style={`
                    font-family: var(--flux-font-sans);
                    font-weight: 300;
                    color: var(--flux-black);
                    padding: 0.875rem 1.25rem;
                    ${i < features.length - 1 ? 'border-bottom: 1px solid var(--flux-grey-100);' : ''}
                  `}
                >
                  {row.name}
                </td>
                <td
                  style={`
                    text-align: center;
                    padding: 0.875rem 1.25rem;
                    ${i < features.length - 1 ? 'border-bottom: 1px solid var(--flux-grey-100);' : ''}
                  `}
                >
                  {row.kaptio ? (
                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" aria-hidden="true" style="display: inline-block;">
                      <rect x="1" y="1" width="18" height="18" rx="4" fill="var(--flux-green-400)" />
                      <path d="M5.5 10.2l2.8 2.8 6-6.2" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                    </svg>
                  ) : (
                    <span style="color: var(--flux-grey-300);">—</span>
                  )}
                </td>
                <td
                  style={`
                    text-align: center;
                    padding: 0.875rem 1.25rem;
                    ${i < features.length - 1 ? 'border-bottom: 1px solid var(--flux-grey-100);' : ''}
                  `}
                >
                  {row.alt ? (
                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" aria-hidden="true" style="display: inline-block;">
                      <rect x="1" y="1" width="18" height="18" rx="4" fill="var(--flux-green-400)" />
                      <path d="M5.5 10.2l2.8 2.8 6-6.2" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                    </svg>
                  ) : (
                    <span style="font-family: var(--flux-font-sans); font-weight: 300; color: var(--flux-grey-300);">—</span>
                  )}
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>

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