Pricing — 3 Tier

"use client";

import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";

const PLANS = [
  {
    name: "Free",
    price: "$0",
    suffix: "/forever",
    description: "Get started, no credit card required.",
    features: [
      "Up to 3 projects",
      "Basic components",
      "Community support",
      "MIT license",
    ],
    cta: "Get Started",
    variant: "outline" as const,
    highlight: false,
  },
  {
    name: "Pro",
    price: "$29",
    suffix: "/month",
    description: "For growing teams and serious projects.",
    features: [
      "Unlimited projects",
      "All premium blocks",
      "Priority support",
      "Figma design files",
      "Email support",
    ],
    cta: "Subscribe",
    variant: "default" as const,
    highlight: true,
  },
  {
    name: "Enterprise",
    price: "Custom",
    suffix: "",
    description: "For large organizations with custom needs.",
    features: [
      "Everything in Pro",
      "Dedicated support",
      "SLA + uptime guarantee",
      "Custom themes",
      "On-premise option",
    ],
    cta: "Contact Sales",
    variant: "outline" as const,
    highlight: false,
  },
];

export function PricingThreeTierBlock() {
  return (
    <section className="mx-auto max-w-5xl px-6 py-16">
      <div className="text-center mb-12">
        <p className="text-sm font-medium text-muted-foreground mb-2">Pricing</p>
        <h2 className="text-3xl sm:text-4xl font-bold tracking-tight mb-3">
          Simple, fair pricing.
        </h2>
        <p className="text-muted-foreground max-w-xl mx-auto">
          Start free. Upgrade when you&apos;re ready.
        </p>
      </div>

      <div className="grid gap-6 md:grid-cols-3">
        {PLANS.map((p) => (
          <Card
            key={p.name}
            className={p.highlight ? "border-primary shadow-md relative" : ""}
          >
            {p.highlight && (
              <div className="absolute -top-3 left-1/2 -translate-x-1/2">
                <Badge>Recommended</Badge>
              </div>
            )}
            <CardHeader>
              <CardTitle>{p.name}</CardTitle>
              <CardDescription>{p.description}</CardDescription>
              <div className="mt-3 flex items-baseline gap-1">
                <span className="text-3xl font-bold">{p.price}</span>
                {p.suffix && (
                  <span className="text-sm text-muted-foreground">{p.suffix}</span>
                )}
              </div>
            </CardHeader>
            <CardContent>
              <ul className="space-y-2 text-sm text-muted-foreground mb-6">
                {p.features.map((f) => (
                  <li key={f} className="flex items-start gap-2">
                    <span className="text-primary mt-0.5 shrink-0">✓</span>
                    <span>{f}</span>
                  </li>
                ))}
              </ul>
              <Button className="w-full" variant={p.variant}>
                {p.cta}
              </Button>
            </CardContent>
          </Card>
        ))}
      </div>
    </section>
  );
}