---
interface Tile {
  outcome: string;
  capability: string;
}

// tile.capability is a compile-time constant defined below — never feed
// user-supplied or CMS content into set:html further down (XSS risk).
const tiles: Tile[] = [
  {
    outcome: 'Cut debugging time in half.',
    capability:
      'Every processor on every route, timed to the nanosecond. Choice branches, splits, multicasts, and error handlers preserved as a proper execution tree — not a pile of log lines.',
  },
  {
    outcome: 'Ship integrations with confidence.',
    capability:
      'Capture real payloads and replay them on demand. Deep-trace a specific correlation ID across services. Push trace settings to a running agent without a redeploy.',
  },
  {
    outcome: 'Keep what you have built.',
    capability:
      'One `-javaagent` flag. No code changes, no SDK, no framework lock-in. Native understanding of 45+ EIP node types across Apache Camel 4.x.',
  },
];
---
<section class="border-b border-border">
  <div class="max-w-content mx-auto px-6 py-20 md:py-24">
    <div class="grid md:grid-cols-3 gap-6 md:gap-8">
      {tiles.map((tile) => (
        <div class="rounded-lg border border-border bg-bg-elevated p-7 md:p-8 hover:border-border-strong transition-colors">
          <h2 class="text-xl md:text-2xl font-bold text-text mb-3 leading-snug">
            {tile.outcome}
          </h2>
          <p class="text-text-muted leading-relaxed" set:html={tile.capability.replace(/`([^`]+)`/g, '<code class="font-mono text-accent bg-bg border border-border rounded px-1 py-0.5 text-sm">$1</code>')}></p>
        </div>
      ))}
    </div>
  </div>
</section>
