cameleer-website/src/components/sections/HowItWorks.astro

---
interface Step {
  n: string;
  title: string;
  body: string;
  code?: string;
}

const steps: Step[] = [
  {
    n: '01',
    title: 'Point us at your Camel app',
    body: 'Drop it in, or connect one you already run. No code changes.',
  },
  {
    n: '02',
    title: 'We take it from there',
    body: 'Every route, every processor, every exchange — discovered and traced automatically. Sensitive fields are masked by default.',
  },
  {
    n: '03',
    title: 'Watch it run',
    body: 'Browse executions, tap live traffic, replay failed exchanges, follow flows across services.',
  },
];
---
<section class="border-b border-border">
  <div class="max-w-content mx-auto px-6 py-20 md:py-24">
    <div class="max-w-2xl mb-16">
      <p class="text-cyan font-mono text-xs tracking-[0.25em] uppercase mb-4">For engineers</p>
      <h2 class="text-hero font-bold text-text mb-4">How it works</h2>
      <p class="text-text-muted text-lg">Three steps. Nothing to maintain.</p>
    </div>
    <ol class="grid md:grid-cols-3 gap-6 md:gap-8">
      {steps.map((step) => (
        <li class="relative rounded-lg border border-border bg-bg-elevated p-7 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)]">
          <div class="font-mono text-accent text-sm tracking-wider mb-3">{step.n}</div>
          <h3 class="text-lg font-bold text-text mb-3">{step.title}</h3>
          <p class="text-text-muted leading-relaxed mb-4">{step.body}</p>
          {step.code && (
            <pre class="font-mono text-xs md:text-sm bg-bg border border-border rounded px-4 py-3 text-text-muted overflow-x-auto leading-relaxed"><code>{step.code}</code></pre>
          )}
        </li>
      ))}
    </ol>
  </div>
</section>