---
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: 'Ship integrations, then sleep.',
    capability:
      'Every route, every processor, every exchange — traced automatically. When something breaks at 3 AM, the answer is already waiting for you. So you do not have to be.',
  },
  {
    outcome: 'Debug in daylight.',
    capability:
      'Replay the exact exchange that failed. Follow a single request across services. See payloads before and after each processor. The pieces your ops team needs at 3 AM, captured already — so 3 AM stays quiet.',
  },
  {
    outcome: 'Keep what you built. Keep what you chose.',
    capability:
      'You picked Apache Camel on purpose — open, portable, yours. Cameleer runs and understands your Camel apps as they are. No code changes, no SDK, no rewrite, no lock-in.',
  },
];
---
<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, i) => (
        <div
          class="tile rounded-lg border border-border bg-bg-elevated p-7 md:p-8 transition-all duration-200 ease-out hover:-translate-y-0.5 hover:border-accent/40 hover:shadow-[0_12px_32px_-12px_rgba(240,180,41,0.18)]"
          style={`--tile-delay:${i * 110}ms`}
        >
          <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>

<style>
  @keyframes tile-rise {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .tile {
    opacity: 0;
    animation: tile-rise 520ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: var(--tile-delay, 0ms);
  }
  @media (prefers-reduced-motion: reduce) {
    .tile {
      opacity: 1;
      animation: none;
      transition: none;
    }
  }
</style>
