Pricing Duo

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

export interface PricingDuoPlan {
  name: string;
  price: string;
  unit: string;
  description: string;
  cta: { label: string; href: string };
  featured?: boolean;
}

export interface PricingDuoProps {
  eyebrow?: string;
  title?: string;
  plans?: [PricingDuoPlan, PricingDuoPlan];
  /** [feature, in free plan, in paid plan] */
  features?: [string, boolean | string, boolean | string][];
  className?: string;
}

const GLASS = "da-stroke bg-da-surface backdrop-blur-da backdrop-saturate-150";

/** Two plans side by side in one glass panel with a shared feature list running down both columns; paid column glows. */
export function PricingDuo({
  eyebrow = "Pricing",
  title = "Free for you. Worth it for your team.",
  plans = [
    { name: "Personal", price: "$0", unit: "forever", description: "For your own calls.", cta: { label: "Get started", href: "#free" } },
    {
      name: "Team",
      price: "$12",
      unit: "per member / month",
      description: "For teams that meet a lot.",
      cta: { label: "Start 14-day trial", href: "#team" },
      featured: true,
    },
  ],
  features = [
    ["AI recaps", "10 / month", "Unlimited"],
    ["Transcription languages", "5", "30"],
    ["Async video updates", "5 min", "Unlimited"],
    ["Ask Halo search", false, true],
    ["Slack, Notion & Linear sync", false, true],
    ["Shared team workspace", false, true],
    ["Admin & SSO", false, "Add-on"],
  ],
  className,
}: PricingDuoProps) {
  const cell = (v: boolean | string) =>
    v === true ? (
      <Check aria-label="Included" className="size-4 text-da-success" />
    ) : v === false ? (
      <Minus aria-label="Not included" className="size-4 text-da-muted-fg" />
    ) : (
      <span className="text-sm font-medium">{v}</span>
    );

  return (
    <section aria-labelledby="glass-duo-title" className={cn("da-section text-da-fg", className)}>
      <div className="da-container">
        <div className="mx-auto max-w-2xl text-center">
          <p className="text-sm font-semibold text-da-primary">{eyebrow}</p>
          <h2
            id="glass-duo-title"
            className="mt-3 font-da-display text-[clamp(2rem,4.5vw,3.25rem)] leading-[1.08] font-semibold tracking-da-display text-balance"
          >
            {title}
          </h2>
        </div>
        <div className={cn("relative mx-auto mt-14 max-w-3xl overflow-hidden rounded-da-lg shadow-da-lg", GLASS)}>
          <div className="relative overflow-x-auto" tabIndex={0} role="region" aria-label="Plan comparison (scrollable)">
            <table className="w-full min-w-[560px] text-left">
              <caption className="sr-only">Plan comparison</caption>
              <thead>
                <tr>
                  <td className="w-2/5" />
                  {plans.map((p) => (
                    <th key={p.name} scope="col" className={cn("p-5 align-top font-normal sm:p-6", p.featured && "bg-da-primary/10")}>
                      <span className="flex items-center gap-2 font-da-display text-lg font-semibold">
                        {p.name}
                        {p.featured && (
                          <span className="rounded-da-pill bg-gradient-to-r from-da-primary to-da-accent px-2 py-0.5 text-[11px] text-da-primary-fg">
                            Popular
                          </span>
                        )}
                      </span>
                      <span className="mt-1 block text-sm text-da-muted-fg">{p.description}</span>
                      <span className="mt-4 block font-da-display text-4xl font-semibold tracking-da-display">{p.price}</span>
                      <span className="block text-xs text-da-muted-fg">{p.unit}</span>
                      <a
                        href={p.cta.href}
                        className={cn(
                          "da-focus da-transition mt-5 flex h-10 items-center justify-center rounded-da-pill text-sm font-semibold hover:-translate-y-0.5",
                          p.featured ? "bg-gradient-to-r from-da-primary to-da-accent text-da-primary-fg shadow-da-md" : "da-stroke bg-da-surface",
                        )}
                      >
                        {p.cta.label}
                      </a>
                    </th>
                  ))}
                </tr>
              </thead>
              <tbody>
                {features.map(([label, a, b]) => (
                  <tr key={label} className="border-t border-da-border">
                    <th scope="row" className="px-5 py-3 text-sm font-normal text-da-muted-fg sm:px-6 sm:py-3.5">
                      {label}
                    </th>
                    <td className={cn("px-5 py-3 sm:px-6", plans[0].featured && "bg-da-primary/10")}>{cell(a)}</td>
                    <td className={cn("px-5 py-3 sm:px-6", plans[1].featured && "bg-da-primary/10")}>{cell(b)}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </section>
  );
}

export default PricingDuo;