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

/* The gradient repeats end-to-start, so sliding it one width loops without a seam.
Add once to globals.css:
@keyframes flow { to { background-position: -200% 0; } }
@keyframes drift-1 { to { transform: translate(18%, 22%) scale(1.12); } }
@keyframes drift-2 { to { transform: translate(-22%, 18%) scale(.9); } }
@keyframes drift-3 { to { transform: translate(26%, -16%) scale(1.15); } }
*/

const field = "absolute aspect-square rounded-full will-change-transform motion-reduce:animate-none";

export function HeroGradientHeadline() {
  return (
    <section aria-labelledby="gt-title" className="relative isolate overflow-hidden bg-bg px-5 pb-24 pt-5 font-sans text-fg sm:px-10">
      <div aria-hidden className="absolute inset-0 -z-10 overflow-hidden opacity-80">
        <span className={field + " -left-[10%] -top-[30%] w-[max(44%,320px)] bg-[radial-gradient(closest-side,color-mix(in_srgb,var(--tst-primary)_30%,transparent),transparent)] animate-[drift-1_24s_ease-in-out_infinite_alternate]"} />
        <span className={field + " -right-[10%] -top-[20%] w-[max(40%,300px)] bg-[radial-gradient(closest-side,color-mix(in_srgb,var(--tst-danger)_22%,transparent),transparent)] animate-[drift-2_28s_ease-in-out_infinite_alternate]"} />
        <span className={field + " -bottom-[50%] left-[34%] w-[max(40%,300px)] bg-[radial-gradient(closest-side,color-mix(in_srgb,var(--tst-info)_26%,transparent),transparent)] animate-[drift-3_22s_ease-in-out_infinite_alternate]"} />
      </div>

      <nav aria-label="Main" className="mx-auto mb-16 flex max-w-[1080px] items-center justify-between gap-4 sm:mb-24">
        <a href="/" className="flex items-center gap-2 text-[15px] font-semibold">
          <span className="size-[22px] rounded-sm bg-gradient-to-br from-primary to-info" /> Quill
        </a>
        <a href="/start" className="inline-flex h-8 items-center rounded bg-primary px-3 text-[13px] font-medium text-primary-fg hover:bg-primary-hover">Get started</a>
      </nav>

      <div className="mx-auto flex max-w-[1080px] flex-col items-center gap-5 text-center">
        <a href="/changelog" className="inline-flex items-center gap-2 rounded-full border border-fg/10 bg-bg/70 py-0.5 pl-0.5 pr-3 text-[12.5px] text-fg-muted animate-rise motion-reduce:animate-none">
          <span className="rounded-full bg-surface-2 px-2 py-0.5 text-xs font-medium text-fg-muted">v3</span>
          Versioned docs for every branch <ArrowRight className="size-3.5" aria-hidden />
        </a>
        <h1 id="gt-title" className="max-w-[15ch] 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">
          API docs that ship{" "}
          <span className="inline-block bg-[linear-gradient(90deg,var(--tst-primary),var(--tst-info),color-mix(in_srgb,var(--tst-warning)_80%,var(--tst-fg)),var(--tst-danger),var(--tst-primary))] bg-[length:200%_100%] bg-clip-text pb-[.06em] text-transparent animate-[flow_14s_linear_infinite] motion-reduce:animate-none">
            with every commit.
          </span>
        </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">
          Quill reads your types and comments on each push and publishes reference pages, examples and a changelog to your own domain.
        </p>
        <div className="flex flex-wrap justify-center gap-2.5 animate-rise [animation-delay:240ms] motion-reduce:animate-none">
          <a href="/start" 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]">
            Get started <ArrowRight className="size-4" aria-hidden />
          </a>
          <span className="inline-flex h-11 items-center gap-3 rounded border border-border-strong bg-surface/80 pl-4 pr-2 font-mono text-[13.5px] font-medium">
            <span className="text-fg-subtle">$</span>npx quill init
            <button type="button" aria-label="Copy command" onClick={() => navigator.clipboard.writeText("npx quill init")} className="grid size-[30px] place-items-center rounded hover:bg-surface-2">
              <Copy className="size-4" aria-hidden />
            </button>
          </span>
        </div>
      </div>
    </section>
  );
}