import { ArrowRight } from "lucide-react";

/* Bands are blurred once and only slide along their angle.
Add once to globals.css:
@keyframes band { from { transform: rotate(-14deg) translateX(-14%); } to { transform: rotate(-14deg) translateX(14%); } }
*/

const band = "absolute -left-[40%] h-[clamp(90px,13vw,170px)] w-[180%] rotate-[-14deg] rounded-full blur-[30px] will-change-transform animate-[band_16s_ease-in-out_infinite_alternate] motion-reduce:animate-none";
const releases = [
  { v: "v4.2", t: "Bulk export" },
  { v: "v4.1", t: "Dark mode" },
  { v: "v4.0", t: "Teams" },
];

export function HeroLightBands() {
  return (
    <section aria-labelledby="bands-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-info)_4%,var(--tst-bg))] animate-fade motion-reduce:animate-none">
        <span className={band + " -top-[2%] bg-[linear-gradient(90deg,transparent_12%,color-mix(in_srgb,var(--tst-primary)_55%,transparent)_42%,color-mix(in_srgb,var(--tst-info)_45%,transparent)_62%,transparent_88%)]"} />
        <span className={band + " top-[28%] [animation-delay:-6s] [animation-duration:21s] bg-[linear-gradient(90deg,transparent_8%,color-mix(in_srgb,var(--tst-info)_40%,transparent)_36%,color-mix(in_srgb,var(--tst-success)_34%,transparent)_58%,transparent_84%)]"} />
        <span className={band + " top-[56%] [animation-delay:-11s] [animation-direction:alternate-reverse] [animation-duration:18s] bg-[linear-gradient(90deg,transparent_14%,color-mix(in_srgb,var(--tst-warning)_50%,transparent)_44%,color-mix(in_srgb,var(--tst-danger)_34%,transparent)_64%,transparent_90%)]"} />
        <span className={band + " top-[84%] [animation-delay:-3s] [animation-duration:24s] bg-[linear-gradient(90deg,transparent_10%,color-mix(in_srgb,var(--tst-primary)_45%,transparent)_50%,transparent_86%)]"} />
      </div>
      <div aria-hidden className="absolute inset-0 -z-10 bg-[radial-gradient(50%_46%_at_50%_48%,color-mix(in_srgb,var(--tst-bg)_70%,transparent),transparent_80%)]" />

      <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" /> Brightline
        </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 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-info-soft px-2 py-0.5 text-xs font-medium text-info-fg">Shipped</span>
          Email digests for every release <ArrowRight className="size-3.5" aria-hidden />
        </a>
        <h1 id="bands-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">
          Changelogs your customers actually read.
        </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">
          Brightline turns merged work into short, friendly release notes and sends each customer only the changes they care about.
        </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="/example" className="inline-flex h-11 items-center rounded border border-border-strong bg-bg px-5 font-medium hover:bg-surface active:scale-[.97]">See an example</a>
        </div>
        <div className="mt-2 flex flex-wrap justify-center gap-2">
          {releases.map((r) => (
            <span key={r.v} className="inline-flex h-7 items-center gap-2 rounded border border-border bg-bg/80 px-3 text-[12.5px] text-fg-muted">
              <b className="font-mono text-[11.5px] font-medium text-fg">{r.v}</b>{r.t}
            </span>
          ))}
        </div>
      </div>
    </section>
  );
}