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

/* Add once to globals.css:
@keyframes glass-1 { to { transform: translate(60%, 30%) scale(1.1); } }
@keyframes glass-2 { to { transform: translate(-70%, 34%) scale(.9); } }
@keyframes glass-3 { to { transform: translate(50%, -40%) scale(1.15); } }
@keyframes glass-4 { to { transform: translate(-120%, -50%); } }
*/

const field = "absolute aspect-square rounded-full will-change-transform motion-reduce:animate-none";
const notes = ["Free for two people", "Read-only bank links", "Leave any time"];

export function HeroGlass() {
  return (
    <section aria-labelledby="glass-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-primary)_8%,var(--tst-bg))] animate-fade motion-reduce:animate-none">
        <span className={field + " left-[2%] -top-[10%] w-[max(40%,280px)] bg-[radial-gradient(closest-side,var(--tst-primary),transparent)] opacity-80 animate-[glass-1_17s_ease-in-out_infinite_alternate]"} />
        <span className={field + " right-[4%] top-[6%] w-[max(34%,240px)] bg-[radial-gradient(closest-side,var(--tst-danger),transparent)] opacity-60 animate-[glass-2_21s_ease-in-out_infinite_alternate]"} />
        <span className={field + " -bottom-[24%] left-[30%] w-[max(38%,260px)] bg-[radial-gradient(closest-side,var(--tst-info),transparent)] opacity-70 animate-[glass-3_19s_ease-in-out_infinite_alternate]"} />
        <span className={field + " -bottom-[10%] right-[18%] w-[max(24%,180px)] bg-[radial-gradient(closest-side,var(--tst-warning),transparent)] opacity-75 animate-[glass-4_15s_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" /> Cove
        </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">Get Cove</a>
      </nav>

      <div className="mx-auto flex max-w-[720px] flex-col items-center gap-5 rounded-xl border border-bg/60 bg-bg/60 px-5 py-8 text-center shadow-[0_40px_80px_-40px_rgb(0_0_0/.35)] backdrop-blur-xl backdrop-saturate-150 sm:px-14 sm:py-14 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">Shared budgets</span>
        <h1 id="glass-title" className="max-w-[14ch] text-balance text-4xl font-medium leading-[1.02] tracking-[-0.04em] sm:text-5xl lg:text-6xl">
          Money talk, without the awkward part.
        </h1>
        <p className="max-w-xl text-pretty text-base leading-relaxed text-fg-muted sm:text-lg">
          Cove splits rent, groceries and the holiday fund between the people you live with, and settles up at the end of each month.
        </p>
        <div className="flex flex-wrap justify-center 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 household <ArrowRight className="size-4" aria-hidden />
          </a>
          <a href="/how" 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 how it works</a>
        </div>
        <ul className="flex flex-wrap justify-center gap-x-4 gap-y-1.5 text-[12.5px] text-fg-muted">
          {notes.map((n) => <li key={n} className="flex items-center gap-1.5"><Check className="size-3.5 text-success" aria-hidden />{n}</li>)}
        </ul>
      </div>
    </section>
  );
}