---
const plans = [
  {
    name: "Starter",
    price: "0",
    period: "für immer",
    description: "Für Freelancer und Kleinunternehmer",
    features: [
      "5 Unternehmen überwachen",
      "Tägliche Prüfung",
      "E-Mail Benachrichtigungen",
      "Basis-Support",
    ],
    cta: "Kostenlos starten",
    popular: false,
  },
  {
    name: "Professional",
    price: "29",
    period: "pro Monat",
    description: "Für wachsende Unternehmen",
    features: [
      "50 Unternehmen überwachen",
      "Tägliche Prüfung",
      "E-Mail + WhatsApp Alerts",
      "CSV/Excel Import",
      "API-Zugang",
      "Prioritäts-Support",
    ],
    cta: "14 Tage kostenlos testen",
    popular: true,
  },
  {
    name: "Business",
    price: "69",
    period: "pro Monat",
    description: "Für mittlere Unternehmen",
    features: [
      "250 Unternehmen überwachen",
      "Echtzeit-Prüfung",
      "Alle Benachrichtigungskanäle",
      "Team-Zugänge (5 Nutzer)",
      "Erweiterte API",
      "Dedizierter Support",
    ],
    cta: "14 Tage kostenlos testen",
    popular: false,
  },
  {
    name: "Enterprise",
    price: "149",
    period: "pro Monat",
    description: "Für Großunternehmen",
    features: [
      "Unbegrenzt überwachen",
      "Echtzeit-Prüfung",
      "Alle Kanäle + Webhook",
      "Unbegrenzte Team-Zugänge",
      "White-Label Option",
      "SLA & Account Manager",
    ],
    cta: "Kontakt aufnehmen",
    popular: false,
  },
];
---

<section id="preise" class="section bg-gray-50">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="text-center mb-16">
      <h2 class="text-3xl md:text-4xl font-bold text-navy mb-4">
        Transparente Preise, ohne versteckte Kosten
      </h2>
      <p class="text-xl text-gray-600 max-w-2xl mx-auto">
        Starten Sie kostenlos. Upgraden Sie, wenn Sie wachsen.
      </p>
    </div>
    
    <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
      {plans.map(plan => (
        <div class={`bg-white rounded-2xl p-6 shadow-sm hover:shadow-xl transition-shadow relative ${plan.popular ? 'ring-2 ring-signal' : ''}`}>
          {plan.popular && (
            <div class="absolute -top-3 left-1/2 -translate-x-1/2 bg-signal text-white text-xs font-bold px-3 py-1 rounded-full">
              BELIEBT
            </div>
          )}
          
          <h3 class="text-xl font-bold text-navy mb-2">{plan.name}</h3>
          <p class="text-gray-500 text-sm mb-4">{plan.description}</p>
          
          <div class="mb-6">
            <span class="text-4xl font-bold text-navy">€{plan.price}</span>
            <span class="text-gray-500 text-sm">/{plan.period}</span>
          </div>
          
          <ul class="space-y-3 mb-6">
            {plan.features.map(feature => (
              <li class="flex items-start gap-2 text-sm">
                <svg class="w-5 h-5 text-green-500 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                  <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/>
                </svg>
                <span>{feature}</span>
              </li>
            ))}
          </ul>
          
          <a 
            href="#waitlist" 
            class={`btn w-full justify-center ${plan.popular ? 'btn-primary' : 'btn-outline'}`}
          >
            {plan.cta}
          </a>
        </div>
      ))}
    </div>
  </div>
</section>