import { Check, Mail, Repeat } from "lucide-react";

const chips = [
  { icon: Repeat, label: "Monthly · 1st", className: "-left-[8%] top-[14%]" },
  { icon: Check, label: "$1,200 collected", className: "-right-[2%] top-[44%]" },
  { icon: Mail, label: "Receipt sent", className: "bottom-[8%] left-[6%]" },
];

/** Uses the brand ramp (brand-50…950), which stays the same in dark mode — so dark-on-brand text keeps its contrast. */
export function HeroBrandGradient() {
  return (
    <section
      aria-labelledby="hero-title"
      className="bg-[radial-gradient(70%_90%_at_100%_100%,var(--tst-brand-500),transparent_70%),linear-gradient(150deg,var(--tst-brand-100),var(--tst-brand-300)_55%,var(--tst-brand-400))] font-sans text-brand-950"
    >
      <div className="mx-auto grid max-w-6xl items-center gap-12 px-4 py-16 sm:px-6 sm:py-24 lg:grid-cols-[1.25fr_0.75fr]">
        <div className="flex flex-col items-start gap-5">
          <p className="text-[11.5px] font-medium uppercase tracking-[0.12em] text-brand-800">Fernbill · Recurring billing</p>
          <h1 id="hero-title" className="text-balance text-4xl font-semibold leading-[1.04] tracking-tight sm:text-5xl lg:text-6xl">
            Retainers that bill themselves, every month, on the dot.
          </h1>
          <p className="max-w-lg text-pretty text-base leading-relaxed text-brand-900 sm:text-lg">
            Set the amount and the day once. Fernbill sends the invoice, collects the card payment and files the receipt.
          </p>
          <div className="flex flex-wrap gap-3">
            <a href="/retainers/new" className="inline-flex h-11 items-center rounded bg-brand-950 px-5 text-[15px] font-medium text-brand-50 transition hover:bg-brand-900">Set up a retainer</a>
            <a href="/retainers" className="inline-flex h-11 items-center rounded border border-brand-950/30 px-5 text-[15px] font-medium transition hover:bg-brand-950/10">How it works</a>
          </div>
        </div>

        <div aria-hidden className="relative ml-auto hidden aspect-square w-full max-w-[340px] rounded-full border border-brand-950/20 lg:block">
          <div className="absolute inset-[16%] rounded-full border border-brand-950/20" />
          <div className="absolute inset-[34%] rounded-full border border-brand-950/20 bg-brand-50/50" />
          {chips.map(({ icon: Icon, label, className }) => (
            <span key={label} className={"absolute inline-flex items-center gap-2 whitespace-nowrap rounded-full bg-brand-50 px-3 py-2 text-[12.5px] font-medium shadow-lg " + className}>
              <Icon className="size-3.5" /> {label}
            </span>
          ))}
        </div>
      </div>
    </section>
  );
}