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

/* The grain is an SVG noise filter drawn once; only the colour fields move.
Add once to globals.css:
@keyframes grain-1 { to { transform: translate(26%, 30%) scale(1.1); } }
@keyframes grain-2 { to { transform: translate(-18%, 16%) scale(.88); } }
@keyframes grain-3 { to { transform: translate(-30%, -20%) scale(1.12); } }
*/

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

export function HeroGrain() {
  return (
    <section aria-labelledby="grain-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 bg-[color-mix(in_srgb,var(--tst-warning)_10%,var(--tst-bg))] animate-fade motion-reduce:animate-none">
        <span className={field + " -left-[14%] -top-[36%] w-[max(60%,420px)] bg-[radial-gradient(closest-side,color-mix(in_srgb,var(--tst-danger)_56%,transparent),transparent)] animate-[grain-1_24s_ease-in-out_infinite_alternate]"} />
        <span className={field + " -right-[22%] -top-[6%] w-[max(64%,440px)] bg-[radial-gradient(closest-side,color-mix(in_srgb,var(--tst-primary)_58%,transparent),transparent)] animate-[grain-2_28s_ease-in-out_infinite_alternate]"} />
        <span className={field + " -bottom-[54%] left-[26%] w-[max(56%,400px)] bg-[radial-gradient(closest-side,color-mix(in_srgb,var(--tst-warning)_64%,transparent),transparent)] animate-[grain-3_21s_ease-in-out_infinite_alternate]"} />
        <svg className="absolute inset-0 size-full opacity-55 mix-blend-overlay">
          <filter id="hero-grain"><feTurbulence type="fractalNoise" baseFrequency=".8" numOctaves={3} stitchTiles="stitch" /><feColorMatrix type="saturate" values="0" /></filter>
          <rect width="100%" height="100%" filter="url(#hero-grain)" />
        </svg>
      </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" /> Loudhouse
        </a>
        <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 a show</a>
      </nav>

      <div className="mx-auto flex max-w-[1080px] flex-col items-start gap-5">
        <span className="text-xs font-medium uppercase tracking-[.1em] text-fg-muted animate-rise motion-reduce:animate-none">Podcast hosting · Season 3</span>
        <h1 id="grain-title" className="max-w-[11ch] text-balance text-[clamp(38px,8.4vw,104px)] font-medium leading-[.96] tracking-[-0.05em] animate-rise [animation-delay:80ms] motion-reduce:animate-none">
          Make the show. We’ll handle the feed.
        </h1>
        <div className="mt-3 grid w-full gap-5 border-t border-fg/15 pt-5 md:grid-cols-[1fr_auto] md:items-end animate-rise [animation-delay:160ms] motion-reduce:animate-none">
          <p className="max-w-xl text-pretty text-base leading-relaxed text-fg-muted sm:text-lg">
            Upload once and Loudhouse publishes everywhere, writes the transcript and cuts the clips for your socials.
          </p>
          <div className="flex flex-wrap gap-2.5">
            <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 a show <ArrowRight className="size-4" aria-hidden />
            </a>
            <button type="button" className="inline-flex h-11 items-center gap-1.5 rounded border border-border-strong bg-bg px-5 font-medium hover:bg-surface active:scale-[.97]">
              <Play className="size-4" aria-hidden /> Hear an episode
            </button>
          </div>
        </div>
      </div>
    </section>
  );
}