import { ArrowRight } from "lucide-react";

/* Add once to globals.css:
@keyframes mesh-1 { to { transform: translate(18%, 22%) scale(1.12); } }
@keyframes mesh-2 { to { transform: translate(-22%, 18%) scale(.9); } }
@keyframes mesh-3 { to { transform: translate(26%, -16%) scale(1.15); } }
@keyframes mesh-4 { to { transform: translate(-20%, -22%) scale(1.06); } }
*/

const blob = "absolute aspect-square w-[max(58%,400px)] rounded-full will-change-transform motion-reduce:animate-none";
const logos = ["Northwind", "Larkspur", "Tidewell", "Oakline", "Halcyon"];

export function HeroMesh() {
  return (
    <section aria-labelledby="mesh-title" className="relative isolate overflow-hidden bg-bg px-5 pb-24 pt-5 font-sans text-fg sm:px-10">
      {/* Four soft colour fields (radial gradients, no blur filter) drifting on transform only */}
      <div aria-hidden className="absolute inset-0 -z-10 overflow-hidden bg-[color-mix(in_srgb,var(--tst-primary)_5%,var(--tst-bg))] animate-fade motion-reduce:animate-none">
        <span className={blob + " -left-[14%] -top-[40%] bg-[radial-gradient(closest-side,color-mix(in_srgb,var(--tst-primary)_62%,transparent),transparent)] animate-[mesh-1_26s_ease-in-out_infinite_alternate]"} />
        <span className={blob + " -right-[16%] -top-[28%] bg-[radial-gradient(closest-side,color-mix(in_srgb,var(--tst-info)_52%,transparent),transparent)] animate-[mesh-2_22s_ease-in-out_infinite_alternate]"} />
        <span className={blob + " -bottom-[50%] left-[4%] bg-[radial-gradient(closest-side,color-mix(in_srgb,var(--tst-warning)_50%,transparent),transparent)] animate-[mesh-3_30s_ease-in-out_infinite_alternate]"} />
        <span className={blob + " -bottom-[42%] -right-[6%] !w-[max(46%,320px)] bg-[radial-gradient(closest-side,color-mix(in_srgb,var(--tst-success)_42%,transparent),transparent)] animate-[mesh-4_24s_ease-in-out_infinite_alternate]"} />
      </div>
      {/* Scrim keeps the copy readable over the brightest colour */}
      <div aria-hidden className="absolute inset-0 -z-10 bg-[radial-gradient(56%_52%_at_50%_50%,color-mix(in_srgb,var(--tst-bg)_72%,transparent),transparent_78%)]" />

      <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" /> Fieldnote
        </a>
        <div className="hidden gap-6 text-[13.5px] text-fg-muted sm:flex">
          {["Product", "Customers", "Pricing", "Docs"].map((l) => <a key={l} href="#" className="hover:text-fg">{l}</a>)}
        </div>
        <a href="/signup" className="inline-flex h-8 items-center rounded bg-primary px-3 text-[13px] font-medium text-primary-fg hover:bg-primary-hover">Start free</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-primary-soft px-2 py-0.5 text-xs font-medium text-primary-soft-fg">New</span>
          Highlights that link themselves <ArrowRight className="size-3.5" aria-hidden />
        </a>
        <h1 id="mesh-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">
          Research notes that find each other.
        </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">
          Fieldnote keeps interviews, surveys and support threads in one place, and links every quote to the question it answers.
        </p>
        <div className="flex flex-wrap justify-center gap-2.5 animate-rise [animation-delay:240ms] 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 hover:bg-primary-hover active:scale-[.97]">
            Start free <ArrowRight className="size-4" aria-hidden />
          </a>
          <a href="/demo" className="inline-flex h-11 items-center rounded border border-border-strong bg-bg px-5 font-medium hover:bg-surface active:scale-[.97]">Book a demo</a>
        </div>
        <div className="mt-6 flex flex-wrap justify-center gap-x-8 gap-y-2 text-sm font-semibold text-fg-subtle">
          <p className="w-full text-xs font-normal">Used by research teams at</p>
          {logos.map((l) => <span key={l}>{l}</span>)}
        </div>
      </div>
    </section>
  );
}