Pricing Tiers

"use client";

import { useId, useState } from "react";
import { Check } from "lucide-react";
import { cn } from "@/lib/utils";

export interface PricingTiersPlan {
  name: string;
  description: string;
  /** Monthly price in the display currency; `null` renders "Custom". */
  monthly: number | null;
  /** Price per month when billed yearly. */
  yearly: number | null;
  features: string[];
  cta: { label: string; href: string };
  highlighted?: boolean;
  badge?: string;
}

export interface PricingTiersProps {
  kicker?: string;
  title?: string;
  description?: string;
  plans?: PricingTiersPlan[];
  currency?: string;
  yearlyDiscountLabel?: string;
  defaultBilling?: "monthly" | "yearly";
  className?: string;
}

const DEFAULT_PLANS: PricingTiersPlan[] = [
  {
    name: "Hobby",
    description: "For side projects and open source.",
    monthly: 0,
    yearly: 0,
    features: ["1 project", "Hosted changelog page", "GitHub integration", "Community support"],
    cta: { label: "Start for free", href: "#signup" },
  },
  {
    name: "Team",
    description: "For product teams shipping every week.",
    monthly: 49,
    yearly: 39,
    features: ["10 projects", "AI release summaries", "In-app widget & email digests", "Custom domain", "Slack & Linear integrations"],
    cta: { label: "Try Team free for 14 days", href: "#signup-team" },
    highlighted: true,
    badge: "Most popular",
  },
  {
    name: "Scale",
    description: "For companies with many products and locales.",
    monthly: null,
    yearly: null,
    features: ["Unlimited projects", "SSO & SCIM", "24 languages", "Audit log", "Dedicated success manager"],
    cta: { label: "Talk to sales", href: "#sales" },
  },
];

export function PricingTiers({
  kicker = "[ 04 ] Pricing",
  title = "Pay for projects, not seats.",
  description = "Invite your whole team. Every plan includes unlimited readers and unlimited releases.",
  plans = DEFAULT_PLANS,
  currency = "$",
  yearlyDiscountLabel = "−20%",
  defaultBilling = "yearly",
  className,
}: PricingTiersProps) {
  const [billing, setBilling] = useState<"monthly" | "yearly">(defaultBilling);
  const titleId = useId();

  return (
    <section className={cn("da-section da-stroke-b bg-da-bg text-da-fg", className)} aria-labelledby={titleId}>
      <div className="da-container">
        <div className="flex flex-col items-start gap-6 md:flex-row md:items-end md:justify-between">
          <div className="max-w-2xl">
            <p className="font-da-mono text-xs font-bold tracking-da-label text-da-muted-fg uppercase">{kicker}</p>
            <h2 id={titleId} className="mt-3 font-da-display text-[clamp(2rem,5vw,3.5rem)] leading-[0.95] tracking-da-display uppercase">
              {title}
            </h2>
            <p className="mt-4 text-lg text-da-muted-fg">{description}</p>
          </div>

          <div role="group" aria-label="Billing period" className="da-stroke flex bg-da-surface p-1 text-da-surface-fg">
            {(["monthly", "yearly"] as const).map((b) => (
              <button
                key={b}
                type="button"
                aria-pressed={billing === b}
                onClick={() => setBilling(b)}
                className={cn(
                  "da-focus da-transition px-4 py-2 font-da-mono text-xs font-bold tracking-da-label uppercase",
                  billing === b ? "bg-da-fg text-da-bg" : "hover:bg-da-muted",
                )}
              >
                {b}
                {b === "yearly" && (
                  <span className={cn("ml-2 px-1", billing === b ? "bg-da-primary text-da-primary-fg" : "bg-da-success text-da-success-fg")}>
                    {yearlyDiscountLabel}
                  </span>
                )}
              </button>
            ))}
          </div>
        </div>

        <ul className="mt-12 grid gap-6 lg:grid-cols-3 lg:gap-0">
          {plans.map((plan, i) => {
            const price = billing === "monthly" ? plan.monthly : plan.yearly;
            return (
              <li
                key={plan.name}
                className={cn(
                  "da-stroke relative flex flex-col p-6 sm:p-8",
                  plan.highlighted
                    ? "z-10 bg-da-primary text-da-primary-fg shadow-da-lg lg:-my-4 lg:py-12"
                    : "bg-da-surface text-da-surface-fg",
                  !plan.highlighted && i > 0 && "lg:border-l-0",
                  !plan.highlighted && i < plans.length - 1 && plans[i + 1]?.highlighted && "lg:border-r-0",
                )}
              >
                {plan.badge && (
                  <p className="da-stroke absolute -top-4 left-6 -rotate-2 bg-da-accent px-2 py-1 font-da-mono text-[11px] font-bold tracking-da-label text-da-accent-fg uppercase">
                    {plan.badge}
                  </p>
                )}
                <h3 className="font-da-display text-2xl tracking-da-display uppercase">{plan.name}</h3>
                <p className={cn("mt-2 min-h-[2lh] text-sm", plan.highlighted ? "opacity-80" : "text-da-muted-fg")}>{plan.description}</p>
                <p className="mt-6 flex h-16 items-end gap-2">
                  {price === null ? (
                    <span className="font-da-display text-5xl tracking-da-display">Custom</span>
                  ) : (
                    <>
                      <span className="font-da-display text-6xl leading-none tracking-da-display">
                        {currency}
                        {price}
                      </span>
                      <span className="pb-1 font-da-mono text-xs font-bold tracking-da-label uppercase">
                        / mo{price > 0 && billing === "yearly" ? ", billed yearly" : ""}
                      </span>
                    </>
                  )}
                </p>
                <a
                  href={plan.cta.href}
                  className={cn(
                    "da-focus da-transition da-stroke mt-8 block px-5 py-3 text-center font-bold shadow-da-sm hover:translate-x-[3px] hover:translate-y-[3px] hover:shadow-none",
                    plan.highlighted ? "bg-da-fg text-da-bg" : "bg-da-primary text-da-primary-fg",
                  )}
                >
                  {plan.cta.label}
                </a>
                <ul className={cn("mt-8 space-y-3 pt-6", plan.highlighted ? "border-t-[length:var(--da-border-width)] border-current" : "da-stroke-t")}>
                  {plan.features.map((f) => (
                    <li key={f} className="flex gap-3 text-sm font-medium">
                      <Check aria-hidden className="mt-0.5 size-4 shrink-0" strokeWidth={3} />
                      {f}
                    </li>
                  ))}
                </ul>
              </li>
            );
          })}
        </ul>
      </div>
    </section>
  );
}

export default PricingTiers;