Pricing Tiers

import { Check } from "lucide-react";

const plans = [
  { name: "Basic", price: "$19", note: "or $199 yearly", features: ["Everything to start", "Up to 3 projects", "Community support"] },
  { name: "Business", price: "$29", note: "or $299 yearly", features: ["All of Basic", "Unlimited projects", "Priority support", "Team roles"] },
  { name: "Enterprise", price: "$49", note: "or $499 yearly", features: ["All of Business", "SSO + audit log", "Dedicated manager", "Custom SLAs", "Onboarding"] },
];

export function PricingTiers() {
  return (
    <section className="mx-auto max-w-6xl px-6 py-16 md:py-24">
      <div className="mb-14 max-w-lg">
        <p className="mb-3 text-sm font-semibold uppercase tracking-wider text-muted-foreground">Pricing</p>
        <h2 className="text-4xl font-bold tracking-tight">Simple plans that scale with you.</h2>
      </div>
      <div className="grid grid-cols-1 gap-8 lg:grid-cols-3">
        {plans.map((plan) => (
          <div key={plan.name} className="flex flex-col justify-between rounded-2xl border border-border bg-card p-8">
            <div>
              <div className="mb-8 text-center">
                <h3 className="mb-2 text-lg font-bold">{plan.name}</h3>
                <p className="text-5xl font-bold">{plan.price}<span className="text-2xl font-bold">/mo</span></p>
                <p className="mt-1 text-sm text-muted-foreground">{plan.note}</p>
              </div>
              <ul className="space-y-4">
                {plan.features.map((f) => (
                  <li key={f} className="flex gap-3">
                    <Check className="size-5 shrink-0" />
                    <span>{f}</span>
                  </li>
                ))}
              </ul>
            </div>
            <button className="mt-8 w-full rounded-full bg-foreground py-3 text-background">Get started</button>
          </div>
        ))}
      </div>
    </section>
  );
}