"use client" import { ArrowRight, CheckCircle2, Loader2 } from "lucide-react" import { useState, type FormEvent } from "react" /** * Edit CONTENT to change copy and API endpoint. * Wire CONTENT.endpoint to your own route (Host API). */ const CONTENT = { label: "Email", placeholder: "you@company.com", submitLabel: "Join waitlist", successMessage: "You're on the list. We'll reach out soon.", footnote: "Zero spam. Early-bird invite when seats open.", endpoint: "/api/waitlist", source: "waitlist", } export function WaitlistForm() { const [email, setEmail] = useState("") const [status, setStatus] = useState< "idle" | "loading" | "success" | "error" >("idle") const [message, setMessage] = useState("") async function handleSubmit(e: FormEvent) { e.preventDefault() if (!email) return setStatus("loading") try { const response = await fetch(CONTENT.endpoint, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ email, source: CONTENT.source }), }) const data = (await response.json().catch(() => ({}))) as { error?: string } if (!response.ok) throw new Error(data.error || "Something went wrong") setStatus("success") setMessage(CONTENT.successMessage) setEmail("") } catch (err) { setStatus("error") setMessage(err instanceof Error ? err.message : "Failed to join waitlist") } } if (status === "success") { return (

{message}

) } return (

{status === "error" ? (

{message}

) : null}

{CONTENT.footnote}

) }