import { Badge } from "@/registry/ui/badge"
import { Button } from "@/registry/ui/button"
import {
  Card,
  CardContent,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/registry/ui/card"

const plans = [
  {
    name: "Hobby",
    price: "$0",
    note: "for personal projects",
    features: ["1 project", "10k requests / month", "Community support"],
    featured: false,
  },
  {
    name: "Team",
    price: "$24",
    note: "per user / month",
    features: ["Unlimited projects", "5M requests / month", "Email support", "Audit log"],
    featured: true,
  },
  {
    name: "Enterprise",
    price: "Custom",
    note: "billed annually",
    features: ["Everything in Team", "SSO and SCIM", "99.9% uptime SLA", "Dedicated support"],
    featured: false,
  },
]

export default function Pricing() {
  return (
    <section className="px-6 py-20">
      <div className="text-center">
        <h2 className="text-3xl font-semibold tracking-tight">
          Pricing that stays out of the way
        </h2>
        <p className="mx-auto mt-3 max-w-md text-sm leading-relaxed text-muted">
          Start free. Move up when your traffic does, not before.
        </p>
      </div>

      <div className="mx-auto mt-12 grid max-w-4xl gap-4 md:grid-cols-3">
        {plans.map((plan) => (
          <Card
            key={plan.name}
            className={`flex flex-col ${plan.featured ? "border-accent" : ""}`}
          >
            <CardHeader>
              <CardTitle className="flex items-center justify-between">
                {plan.name}
                {plan.featured ? <Badge variant="accent">Popular</Badge> : null}
              </CardTitle>
              <p className="mt-2 text-2xl font-semibold text-fg">{plan.price}</p>
              <p className="text-xs text-muted">{plan.note}</p>
            </CardHeader>

            <CardContent className="flex-1">
              <ul className="space-y-2">
                {plan.features.map((feature) => (
                  <li key={feature}>{feature}</li>
                ))}
              </ul>
            </CardContent>

            <CardFooter>
              <Button
                className="w-full"
                variant={plan.featured ? "default" : "outline"}
              >
                {plan.price === "Custom" ? "Contact sales" : "Start building"}
              </Button>
            </CardFooter>
          </Card>
        ))}
      </div>
    </section>
  )
}