Pricing Comparison

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

export interface PricingComparisonPlan {
  name: string;
  price: string;
  cta: { label: string; href: string };
  highlighted?: boolean;
}

export interface PricingComparisonGroup {
  title: string;
  rows: { feature: string; values: (boolean | string)[] }[];
}

export interface PricingComparisonProps {
  kicker?: string;
  title?: string;
  plans?: PricingComparisonPlan[];
  groups?: PricingComparisonGroup[];
  className?: string;
}

export function PricingComparison({
  kicker = "[ 05 ] Compare plans",
  title = "Every feature, no fine print.",
  plans = [
    { name: "Hobby", price: "$0", cta: { label: "Start", href: "#hobby" } },
    { name: "Team", price: "$49/mo", cta: { label: "Try free", href: "#team" }, highlighted: true },
    { name: "Scale", price: "Custom", cta: { label: "Talk to us", href: "#scale" } },
  ],
  groups = [
    {
      title: "Publishing",
      rows: [
        { feature: "Projects", values: ["1", "10", "Unlimited"] },
        { feature: "Hosted changelog", values: [true, true, true] },
        { feature: "Custom domain", values: [false, true, true] },
        { feature: "In-app widget", values: [false, true, true] },
      ],
    },
    {
      title: "Automation",
      rows: [
        { feature: "AI release summaries", values: [false, true, true] },
        { feature: "Email & Slack digests", values: ["Weekly", "Per release", "Per release"] },
        { feature: "Translations", values: [false, "5 languages", "24 languages"] },
      ],
    },
    {
      title: "Security",
      rows: [
        { feature: "SSO & SCIM", values: [false, false, true] },
        { feature: "Audit log", values: [false, "30 days", "1 year"] },
      ],
    },
  ],
  className,
}: PricingComparisonProps) {
  const cellTone = (i: number) => (plans[i]?.highlighted ? "bg-da-primary/25" : undefined);

  return (
    <section className={cn("da-section da-stroke-b bg-da-bg text-da-fg", className)} aria-labelledby="pricing-comparison-title">
      <div className="da-container">
        <p className="font-da-mono text-xs font-bold tracking-da-label text-da-muted-fg uppercase">{kicker}</p>
        <h2 id="pricing-comparison-title" className="mt-3 font-da-display text-[clamp(2rem,5vw,3.5rem)] leading-[0.95] tracking-da-display uppercase">
          {title}
        </h2>

        <div className="da-stroke mt-10 overflow-x-auto bg-da-surface text-da-surface-fg shadow-da-lg">
          <table className="w-full min-w-[640px] border-collapse text-left">
            <caption className="sr-only">Plan comparison</caption>
            <thead>
              <tr className="da-stroke-b">
                <th scope="col" className="w-1/3 p-5 align-bottom font-da-mono text-xs font-bold tracking-da-label uppercase">
                  Feature
                </th>
                {plans.map((p) => (
                  <th key={p.name} scope="col" className={cn("da-stroke-l p-5 align-bottom", p.highlighted && "bg-da-primary text-da-primary-fg")}>
                    <span className="block font-da-display text-2xl tracking-da-display uppercase">{p.name}</span>
                    <span className="block font-da-mono text-sm font-bold">{p.price}</span>
                    <a
                      href={p.cta.href}
                      className={cn(
                        "da-focus da-stroke mt-3 inline-block px-3 py-1.5 text-sm font-bold shadow-da-sm hover:translate-x-[3px] hover:translate-y-[3px] hover:shadow-none",
                        p.highlighted ? "bg-da-fg text-da-bg" : "bg-da-primary text-da-primary-fg",
                      )}
                    >
                      {p.cta.label}
                    </a>
                  </th>
                ))}
              </tr>
            </thead>
            {groups.map((g) => (
              <tbody key={g.title}>
                <tr className="da-stroke-b bg-da-fg text-da-bg">
                  <th scope="colgroup" colSpan={plans.length + 1} className="px-5 py-2 font-da-mono text-xs font-bold tracking-da-label uppercase">
                    {g.title}
                  </th>
                </tr>
                {g.rows.map((r) => (
                  <tr key={r.feature} className="da-stroke-b last:border-b-0">
                    <th scope="row" className="p-4 pl-5 font-bold">
                      {r.feature}
                    </th>
                    {r.values.map((v, i) => (
                      <td key={i} className={cn("da-stroke-l p-4 text-center font-da-mono text-sm font-bold", cellTone(i))}>
                        {v === true ? (
                          <>
                            <Check aria-hidden className="mx-auto size-5" strokeWidth={3.5} />
                            <span className="sr-only">Included</span>
                          </>
                        ) : v === false ? (
                          <>
                            <Minus aria-hidden className="mx-auto size-5 opacity-40" strokeWidth={3} />
                            <span className="sr-only">Not included</span>
                          </>
                        ) : (
                          v
                        )}
                      </td>
                    ))}
                  </tr>
                ))}
              </tbody>
            ))}
          </table>
        </div>
      </div>
    </section>
  );
}

export default PricingComparison;