import { Check, Sparkles } from "lucide-react";
import { Button, Card, Chip } from "@sisyphos-ui/react";

const TIERS = [
  {
    name: "Free",
    price: "$0",
    description: "For hobby projects and tinkering.",
    features: ["All 33 components", "MIT license", "Unlimited projects", "Community support"],
    cta: "Start building",
  },
  {
    name: "Team",
    price: "$29",
    unit: "/seat/mo",
    description: "Production apps with a real team.",
    features: ["Everything in Free", "Priority support · 24h SLA", "Theme designer (beta)", "Audit log & SSO"],
    cta: "Start 14-day trial",
    popular: true,
  },
  {
    name: "Enterprise",
    price: "Custom",
    description: "Compliance-grade rollouts at scale.",
    features: ["Everything in Team", "SOC 2 · HIPAA", "Dedicated SE", "Bring-your-own-cloud"],
    cta: "Talk to sales",
  },
];

export function Pricing() {
  return (
    <section className="bg-white px-6 py-24">
      <div className="mx-auto max-w-2xl text-center">
        <span className="text-xs font-semibold uppercase tracking-widest text-orange-600">
          Pricing
        </span>
        <h2 className="mt-5 text-balance text-4xl font-bold tracking-tight">
          Simple, predictable plans
        </h2>
        <p className="mt-5 text-zinc-600">
          No hidden seats. No vendor lock-in. Cancel any time.
        </p>
      </div>

      <ul className="mx-auto mt-20 grid max-w-5xl grid-cols-1 gap-4 md:grid-cols-3">
        {TIERS.map((tier) => (
          <li key={tier.name} className="relative">
            {tier.popular && (
              <div className="absolute -top-3 left-1/2 z-10 -translate-x-1/2">
                <Chip color="primary" size="sm" startIcon={<Sparkles className="size-3" />}>
                  Most popular
                </Chip>
              </div>
            )}
            <Card
              variant={tier.popular ? "elevated" : "outlined"}
              className={tier.popular ? "h-full ring-2 ring-orange-500" : "h-full"}
            >
              <Card.Body>
                <div className="flex flex-col gap-2">
                  <h3 className="text-lg font-bold tracking-tight">{tier.name}</h3>
                  <p className="text-sm text-zinc-500">{tier.description}</p>
                </div>

                <div className="mt-6 flex items-baseline gap-1">
                  <span className="text-5xl font-bold leading-none tracking-tight">{tier.price}</span>
                  {tier.unit && <span className="text-sm text-zinc-500">{tier.unit}</span>}
                </div>

                <ul className="mt-7 flex flex-col gap-3">
                  {tier.features.map((f) => (
                    <li key={f} className="flex items-center gap-2.5 text-sm">
                      <span className="inline-flex size-5 shrink-0 items-center justify-center rounded-full bg-orange-100 text-orange-600">
                        <Check className="size-3" strokeWidth={3} />
                      </span>
                      {f}
                    </li>
                  ))}
                </ul>

                <Button
                  fullWidth
                  variant={tier.popular ? "contained" : "outlined"}
                  className="mt-7"
                >
                  {tier.cta}
                </Button>
              </Card.Body>
            </Card>
          </li>
        ))}
      </ul>
    </section>
  );
}
Components used

Used in templates
