---
const steps = [
  {
    num: '01',
    title: 'Sign up in 30 seconds',
    description: 'Email and password. No credit card. No sales call. No "schedule a demo" button.',
  },
  {
    num: '02',
    title: 'Connect your stuff',
    description: 'AWS credentials, Terraform state, PagerDuty webhook, GitHub org — whatever the tool needs. 5-minute setup guides.',
  },
  {
    num: '03',
    title: 'See results immediately',
    description: 'First drift scan in under a minute. First cost baseline in an hour. First correlated incident the next time your pager fires.',
  },
];
---

<section class="py-20 px-6 border-t border-dd0c-border">
  <div class="max-w-4xl mx-auto">
    <div class="text-center mb-16">
      <h2 class="text-3xl sm:text-4xl font-bold">How it works</h2>
      <p class="mt-4 text-dd0c-muted text-lg">No enterprise onboarding. No professional services.</p>
    </div>

    <div class="space-y-12">
      {steps.map((step) => (
        <div class="flex gap-6 items-start">
          <div class="flex-shrink-0 w-12 h-12 rounded-lg bg-dd0c-primary/10 border border-dd0c-primary/20 flex items-center justify-center">
            <span class="font-mono text-sm font-bold text-dd0c-primary">{step.num}</span>
          </div>
          <div>
            <h3 class="text-xl font-semibold mb-2">{step.title}</h3>
            <p class="text-dd0c-muted leading-relaxed">{step.description}</p>
          </div>
        </div>
      ))}
    </div>
  </div>
</section>
