Pricing — two tiers side by side

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

const tiers = [
  { name: "Free", note: "For getting your first clients paid.", price: "$0", per: "forever", cta: "Start for free", href: "/signup",
    perks: ["10 invoices a month", "Card and bank payments", "Email reminders", "Quotes and estimates", "Mobile app", "Tallybook footer on invoices"] },
  { name: "Pro", note: "For businesses that bill every week.", price: "$15", per: "per month", cta: "Start 14-day trial", href: "/signup?plan=pro", badge: "2 months free yearly", featured: true,
    perks: ["Unlimited invoices", "Recurring billing", "Your own reminder schedule", "Late fees, added for you", "Your logo and colours", "Client portal", "Accounting sync", "Priority support"] },
];

export function PricingTwoTier() {
  return (
    <section aria-labelledby="pricing-two-title" className="bg-surface px-5 py-16 font-sans sm:px-10 sm:py-20">
      <div className="mx-auto max-w-6xl">
        <div className="flex flex-wrap items-end justify-between gap-x-8 gap-y-4">
          <div className="max-w-xl">
            <h2 id="pricing-two-title" className="text-balance text-3xl font-semibold tracking-tight text-fg sm:text-4xl">Two plans. No surprises.</h2>
            <p className="mt-4 text-base text-fg-muted sm:text-lg">Start on Free and move to Pro the month you need more. Your invoices and clients come with you.</p>
          </div>
          <a href="/pricing#compare" className="inline-flex items-center gap-1.5 text-sm font-medium text-primary hover:underline">
            Compare every feature <ArrowRight className="size-4" aria-hidden />
          </a>
        </div>

        <div className="mt-10 grid gap-4 md:grid-cols-2">
          {tiers.map((tier) => (
            <article
              key={tier.name}
              aria-label={tier.name + " plan"}
              className={cn(
                "flex flex-col gap-6 rounded-xl border border-border bg-bg p-7 lg:p-9",
                tier.featured && "border-primary/40 bg-gradient-to-b from-primary-soft to-bg",
              )}
            >
              <div className="flex flex-wrap items-end justify-between gap-4 border-b border-border pb-6">
                <div>
                  <div className="flex items-center gap-2">
                    <h3 className="text-base font-semibold text-fg">{tier.name}</h3>
                    {tier.badge && <span className="rounded-full bg-primary-soft px-2 py-0.5 text-xs font-medium text-primary-soft-fg">{tier.badge}</span>}
                  </div>
                  <p className="mt-1.5 text-[13px] text-fg-subtle">{tier.note}</p>
                </div>
                <p className="flex items-baseline gap-2">
                  <span className="text-5xl font-semibold tracking-tight tabular-nums text-fg">{tier.price}</span>
                  <span className="text-[13px] text-fg-subtle">{tier.per}</span>
                </p>
              </div>
              <ul className="grid gap-2.5 text-sm text-fg lg:grid-cols-2 lg:gap-x-5">
                {tier.perks.map((perk) => (
                  <li key={perk} className="flex items-start gap-2.5">
                    <Check className="mt-0.5 size-4 shrink-0 text-primary" aria-hidden />
                    {perk}
                  </li>
                ))}
              </ul>
              <a
                href={tier.href}
                className={cn(
                  "mt-auto inline-flex h-11 items-center justify-center rounded px-5 text-[15px] font-medium transition",
                  tier.featured ? "bg-primary text-primary-fg hover:bg-primary-hover" : "border border-border-strong bg-bg text-fg hover:bg-surface",
                )}
              >
                {tier.cta}
              </a>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}