Pricing Columns

import { cn } from "@/lib/utils";

export interface PricingColumnsPlan {
  name: string;
  price: string;
  note: string;
  features: string[];
  cta: { label: string; href: string };
  featured?: boolean;
}

export interface PricingColumnsProps {
  label?: string;
  title?: string;
  plans?: PricingColumnsPlan[];
  className?: string;
}

const DEFAULT_PLANS: PricingColumnsPlan[] = [
  {
    name: "Personal",
    price: "€0",
    note: "Forever, with a frame.studio address",
    features: ["1 site", "10 projects", "All templates", "Frame badge"],
    cta: { label: "Start free", href: "#personal" },
  },
  {
    name: "Studio",
    price: "€16",
    note: "Per month, billed yearly",
    features: ["3 sites", "Unlimited projects", "Custom domain", "Custom fonts", "Password pages"],
    cta: { label: "Start 14-day trial", href: "#studio" },
    featured: true,
  },
  {
    name: "Agency",
    price: "€48",
    note: "Per month, billed yearly",
    features: ["Unlimited sites", "Client handoff", "Team seats (5)", "Priority support"],
    cta: { label: "Start 14-day trial", href: "#agency" },
  },
];

/** Three plan columns separated by hairlines (no cards): mono plan name, huge price, note, ruled feature list and a button; the featured plan has an ink button and a signal dot. */
export function PricingColumns({ label = "(05) Pricing", title = "Simple, honest pricing.", plans = DEFAULT_PLANS, className }: PricingColumnsProps) {
  return (
    <section aria-labelledby="mc-pc-title" className={cn("da-section bg-da-bg text-da-fg", className)}>
      <div className="da-container">
        <p className="font-da-mono text-xs tracking-da-label text-da-muted-fg uppercase">{label}</p>
        <h2 id="mc-pc-title" className="mt-4 font-da-display text-[clamp(2rem,4.5vw,3.5rem)] leading-none font-medium tracking-da-display">
          {title}
        </h2>
        <ul className="mt-14 grid border-t border-da-border-strong md:grid-cols-3">
          {plans.map((p) => (
            <li key={p.name} className="flex flex-col border-b border-da-border py-8 md:border-b-0 md:border-l md:px-8 md:first:border-l-0 md:first:pl-0">
              <h3 className="flex items-center gap-2 font-da-mono text-xs tracking-da-label uppercase">
                {p.featured && <span aria-hidden className="size-1.5 rounded-full bg-da-accent" />}
                {p.name}
                {p.featured && <span className="text-da-muted-fg">— Popular</span>}
              </h3>
              <p className="mt-6 font-da-display text-6xl font-medium tracking-da-display">{p.price}</p>
              <p className="mt-2 text-sm text-da-muted-fg">{p.note}</p>
              <ul className="mt-8 flex-1 border-t border-da-border">
                {p.features.map((f) => (
                  <li key={f} className="border-b border-da-border py-2.5 text-[15px]">
                    {f}
                  </li>
                ))}
              </ul>
              <a
                href={p.cta.href}
                className={cn(
                  "da-focus da-transition mt-8 inline-flex h-11 items-center justify-center rounded-da-sm font-medium",
                  p.featured ? "bg-da-primary text-da-primary-fg hover:opacity-85" : "border border-da-border-strong hover:bg-da-fg hover:text-da-bg",
                )}
              >
                {p.cta.label}
              </a>
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}

export default PricingColumns;