Features Versus

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

export interface FeaturesVersusProps {
  eyebrow?: string;
  title?: string;
  before?: { title: string; items: string[] };
  after?: { title: string; items: string[] };
  className?: string;
}

/** Before/after comparison: a muted “spreadsheets and email” column with red crosses next to a blue-bordered “with Ledgerly” column with green checks. */
export function FeaturesVersus({
  eyebrow = "Why switch",
  title = "Stop running receivables from spreadsheets",
  before = {
    title: "Spreadsheets & email",
    items: [
      "Invoices built by hand in Word",
      "Chasing payments from personal inboxes",
      "Matching bank lines line by line",
      "Close takes 12+ days",
      "No audit trail",
    ],
  },
  after = {
    title: "With Ledgerly",
    items: [
      "Invoices generated from your CRM",
      "Automatic, polite reminders",
      "97% of payments auto-reconciled",
      "Close in 3–4 days",
      "Every change logged and exportable",
    ],
  },
  className,
}: FeaturesVersusProps) {
  return (
    <section aria-labelledby="nc-vs-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">
          <p className="text-xs font-semibold tracking-da-label text-da-primary uppercase">{eyebrow}</p>
          <h2 id="nc-vs-title" className="mt-3 font-da-display text-[clamp(2rem,4.5vw,3rem)] leading-[1.1] font-extrabold tracking-da-display text-balance">
            {title}
          </h2>
        </div>
        <div className="mx-auto mt-12 grid max-w-4xl gap-4 md:grid-cols-2">
          <div className="da-stroke rounded-da-lg bg-da-surface-2 p-7">
            <h3 className="font-da-display text-lg font-bold text-da-muted-fg">{before.title}</h3>
            <ul className="mt-5 space-y-3">
              {before.items.map((i) => (
                <li key={i} className="flex items-start gap-3 text-da-muted-fg">
                  <span aria-hidden className="mt-0.5 grid size-5 shrink-0 place-items-center rounded-full bg-da-danger/10 text-da-danger">
                    <X className="size-3" strokeWidth={3} />
                  </span>
                  {i}
                </li>
              ))}
            </ul>
          </div>
          <div className="rounded-da-lg border-2 border-da-primary bg-da-surface p-7 text-da-surface-fg shadow-da-md">
            <h3 className="font-da-display text-lg font-bold text-da-primary">{after.title}</h3>
            <ul className="mt-5 space-y-3">
              {after.items.map((i) => (
                <li key={i} className="flex items-start gap-3 font-medium">
                  <span aria-hidden className="mt-0.5 grid size-5 shrink-0 place-items-center rounded-full bg-da-success text-da-success-fg">
                    <Check className="size-3" strokeWidth={3} />
                  </span>
                  {i}
                </li>
              ))}
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}

export default FeaturesVersus;