"use client"; import { useActionState, useEffect, useRef, useState } from "react"; import { createPortal } from "react-dom"; import { CheckCircle2, Phone, PhoneCall, X } from "lucide-react"; import { requestCallback, type LeadState } from "@/app/actions"; import { CALLBACK_SLOTS } from "@/lib/lead-schema"; import { INDUSTRY_OPTIONS } from "@/lib/content"; import FloatInput from "./FloatInput"; import FloatDropdown from "./FloatDropdown"; import PhoneInput from "./PhoneInput"; const initial: LeadState = { ok: false, message: "" }; /* Short chip labels — full values are posted so the API is untouched */ const SHORT_SLOTS = ["ASAP", "Morning", "Afternoon", "Evening"] as const; export default function CallbackModal({ onClose }: { onClose: () => void }) { const [state, action, pending] = useActionState(requestCallback, initial); const nameRef = useRef(null); // Portal to document.body so centering is relative to the viewport, // never to an ancestor stacking context. Render-safe: false on the // server, true on the client — no effect needed. const [mounted] = useState(() => typeof document !== "undefined"); // Autofocus + body scroll lock + Escape to close useEffect(() => { nameRef.current?.focus(); const prev = document.body.style.overflow; document.body.style.overflow = "hidden"; const onKey = (e: KeyboardEvent) => { if (e.key === "Escape") onClose(); }; document.addEventListener("keydown", onKey); return () => { document.body.style.overflow = prev; document.removeEventListener("keydown", onKey); }; }, [onClose]); if (!mounted) return null; return createPortal( , document.body ); }

We'll call you back

Request received!