Features — before and after

import { ArrowRight, Check, X } from "lucide-react";

const before = [
  "Invoices built in a word processor, one by one",
  "Awkward “just checking in” emails at 11pm",
  "A spreadsheet that’s never quite up to date",
  "A shoebox of receipts every March",
];
const after = [
  "Branded invoices from a template, in a minute",
  "Polite reminders that go out on their own",
  "A live view of what’s paid, due and late",
  "A year-end pack your accountant can use",
];

export function FeaturesBeforeAfter() {
  return (
    <section aria-labelledby="compare-title" className="bg-bg font-sans">
      <div className="mx-auto max-w-5xl px-4 py-16 sm:px-6 lg:py-24">
        <div className="mx-auto mb-12 max-w-2xl text-center">
          <p className="text-[13px] font-medium text-primary">Why switch</p>
          <h2 id="compare-title" className="mt-3.5 text-balance text-3xl font-semibold tracking-tight text-fg sm:text-4xl">Same work. Very different end of the month.</h2>
        </div>

        <div className="relative grid gap-7 md:grid-cols-2 md:gap-5">
          <div className="grid content-start gap-[18px] rounded-xl border border-border bg-surface p-[22px] sm:p-7">
            <div className="flex items-center justify-between gap-3">
              <h3 className="text-base font-semibold tracking-tight text-fg-muted">Without Fernbill</h3>
              <span className="rounded-full bg-surface-2 px-2 py-0.5 text-xs font-medium text-fg-muted">The old way</span>
            </div>
            <ul className="grid gap-3.5 text-[14.5px] leading-normal text-fg-muted">
              {before.map((b) => (
                <li key={b} className="grid grid-cols-[22px_1fr] gap-3">
                  <span className="grid size-[22px] place-items-center rounded-full bg-surface-2 text-fg-subtle"><X className="size-3" aria-hidden /></span>{b}
                </li>
              ))}
            </ul>
          </div>

          <span aria-hidden className="absolute left-1/2 top-1/2 grid size-11 -translate-x-1/2 -translate-y-1/2 rotate-90 place-items-center rounded-full border border-border bg-bg text-primary shadow-md md:rotate-0">
            <ArrowRight className="size-[18px]" />
          </span>

          <div className="grid content-start gap-[18px] rounded-xl border border-primary/40 bg-gradient-to-br from-primary-soft to-bg p-[22px] shadow-xl shadow-primary/20 sm:p-7">
            <div className="flex items-center justify-between gap-3">
              <h3 className="text-base font-semibold tracking-tight text-fg">With Fernbill</h3>
              <span className="rounded-full bg-primary-soft px-2 py-0.5 text-xs font-medium text-primary-soft-fg">The new way</span>
            </div>
            <ul className="grid gap-3.5 text-[14.5px] leading-normal text-fg">
              {after.map((a) => (
                <li key={a} className="grid grid-cols-[22px_1fr] gap-3">
                  <span className="grid size-[22px] place-items-center rounded-full bg-primary text-primary-fg"><Check className="size-3" aria-hidden /></span>{a}
                </li>
              ))}
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}