Features — how it works in 3 steps

const steps = [
  { title: "Add your client", text: "Name, email and currency. Fernbill remembers the rest for next time.", example: { label: "Kaveri Foods", tag: "INR" } },
  { title: "Send the invoice", text: "Your branding, a pay link and a due date — out in under a minute.", example: { label: "INV-1042 · $3,450", tag: "Sent" } },
  { title: "Get paid", text: "Reminders go out until it’s paid. The money lands in two working days.", example: { label: "Payout to your bank ••42", tag: "$3,450" } },
];

export function FeaturesSteps() {
  return (
    <section aria-labelledby="steps-title" className="bg-bg font-sans">
      <div className="mx-auto max-w-6xl 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">How it works</p>
          <h2 id="steps-title" className="mt-3.5 text-balance text-3xl font-semibold tracking-tight text-fg sm:text-4xl">Paid in three steps, not thirty emails</h2>
        </div>
        <ol className="grid gap-7 md:grid-cols-3 md:gap-8">
          {steps.map((s, i) => (
            <li
              key={s.title}
              className="relative grid content-start gap-2.5 pl-[60px] md:pl-0
                before:absolute before:bottom-[-24px] before:left-5 before:top-12 before:border-l before:border-dashed before:border-border-strong
                last:before:hidden md:before:bottom-auto md:before:left-[52px] md:before:right-[-20px] md:before:top-5 md:before:border-l-0 md:before:border-t"
            >
              <span className="absolute left-0 top-0 grid size-10 place-items-center rounded-full bg-primary text-[15px] font-semibold text-primary-fg ring-[6px] ring-primary/15 md:relative md:mb-2.5">
                {i + 1}
              </span>
              <h3 className="text-base font-semibold tracking-tight text-fg">{s.title}</h3>
              <p className="text-pretty text-[14.5px] leading-relaxed text-fg-muted">{s.text}</p>
              <div aria-hidden className="mt-3 flex items-center justify-between gap-3 rounded-lg border border-border bg-surface p-3.5 text-[12.5px] text-fg">
                <span className="truncate">{s.example.label}</span>
                <span className="rounded-full bg-primary-soft px-2 py-0.5 text-xs font-medium text-primary-soft-fg">{s.example.tag}</span>
              </div>
            </li>
          ))}
        </ol>
      </div>
    </section>
  );
}