import { ArrowRight } from "lucide-react";

/* The wheel is blurred once (filter) and only rotated, so each frame is a cheap transform.
Add once to globals.css:
@keyframes swirl { to { transform: rotate(1turn); } }
*/

const stats = [
  { value: "40", label: "paper profiles" },
  { value: "1.2 ΔE", label: "average match" },
  { value: "Same day", label: "soft proofs" },
];

export function HeroConic() {
  return (
    <section aria-labelledby="conic-title" className="relative isolate overflow-hidden bg-bg px-5 py-24 font-sans text-fg sm:px-10 sm:py-32">
      <div aria-hidden className="absolute inset-x-0 -top-[20%] bottom-0 -z-10 grid place-items-center overflow-hidden animate-fade motion-reduce:animate-none">
        <span className="aspect-square w-[max(76%,560px)] rounded-full bg-[conic-gradient(from_90deg,var(--tst-primary),var(--tst-info),var(--tst-success),var(--tst-warning),var(--tst-danger),var(--tst-primary))] opacity-50 blur-[72px] will-change-transform animate-[swirl_30s_linear_infinite] motion-reduce:animate-none" />
      </div>
      <div aria-hidden className="absolute inset-0 -z-10 bg-[radial-gradient(46%_44%_at_50%_46%,color-mix(in_srgb,var(--tst-bg)_70%,transparent),transparent_82%)]" />
      <div aria-hidden className="absolute inset-x-0 bottom-0 -z-10 h-1/3 bg-gradient-to-b from-transparent to-bg" />

      <div className="mx-auto flex max-w-[1080px] flex-col items-center gap-5 text-center">
        <span className="text-xs font-medium uppercase tracking-[.1em] text-fg-muted animate-rise motion-reduce:animate-none">Colour-accurate proofing</span>
        <h1 id="conic-title" className="max-w-[14ch] text-balance text-4xl font-medium leading-[1.02] tracking-[-0.04em] sm:text-6xl lg:text-7xl animate-rise [animation-delay:80ms] motion-reduce:animate-none">
          See every print in the colour it ships in.
        </h1>
        <p className="max-w-xl text-pretty text-base leading-relaxed text-fg-muted sm:text-lg animate-rise [animation-delay:160ms] motion-reduce:animate-none">
          Prism matches your screen to the paper, ink and press, so the proof you approve is the job that arrives.
        </p>
        <div className="flex flex-wrap justify-center gap-2.5 animate-rise [animation-delay:240ms] motion-reduce:animate-none">
          <a href="/calibrate" className="inline-flex h-11 items-center gap-1.5 rounded bg-primary px-5 font-medium text-primary-fg hover:bg-primary-hover active:scale-[.97]">
            Calibrate a screen <ArrowRight className="size-4" aria-hidden />
          </a>
          <a href="/how" className="inline-flex h-11 items-center rounded px-5 font-medium hover:bg-surface-2">How it works</a>
        </div>
        <dl className="mt-4 flex flex-wrap justify-center gap-x-9 gap-y-3">
          {stats.map((s) => (
            <div key={s.label}>
              <dt className="sr-only">{s.label}</dt>
              <dd className="text-[22px] font-medium tabular-nums tracking-tight">{s.value}</dd>
              <dd className="text-[12.5px] text-fg-muted">{s.label}</dd>
            </div>
          ))}
        </dl>
      </div>
    </section>
  );
}