import { ArrowRight } from "lucide-react";

const meta = ["Fernbill — Invoicing", "For people who make things", "Est. 2026"];

export function HeroEditorial() {
  return (
    <section aria-labelledby="hero-title" className="bg-bg font-sans">
      <div className="mx-auto max-w-6xl px-4 pb-16 pt-10 sm:px-6">
        <div className="flex flex-wrap justify-between gap-x-6 gap-y-2 border-b border-fg pb-3.5 text-[12.5px] text-fg-muted">
          {meta.map((m) => <span key={m}>{m}</span>)}
        </div>

        <h1 id="hero-title" className="my-10 text-[clamp(3.25rem,11vw,9.5rem)] font-medium leading-[0.9] tracking-[-0.06em] text-fg sm:my-14">
          Do the work.
          <br />
          <span className="text-fg-subtle">We’ll handle</span>
          <br />
          the money.
        </h1>

        <div className="grid items-end gap-6 border-t border-border pt-4 sm:grid-cols-3">
          <span className="hidden text-[13px] text-fg-subtle sm:block">01 / Invoicing</span>
          <p className="text-pretty text-[14.5px] leading-relaxed text-fg-muted">
            Invoices, reminders and payouts for freelancers and small studios — quiet, quick and out of your way.
          </p>
          <a href="/signup" className="inline-flex w-fit items-center gap-2 border-b border-current pb-0.5 text-sm font-medium text-fg transition hover:text-primary sm:justify-self-end">
            Start free <ArrowRight className="size-4" aria-hidden />
          </a>
        </div>
      </div>
    </section>
  );
}