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

const hero = {
  status: "Invoicing for freelancers",
  title: ["Invoices out.", "Money in."],
  lead: "Fernbill sends the invoice, chases it politely and tells you the moment you’re paid — so you can get back to the work.",
  primary: { label: "Start free", href: "/signup" },
  secondary: { label: "Watch a 2-min tour", href: "/tour" },
  reassurances: ["No card needed", "5 free invoices a month", "Cancel any time"],
};

export function HeroCenteredType() {
  return (
    <section aria-labelledby="hero-title" className="relative isolate overflow-hidden bg-bg font-sans">
      <div aria-hidden className="absolute left-1/2 top-[-40%] -z-10 aspect-square w-[70%] -translate-x-1/2 rounded-full bg-[radial-gradient(closest-side,color-mix(in_srgb,var(--tst-primary)_14%,transparent),transparent)]" />
      <div className="mx-auto flex max-w-5xl flex-col items-center px-4 py-16 text-center sm:px-6 sm:py-24">
        <p className="inline-flex items-center gap-2 text-[13px] font-medium text-fg-muted">
          <span aria-hidden className="size-[7px] rounded-full bg-primary ring-4 ring-primary/20" />
          {hero.status}
        </p>
        <h1 id="hero-title" className="mt-6 text-balance text-5xl font-semibold leading-[0.96] tracking-[-0.055em] text-fg sm:text-7xl lg:text-8xl">
          {hero.title[0]}
          <br />
          <span className="text-primary">{hero.title[1]}</span>
        </h1>
        <p className="mt-6 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>
        <ul className="mt-6 flex flex-wrap justify-center gap-x-6 gap-y-2 text-[13.5px] text-fg-muted">
          {hero.reassurances.map((r) => (
            <li key={r} className="inline-flex items-center gap-1.5"><Check className="size-4 text-primary" aria-hidden />{r}</li>
          ))}
        </ul>
      </div>
    </section>
  );
}