---
const plans = [
  {
    name: 'Free',
    price: '$0',
    period: 'forever',
    description: 'Try any tool with generous limits.',
    features: [
      'All 6 tools included',
      '1 connected account per tool',
      '10K events/month (alert)',
      '50 services (portal)',
      '7-day data retention',
      'Community support',
    ],
    cta: 'Start free',
    ctaLink: '#waitlist',
    highlight: false,
  },
  {
    name: 'Pro',
    price: 'From $19',
    period: '/mo per tool',
    description: 'Pay only for what you use. Mix and match.',
    features: [
      'Unlimited connected accounts',
      'Unlimited events',
      'Unlimited services',
      '90-day data retention',
      'Slack + email notifications',
      'API access + webhooks',
      'Priority support',
    ],
    cta: 'Start free, upgrade later',
    ctaLink: '#waitlist',
    highlight: true,
  },
  {
    name: 'Self-hosted',
    price: '$0',
    period: 'your infra',
    description: 'Run the whole stack on your own servers.',
    features: [
      'Docker Compose one-liner',
      'All 6 tools included',
      'Unlimited everything',
      'Your data stays on your network',
      'Auto-TLS via Caddy',
      'Community support',
    ],
    cta: 'View setup guide',
    ctaLink: 'https://docs.dd0c.dev/self-hosted',
    highlight: false,
  },
];
---

<section id="pricing" class="py-20 px-6 border-t border-dd0c-border">
  <div class="max-w-6xl mx-auto">
    <div class="text-center mb-16">
      <h2 class="text-3xl sm:text-4xl font-bold">Simple pricing</h2>
      <p class="mt-4 text-dd0c-muted text-lg">Free tier is real. No "contact sales" trap.</p>
    </div>

    <div class="grid md:grid-cols-3 gap-6">
      {plans.map((plan) => (
        <div class={`rounded-xl border p-8 ${plan.highlight ? 'border-dd0c-primary bg-dd0c-primary/5' : 'border-dd0c-border bg-dd0c-surface'}`}>
          <h3 class="text-xl font-bold">{plan.name}</h3>
          <div class="mt-4 flex items-baseline gap-1">
            <span class="text-3xl font-bold">{plan.price}</span>
            <span class="text-dd0c-muted text-sm">{plan.period}</span>
          </div>
          <p class="mt-2 text-dd0c-muted text-sm">{plan.description}</p>

          <ul class="mt-6 space-y-3">
            {plan.features.map((f) => (
              <li class="flex items-start gap-2 text-sm">
                <span class="text-emerald-400 mt-0.5">✓</span>
                <span class="text-dd0c-muted">{f}</span>
              </li>
            ))}
          </ul>

          <a href={plan.ctaLink} class={`mt-8 block text-center py-3 rounded-lg font-medium text-sm transition ${plan.highlight ? 'bg-dd0c-primary hover:bg-dd0c-primary-light text-white' : 'border border-dd0c-border hover:border-dd0c-muted text-dd0c-muted hover:text-dd0c-text'}`}>
            {plan.cta}
          </a>
        </div>
      ))}
    </div>
  </div>
</section>
