import { ArrowRight } from "lucide-react";

/* Add once to globals.css:
@keyframes aurora-1 { to { transform: translate(22%, 26%) scale(1.15) rotate(25deg); } }
@keyframes aurora-2 { to { transform: translate(-24%, 22%) scale(.88); } }
@keyframes aurora-3 { to { transform: translate(-16%, -20%) scale(1.2); } }
*/

const stats = [
  { value: "12,400", label: "requests sorted" },
  { value: "38%", label: "fewer duplicate tickets" },
  { value: "2 days", label: "to set up" },
];

export function HeroAurora() {
  return (
    <section aria-labelledby="aurora-title" className="relative isolate overflow-hidden bg-bg font-sans">
      {/* Soft colour fields: radial gradients (no blur filter) moving on transform only */}
      <div aria-hidden className="absolute inset-0 -z-10 overflow-hidden animate-fade motion-reduce:animate-none">
        <span className="absolute -left-[18%] -top-[55%] aspect-square w-[70%] rounded-full bg-[radial-gradient(closest-side,color-mix(in_srgb,var(--tst-primary)_50%,transparent),transparent)] animate-[aurora-1_18s_ease-in-out_infinite_alternate] motion-reduce:animate-none" />
        <span className="absolute -right-[22%] -top-[40%] aspect-square w-[70%] rounded-full bg-[radial-gradient(closest-side,color-mix(in_srgb,var(--tst-info)_40%,transparent),transparent)] animate-[aurora-2_22s_ease-in-out_infinite_alternate] motion-reduce:animate-none" />
        <span className="absolute left-[18%] top-[20%] aspect-square w-[62%] rounded-full bg-[radial-gradient(closest-side,color-mix(in_srgb,var(--tst-success)_30%,transparent),transparent)] animate-[aurora-3_26s_ease-in-out_infinite_alternate] motion-reduce:animate-none" />
      </div>
      <div aria-hidden className="absolute inset-0 -z-10 bg-gradient-to-b from-transparent from-45% to-bg" />

      <div className="mx-auto flex max-w-3xl flex-col items-center gap-5 px-4 py-24 text-center sm:px-6">
        <a href="/roadmap" className="inline-flex items-center gap-2 rounded-full border border-border bg-bg py-0.5 pl-0.5 pr-3 text-[13px] text-fg-muted animate-rise motion-reduce:animate-none">
          <span className="rounded-full bg-primary-soft px-2 py-0.5 text-xs font-medium text-primary-soft-fg">Beta</span>
          Ranked roadmap view <ArrowRight className="size-3.5" aria-hidden />
        </a>
        <h1 id="aurora-title" className="text-balance text-4xl font-medium leading-[1.05] tracking-tight text-fg sm:text-5xl lg:text-6xl animate-rise [animation-delay:70ms] motion-reduce:animate-none">
          Every customer request, ranked by what it’s worth.
        </h1>
        <p className="max-w-xl text-pretty text-base leading-relaxed text-fg-muted sm:text-lg animate-rise [animation-delay:140ms] motion-reduce:animate-none">
          Blue Pine gathers feedback from calls, tickets and reviews into one list, sorted by the revenue asking for it.
        </p>
        <div className="flex flex-wrap justify-center gap-3 animate-rise [animation-delay:210ms] motion-reduce:animate-none">
          <a href="/signup" className="inline-flex h-11 items-center gap-1.5 rounded bg-primary px-5 font-medium text-primary-fg transition hover:bg-primary-hover active:scale-[.97]">
            Start free <ArrowRight className="size-4" aria-hidden />
          </a>
          <a href="/tour" className="inline-flex h-11 items-center rounded border border-border-strong bg-bg px-5 font-medium text-fg transition hover:bg-surface active:scale-[.97]">
            Watch the tour
          </a>
        </div>
        <dl className="mt-4 flex flex-wrap justify-center gap-x-8 gap-y-3">
          {stats.map((s, i) => (
            <div key={s.label} className="animate-rise motion-reduce:animate-none" style={{ animationDelay: 420 + i * 70 + "ms" }}>
              <dt className="sr-only">{s.label}</dt>
              <dd className="text-xl font-medium tabular-nums tracking-tight text-fg">{s.value}</dd>
              <dd className="text-xs text-fg-subtle">{s.label}</dd>
            </div>
          ))}
        </dl>
      </div>
    </section>
  );
}