import type { Metadata } from "next";
import Link from "next/link";
import { Check } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Card, CardContent } from "@/components/ui/card";
import { PLAN_ORDER, PLANS } from "@/lib/billing/plans";
import { formatPrice } from "@/lib/utils";

export const metadata: Metadata = {
  title: "Pricing",
  description: "Simple plans for every podcaster — start free and upgrade as you grow.",
};

export default function PricingPage() {
  return (
    <div className="bg-hero-wash">
      <div className="container py-24 md:py-28">
        <div className="mx-auto max-w-2xl text-center">
          <p className="text-[13px] font-semibold uppercase tracking-[0.04em] text-brand">Pricing</p>
          <h1 className="mt-3 font-display text-5xl font-extrabold tracking-tight md:text-6xl">
            Start free, scale anytime
          </h1>
          <p className="mt-4 text-lg text-muted-foreground">
            Upgrade for higher limits and more features. Cancel anytime. Pay with Stripe
            or PayPal.
          </p>
        </div>

        <div className="mt-16 grid gap-6 lg:grid-cols-4">
          {PLAN_ORDER.map((key) => {
            const plan = PLANS[key];
            return (
              <Card
                key={key}
                className={plan.highlight ? "relative ring-2 ring-brand shadow-lg" : "relative"}
              >
                {plan.highlight && (
                  <Badge className="absolute -top-3 left-1/2 -translate-x-1/2 bg-brand text-brand-foreground shadow-sm">
                    Most popular
                  </Badge>
                )}
                <CardContent className="flex h-full flex-col gap-6 p-7">
                  <div>
                    <h3 className="font-display text-lg font-bold tracking-tight">{plan.name}</h3>
                    <p className="mt-1 text-sm text-muted-foreground">{plan.tagline}</p>
                  </div>
                  <div className="flex items-baseline gap-1">
                    <span className="font-display text-5xl font-extrabold tracking-tight">{formatPrice(plan.priceMonthly)}</span>
                    <span className="text-sm text-muted-foreground">/mo</span>
                  </div>
                  <Button asChild className="w-full" variant={plan.highlight ? "default" : "outline"}>
                    <Link href="/sign-up">{key === "free" ? "Start free" : `Choose ${plan.name}`}</Link>
                  </Button>
                  <ul className="space-y-2.5 text-sm">
                    {plan.bullets.map((b) => (
                      <li key={b} className="flex gap-2.5">
                        <Check className="mt-0.5 h-4 w-4 shrink-0 text-brand" />
                        <span className="text-muted-foreground">{b}</span>
                      </li>
                    ))}
                  </ul>
                </CardContent>
              </Card>
            );
          })}
        </div>

        <p className="mx-auto mt-12 max-w-2xl text-center text-xs text-muted-foreground">
          Prices in USD. Annual billing saves roughly two months. Usage limits reset on the first of
          each month.
        </p>
      </div>
    </div>
  );
}