import { Mail } from "lucide-react";

/* Each cloud rises, spreads and fades, then starts again; negative delays keep
   them out of step so the water is never empty. At rest they sit as a glow
   along the bottom edge.
Add once to globals.css:
@keyframes ink { 0% { transform: translateY(0) scale(.5); opacity: 0; } 12% { opacity: 1; } 55% { opacity: .7; } 100% { transform: translateY(-170%) scale(1.5); opacity: 0; } }
*/

const mix = (token: string, a: number, b: number) =>
  "radial-gradient(closest-side, color-mix(in srgb, var(--tst-" + token + ") " + a + "%, transparent), color-mix(in srgb, var(--tst-" + token + ") " + b + "%, transparent) 50%, transparent)";
const clouds = [
  { left: "-4%", bg: mix("primary", 85, 36), dur: "18s", delay: "-3s" },
  { left: "18%", bg: mix("info", 80, 32), dur: "21s", delay: "-10s" },
  { left: "40%", bg: mix("danger", 70, 28), dur: "17s", delay: "-15s" },
  { left: "58%", bg: mix("primary", 80, 32), dur: "20s", delay: "-6s" },
  { left: "76%", bg: mix("warning", 76, 30), dur: "19s", delay: "-12s" },
];

export function HeroInk() {
  return (
    <section aria-labelledby="ink-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-[radial-gradient(70%_34%_at_50%_100%,color-mix(in_srgb,var(--tst-primary)_22%,transparent),transparent),linear-gradient(to_top,color-mix(in_srgb,var(--tst-primary)_8%,var(--tst-bg)),var(--tst-bg)_60%)]">
        {clouds.map((c) => (
          <span key={c.left}
            className="absolute -bottom-[24%] aspect-square w-[max(34%,240px)] rounded-full opacity-80 will-change-transform animate-[ink_18s_cubic-bezier(.3,.1,.3,1)_infinite] motion-reduce:animate-none"
            style={{ left: c.left, background: c.bg, animationDuration: c.dur, animationDelay: c.delay }} />
        ))}
      </div>
      <div aria-hidden className="absolute inset-0 -z-10 bg-[radial-gradient(50%_46%_at_50%_46%,color-mix(in_srgb,var(--tst-bg)_74%,transparent),transparent_82%)]" />

      <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" /> Inkwell
        </a>
        <a href="#waitlist" className="inline-flex h-8 items-center rounded bg-primary px-3 text-[13px] font-medium text-primary-fg hover:bg-primary-hover">Join waitlist</a>
      </nav>

      <div className="mx-auto flex max-w-[1080px] flex-col items-center gap-5 text-center">
        <span className="rounded-full border border-border-strong px-2.5 py-0.5 text-xs font-medium text-fg-muted animate-rise motion-reduce:animate-none">Opening this spring</span>
        <h1 id="ink-title" className="max-w-[13ch] 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">
          A quiet place for long writing.
        </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">
          Inkwell keeps your novel, notes and research side by side, saves every version, and stays out of the way while you write.
        </p>
        <form id="waitlist" className="flex w-full max-w-[440px] flex-wrap justify-center gap-2 animate-rise [animation-delay:240ms] motion-reduce:animate-none" onSubmit={(e) => e.preventDefault()}>
          <label htmlFor="ink-email" className="sr-only">Email</label>
          <input id="ink-email" type="email" autoComplete="email" placeholder="you@example.com"
            className="h-11 min-w-0 flex-[1_1_220px] rounded border border-border-strong bg-bg/85 px-3 outline-none placeholder:text-fg-subtle focus:border-primary focus:ring-[3px] focus:ring-primary/20" />
          <button type="submit" 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]">
            <Mail className="size-4" aria-hidden /> Join the waitlist
          </button>
        </form>
        <p className="text-[12.5px] text-fg-muted">2,140 writers waiting · one email when we open</p>
      </div>
    </section>
  );
}