1"use client";
2
3import { useEffect, useRef, useState } from "react";
4
5export const WaitlisterAIHero = () => {
6  const [isLoading, setIsLoading] = useState(false);
7  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
8
9  useEffect(() => {
10    return () => {
11      if (timerRef.current) {
12        clearTimeout(timerRef.current);
13      }
14    };
15  }, []);
16
17  const handleNotifyClick = () => {
18    if (isLoading) {
19      return;
20    }
21
22    setIsLoading(true);
23    timerRef.current = setTimeout(() => {
24      setIsLoading(false);
25    }, 1500);
26  };
27
28  return (
29    <section className="relative min-h-screen overflow-hidden bg-[#050507] text-white">
30      <div className="pointer-events-none absolute inset-0">
31        <div
32          className="absolute inset-x-0 top-0 h-[80%] opacity-60"
33          style={{
34            backgroundImage:
35              "radial-gradient(1px 1px at 10% 10%, #ffffff 100%, transparent), radial-gradient(1px 1px at 20% 30%, #ffffff80 100%, transparent), radial-gradient(2px 2px at 40% 70%, #ffffff60 100%, transparent), radial-gradient(1px 1px at 60% 40%, #ffffff90 100%, transparent), radial-gradient(1.5px 1.5px at 80% 20%, #ffffff70 100%, transparent), radial-gradient(1px 1px at 90% 80%, #ffffff50 100%, transparent), radial-gradient(1px 1px at 50% 50%, #ffffff40 100%, transparent)",
36            backgroundSize: "100% 100%",
37          }}
38        />
39        <div
40          className="absolute left-1/2 top-[30%] h-[600px] w-[800px] -translate-x-1/2 -translate-y-1/2"
41          style={{
42            backgroundImage:
43              "radial-gradient(circle, rgba(30, 35, 60, 0.4) 0%, rgba(5, 5, 7, 0) 70%)",
44          }}
45        />
46        {/* Main Planet/Circle Element */}
47        <div
48          className="absolute left-1/2 bottom-[-130vmin] h-[180vmin] w-[180vmin] -translate-x-1/2 rounded-full border border-white/35"
49          style={{
50            background:
51              "radial-gradient(circle at 50% 15%, rgba(120, 130, 180, 0.22), rgba(5, 5, 7, 0) 68%)",
52            boxShadow:
53              "0 -12px 28px rgba(255, 255, 255, 0.45), 0 -35px 90px rgba(120, 130, 180, 0.35)",
54          }}
55        />
56        <div className="absolute bottom-0 left-0 h-[40%] w-full bg-gradient-to-t from-black to-transparent" />
57      </div>
58
59      <div className="relative z-10 flex min-h-screen flex-col items-center justify-center px-4 text-center font-inter">
60        <div className="-mt-10 flex flex-col items-center gap-6">
61          <span className="rounded-full border border-white/20 bg-white/10 px-4 py-1 text-[11px] font-medium uppercase tracking-[0.5px] text-white/80 backdrop-blur">
62            Waitlister AI Stock
63          </span>
64
65          <h1 className="text-4xl font-normal leading-tight tracking-tight sm:text-5xl md:text-6xl">
66            The wait is part
67            <br className="hidden sm:block" /> of the{" "}
68            <span className="font-playfair italic">journey.</span>
69          </h1>
70
71          <p className="max-w-100 text-sm text-white/60 sm:text-base">
72            Drive interest, collect emails, and build
73            <br className="hidden sm:block" /> momentum ahead of your launch.
74          </p>
75
76          <form
77            className="mt-2 w-full max-w-95 rounded-xl border border-white/20 bg-[#282832]/60 p-2 shadow-[0_4px_20px_rgba(0,0,0,0.3)] backdrop-blur-md"
78            aria-busy={isLoading}
79          >
80            <div className="flex flex-col gap-2 sm:flex-row sm:items-center">
81              <label className="sr-only" htmlFor="waitlister-email">
82                Email address
83              </label>
84              <input
85                id="waitlister-email"
86                type="email"
87                autoComplete="email"
88                placeholder="Your email address"
89                className="w-full flex-1 bg-transparent px-4 py-3 text-sm text-white placeholder:text-gray-400 outline-none ring-0"
90              />
91              <button
92                type="button"
93                onClick={handleNotifyClick}
94                disabled={isLoading}
95                className="inline-flex w-full items-center justify-center gap-2 rounded-lg bg-white px-5 py-3 text-sm font-semibold text-black transition hover:opacity-90 active:scale-95 disabled:cursor-not-allowed disabled:opacity-70 sm:w-auto"
96              >
97                {isLoading ? (
98                  <span className="inline-flex items-center gap-2">
99                    <span className="h-4 w-4 animate-spin rounded-full border-2 border-black/20 border-t-black" />
100                    Sending
101                  </span>
102                ) : (
103                  "Get Notified"
104                )}
105              </button>
106            </div>
107          </form>
108        </div>
109      </div>
110    </section>
111  );
112};
113