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

// TEMPLATE — Security & trust (LIGHT)
// Reusable on-brand security / compliance slide. Clone this for trust narratives.
// - Ground: --flux-background (#F9FAF8)
// - Bold headline, 2×2 grid of trust cards with inline SVG icons (NOT emoji)
// - Cards: --flux-surface, --flux-grey-100 border, --flux-radius-lg, --flux-shadow-sm max
// - No single-edge accent bars on cards
// - Kaptio logo (dark) centered near the bottom
const headline = 'Security & trust';
const cards = [
  {
    title: 'Salesforce-native platform',
    description: 'Built on the Salesforce platform with enterprise-grade infrastructure and continuous updates.',
    icon: 'shield',
  },
  {
    title: 'Enterprise-grade security',
    description: 'Role-based access, encryption at rest and in transit, and regular penetration testing.',
    icon: 'shield',
  },
  {
    title: 'Data residency',
    description: 'Customer data hosted in regional Salesforce instances to meet local requirements.',
    icon: 'check',
  },
  {
    title: 'Audit & compliance',
    description: 'SOC 2 aligned controls, audit trails, and compliance reporting for regulated operators.',
    icon: 'check',
  },
];
---

<PresentationLayout title="Template · Security & trust">
  <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.5rem, 3.75vw, 4.5rem);
          line-height: 1.05;
          letter-spacing: -0.02em;
          color: var(--flux-black);
          text-align: center;
          margin-bottom: clamp(2rem, 4vh, 3.5rem);
        "
      >
        {headline}
      </h1>

      <div
        class="grid w-full"
        style="
          grid-template-columns: repeat(2, 1fr);
          gap: clamp(1rem, 2vw, 1.5rem);
          max-width: 85%;
        "
      >
        {cards.map((card) => (
          <div
            style="
              background: var(--flux-surface);
              border: 1px solid var(--flux-grey-100);
              border-radius: var(--flux-radius-lg);
              box-shadow: var(--flux-shadow-sm);
              padding: clamp(1.25rem, 2vw, 2rem);
              display: flex;
              flex-direction: column;
              gap: 0.75rem;
            "
          >
            {card.icon === 'shield' ? (
              <svg width="28" height="28" viewBox="0 0 28 28" fill="none" aria-hidden="true">
                <path
                  d="M14 3L5 7v6.5c0 5.5 3.8 10.6 9 12 5.2-1.4 9-6.5 9-12V7l-9-4z"
                  stroke="var(--flux-primary-400)"
                  stroke-width="2"
                  stroke-linejoin="round"
                />
              </svg>
            ) : (
              <svg width="28" height="28" viewBox="0 0 28 28" fill="none" aria-hidden="true">
                <circle cx="14" cy="14" r="10" stroke="var(--flux-primary-400)" stroke-width="2" />
                <path
                  d="M9 14.2l3 3 7-7.5"
                  stroke="var(--flux-primary-400)"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                />
              </svg>
            )}
            <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);
              "
            >
              {card.title}
            </p>
            <p
              style="
                font-family: var(--flux-font-sans);
                font-weight: 300;
                font-size: clamp(0.875rem, 1vw, 1.125rem);
                line-height: 1.4;
                color: var(--flux-black);
              "
            >
              {card.description}
            </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>