Pricing Duo

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

export interface PricingDuoProps {
  title?: string;
  description?: string;
  free?: { name: string; price: string; note: string; features: string[]; cta: { label: string; href: string } };
  pro?: { name: string; price: string; note: string; features: string[]; cta: { label: string; href: string } };
  className?: string;
}

/** Two big side-by-side plans: a mint “Free” block and a periwinkle “Pro” block with white text, each with a tick list and pill CTA. */
export function PricingDuo({
  title = "Free forever. Pro when you’re ready.",
  description = "No trials to forget about. Upgrade the day your team needs more.",
  free = {
    name: "Free",
    price: "$0",
    note: "for up to 5 people",
    features: ["3 boards", "Weekly view", "Reminders", "iOS & Android apps"],
    cta: { label: "Start free", href: "#free" },
  },
  pro = {
    name: "Pro",
    price: "$6",
    note: "per member / month, billed yearly",
    features: ["Unlimited boards", "Recurring tasks", "Guests & clients", "Workload view", "Priority support"],
    cta: { label: "Go Pro", href: "#pro" },
  },
  className,
}: PricingDuoProps) {
  return (
    <section aria-labelledby="sf-duo-title" className={cn("da-section bg-da-bg text-da-fg", className)}>
      <div className="da-container">
        <div className="mx-auto max-w-2xl text-center">
          <h2 id="sf-duo-title" className="font-da-display text-[clamp(2rem,4.5vw,3.25rem)] leading-[1.08] font-extrabold tracking-da-display text-balance">
            {title}
          </h2>
          <p className="mt-4 text-lg text-da-muted-fg">{description}</p>
        </div>
        <div className="mx-auto mt-12 grid max-w-4xl gap-5 md:grid-cols-2">
          {[
            { plan: free, cls: "bg-da-secondary text-da-secondary-fg", btn: "bg-da-surface text-da-fg" },
            { plan: pro, cls: "bg-da-primary text-da-primary-fg", btn: "bg-da-primary-fg text-da-primary" },
          ].map(({ plan, cls, btn }) => (
            <div key={plan.name} className={cn("flex flex-col rounded-[32px] p-8 sm:p-10", cls)}>
              <h3 className="font-da-display text-2xl font-extrabold">{plan.name}</h3>
              <p className="mt-4 font-da-display text-6xl font-extrabold tracking-da-display">{plan.price}</p>
              <p className="mt-1 text-sm opacity-85">{plan.note}</p>
              <ul className="mt-8 flex-1 space-y-3">
                {plan.features.map((f) => (
                  <li key={f} className="flex items-center gap-3">
                    <span aria-hidden className="grid size-6 shrink-0 place-items-center rounded-full bg-current/15">
                      <Check className="size-3.5" strokeWidth={3} />
                    </span>
                    {f}
                  </li>
                ))}
              </ul>
              <a
                href={plan.cta.href}
                className={cn(
                  "da-focus da-transition mt-10 inline-flex h-13 items-center justify-center rounded-da-pill font-semibold shadow-da-sm hover:-translate-y-0.5",
                  btn,
                )}
              >
                {plan.cta.label}
              </a>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

export default PricingDuo;