import { useEffect, useMemo, useState } from "react";
import { Logo, Arrow, Eyebrow, Glow } from "./lib/primitives.jsx";
import BetaForm from "./components/beta/BetaForm.jsx";
import Confirmed from "./components/beta/Confirmed.jsx";
import Benefits from "./components/beta/Benefits.jsx";

export default function BetaApp() {
  const [scrolled, setScrolled] = useState(false);
  const [submitted, setSubmitted] = useState(false);
  const [submitting, setSubmitting] = useState(false);
  const [form, setForm] = useState({
    email: "", name: "", build: "", role: "smb", source: "",
  });

  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  // Stable queue position — deterministic on email so the number doesn't jump
  const queuePos = useMemo(() => {
    let h = 7;
    for (const c of form.email) h = (h * 31 + c.charCodeAt(0)) >>> 0;
    return 2100 + (h % 900);
  }, [form.email]);

  const handleSubmit = () => {
    setSubmitting(true);
    setTimeout(() => {
      setSubmitting(false);
      setSubmitted(true);
      window.scrollTo({ top: 0, behavior: "smooth" });
    }, 700);
  };

  return (
    <>
      <nav className={`sticky top-0 z-50 backdrop-blur-md bg-[oklch(0.155_0.008_60/0.55)] transition-colors ${scrolled ? "border-b border-hairline" : "border-b border-transparent"}`}>
        <div className="wrap flex items-center justify-between h-16">
          <Logo href="/" />
          <a href="/" className="text-fg-mute text-[14px] inline-flex items-center gap-1.5 hover:text-fg">
            <svg width="14" height="14" viewBox="0 0 16 16" fill="none">
              <path d="M13 8H3M7 4 3 8l4 4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
            Back to home
          </a>
        </div>
      </nav>

      <main className="relative overflow-hidden py-[clamp(60px,9vh,100px)]">
        <Glow color="oklch(0.74 0.175 35 / 0.30)" size={1000}
              style={{ top: -280, left: "50%", transform: "translateX(-50%)" }} />
        <Glow color="oklch(0.45 0.10 35 / 0.20)" size={550} style={{ top: "30%", left: -180 }} />
        <Glow color="oklch(0.45 0.10 35 / 0.15)" size={500} style={{ top: "20%", right: -150 }} />

        <div className="wrap relative max-w-[760px]">
          {submitted ? (
            <Confirmed form={form} queuePos={queuePos} />
          ) : (
            <>
              <header className="text-center mb-14">
                <Eyebrow>Closed beta · invite-only</Eyebrow>
                <h1 className="mt-[18px] font-medium tracking-[-0.03em] leading-none text-[clamp(40px,6.4vw,80px)] text-balance">
                  Be one of the first to{" "}
                  <em className="not-italic text-accent" style={{ textShadow: "0 0 40px var(--c-accent-glow)" }}>
                    vibe with Vibn
                  </em>.
                </h1>
                <p className="mt-6 text-[clamp(16px,1.6vw,19px)] text-fg-dim max-w-[540px] mx-auto text-balance">
                  We're letting in <b className="text-fg font-medium">50 new builders a week</b>.
                  Tell us what you want to build — the most exciting ideas get the invite first.
                </p>
              </header>
              <BetaForm form={form} setForm={setForm} submitting={submitting} onSubmit={handleSubmit} />
            </>
          )}

          <Benefits />
        </div>
      </main>

      <footer className="py-6 border-t border-hairline" style={{ background: "oklch(0.14 0.008 60)" }}>
        <div className="wrap flex justify-between items-center gap-4 flex-wrap font-mono text-[11px] text-fg-faint tracking-[0.03em]">
          <span>🇨🇦 Built in Canada · Your data stays safe · No credit card to start</span>
          <span>© 2026 Vibn Inc.</span>
        </div>
      </footer>
    </>
  );
}
