Pricing Fees

import { cn } from "@/lib/utils";

export interface PricingFeesProps {
  title?: string;
  description?: string;
  fees?: { method: string; rate: string; note: string }[];
  included?: string[];
  className?: string;
}

const DEFAULT_FEES = [
  { method: "Cards", rate: "2.4% + 20¢", note: "Visa, Mastercard, Amex" },
  { method: "ACH", rate: "0.8%", note: "Capped at $5 per payment" },
  { method: "SEPA Direct Debit", rate: "0.5%", note: "Capped at €4" },
  { method: "International wire", rate: "$15", note: "Flat, any amount" },
];

/** Pay-as-you-go fee sheet: big per-method rates in bordered cells (4-up), then a “no hidden fees” checklist band. */
export function PricingFees({
  title = "Only pay when you get paid",
  description = "No subscription on the Pay-as-you-go plan. Volume discounts apply automatically above $100k/month.",
  fees = DEFAULT_FEES,
  included = ["No setup or monthly fees", "Free invoicing & reminders", "Free reconciliation", "Instant payouts available"],
  className,
}: PricingFeesProps) {
  return (
    <section aria-labelledby="nc-fees-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="nc-fees-title" className="font-da-display text-[clamp(2rem,4.5vw,3rem)] leading-[1.1] font-extrabold tracking-da-display">
            {title}
          </h2>
          <p className="mt-4 text-lg text-da-muted-fg">{description}</p>
        </div>
        <dl className="da-stroke mt-12 grid gap-px overflow-hidden rounded-da-lg bg-da-border sm:grid-cols-2 lg:grid-cols-4">
          {fees.map((f) => (
            <div key={f.method} className="flex flex-col bg-da-surface p-7 text-da-surface-fg">
              <dt className="order-1 text-sm font-semibold text-da-muted-fg">{f.method}</dt>
              <dd className="order-2 mt-3 font-da-display text-3xl font-extrabold tracking-da-display">{f.rate}</dd>
              <dd className="order-3 mt-1 text-sm text-da-muted-fg">{f.note}</dd>
            </div>
          ))}
        </dl>
        <ul className="mt-6 flex flex-wrap justify-center gap-x-8 gap-y-3 rounded-da-lg bg-da-surface-2 px-6 py-5 text-[15px] font-medium">
          {included.map((i) => (
            <li key={i} className="flex items-center gap-2">
              <span aria-hidden className="size-2 rounded-full bg-da-success" />
              {i}
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}

export default PricingFees;