import { ArrowRight } from "lucide-react";

const hero = {
  announcement: { tag: "New", label: "Recurring invoices", href: "/changelog/recurring" },
  title: "Get paid on time, without the awkward follow-ups.",
  lead: "Fernbill sends your invoices, reminds late clients in your own words and tells you the moment the money lands.",
  primary: { label: "Start free", href: "/signup" },
  secondary: { label: "See how it works", href: "/tour" },
  note: "Free for your first 5 invoices a month · No card needed",
};

export function HeroCentered() {
  return (
    <section aria-labelledby="hero-title" className="relative isolate overflow-hidden bg-bg font-sans">
      {/* Backdrop: a faint grid that fades out, and a soft brand glow from the top */}
      <div
        aria-hidden
        className="absolute inset-0 -z-10 opacity-70 [background-image:linear-gradient(var(--tst-border)_1px,transparent_1px),linear-gradient(90deg,var(--tst-border)_1px,transparent_1px)] [background-size:40px_40px] [mask-image:radial-gradient(70%_60%_at_50%_20%,var(--tst-fg),transparent_75%)]"
      />
      <div
        aria-hidden
        className="absolute inset-0 -z-10 bg-[radial-gradient(55%_45%_at_50%_0%,color-mix(in_srgb,var(--tst-primary)_18%,transparent),transparent_70%)]"
      />

      <div className="mx-auto flex max-w-3xl flex-col items-center px-4 py-20 text-center sm:px-6 sm:py-28">
        <a
          href={hero.announcement.href}
          className="inline-flex max-w-full items-center gap-2 rounded-full border border-border bg-bg py-0.5 pl-0.5 pr-3 text-[13px] text-fg-muted transition hover:border-border-strong"
        >
          <span className="rounded-full bg-primary-soft px-2 py-0.5 text-xs font-medium text-primary-soft-fg">{hero.announcement.tag}</span>
          {hero.announcement.label}
          <ArrowRight className="size-3.5" aria-hidden />
        </a>

        <h1 id="hero-title" className="mt-6 text-balance text-4xl font-semibold leading-[1.08] tracking-tight text-fg sm:text-5xl lg:text-6xl">
          {hero.title}
        </h1>
        <p className="mt-5 max-w-xl text-pretty text-base leading-relaxed text-fg-muted sm:text-lg">{hero.lead}</p>

        <div className="mt-8 flex flex-wrap justify-center gap-3">
          <a href={hero.primary.href} className="inline-flex h-11 items-center gap-1.5 rounded bg-primary px-5 text-[15px] font-medium text-primary-fg transition hover:bg-primary-hover">
            {hero.primary.label} <ArrowRight className="size-4" aria-hidden />
          </a>
          <a href={hero.secondary.href} className="inline-flex h-11 items-center rounded border border-border-strong bg-bg px-5 text-[15px] font-medium text-fg transition hover:bg-surface">
            {hero.secondary.label}
          </a>
        </div>
        <p className="mt-5 text-[13px] text-fg-subtle">{hero.note}</p>
      </div>
    </section>
  );
}