Pricing Compare

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

export interface PricingCompareProps {
  title?: string;
  plans?: { name: string; price: string }[];
  rows?: { label: string; values: (boolean | string)[] }[];
  featured?: number;
  className?: string;
}

const DEFAULT_ROWS = [
  { label: "Automatic footprint", values: [true, true, true] },
  { label: "Integrations", values: ["3", "Unlimited", "Unlimited"] },
  { label: "Reduction plan & targets", values: [false, true, true] },
  { label: "Supplier portal", values: [false, true, true] },
  { label: "CSRD / CDP reports", values: [false, true, true] },
  { label: "Entities", values: ["1", "1", "Unlimited"] },
  { label: "Climate advisor", values: [false, false, true] },
];

/** Soft comparison table: rounded card, plan names in serif with prices, zebra rows in warm tints, sage check circles and dashes, highlighted featured column. */
export function PricingCompare({
  title = "Compare plans",
  plans = [
    { name: "Seedling", price: "Free" },
    { name: "Grove", price: "€290/mo" },
    { name: "Forest", price: "Custom" },
  ],
  rows = DEFAULT_ROWS,
  featured = 1,
  className,
}: PricingCompareProps) {
  return (
    <section aria-labelledby="os-pc-title" className={cn("da-section bg-da-bg text-da-fg", className)}>
      <div className="da-container">
        <h2 id="os-pc-title" className="text-center font-da-display text-[clamp(2rem,4.5vw,3rem)] tracking-da-display">
          {title}
        </h2>
        <div
          className="relative mx-auto mt-10 max-w-4xl overflow-x-auto rounded-da-lg bg-da-surface text-da-surface-fg shadow-da-md"
          role="region"
          aria-label="Plan comparison (scrollable)"
          tabIndex={0}
        >
          <table className="w-full min-w-[560px] text-left">
            <caption className="sr-only">{title}</caption>
            <thead>
              <tr>
                <td className="p-5" />
                {plans.map((p, i) => (
                  <th key={p.name} scope="col" className={cn("p-5 text-center font-normal", i === featured && "bg-da-accent text-da-accent-fg")}>
                    <span className="block font-da-display text-2xl">{p.name}</span>
                    <span className="block text-sm opacity-80">{p.price}</span>
                  </th>
                ))}
              </tr>
            </thead>
            <tbody>
              {rows.map((r, ri) => (
                <tr key={r.label} className={cn(ri % 2 === 0 && "bg-da-surface-2/60")}>
                  <th scope="row" className="px-5 py-4 font-normal">
                    {r.label}
                  </th>
                  {r.values.map((v, i) => (
                    <td key={i} className={cn("px-5 py-4 text-center", i === featured && "bg-da-accent/50")}>
                      {v === true ? (
                        <span className="mx-auto grid size-6 place-items-center rounded-full bg-da-primary text-da-primary-fg">
                          <Check aria-label="Included" className="size-3.5" strokeWidth={3} />
                        </span>
                      ) : v === false ? (
                        <Minus aria-label="Not included" className="mx-auto size-4 text-da-muted-fg" />
                      ) : (
                        <span className="font-medium">{v}</span>
                      )}
                    </td>
                  ))}
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </section>
  );
}

export default PricingCompare;