"use client"; import { useState } from "react"; import Link from "next/link"; import { useRouter } from "next/navigation"; import { useForm, Controller } from "react-hook-form"; import { zodResolver } from "@hookform/resolvers/zod"; import { z } from "zod"; import { Building2, ExternalLink, Sparkles, Send, AlertTriangle } from "lucide-react"; import { Container } from "@/components/container"; import { Button } from "@/components/ui/button"; import { FloatingInput, FloatingTextarea } from "@/components/ui/floating-field"; import { PhoneField, isValidPhoneNumber, formatE164, switchCountryValue, DEFAULT_COUNTRY, type CountryCode, } from "@/components/ui/phone-field"; import { cn } from "@/lib/utils"; const DEPARTMENTS = [ "Enterprise Sales", "Technical Support", "Security & Compliance", "Partnerships & Telecom", ] as const; const schema = z .object({ name: z.string().trim().min(2, "Please enter your full name").max(80), email: z.email("Please enter a valid email address"), company: z.string().trim().min(1, "Company name is required").max(120), // Plain strings (not .default()) so the zod input type === z.infer output // type, which is what react-hook-form's Resolver requires. Values are always // supplied by defaultValues + setValue. phoneCountry: z.string(), phone: z.string(), message: z .string() .trim() .min(10, "Tell us a little more — at least 10 characters") .max(4000, "That's a bit long — please trim it down"), department: z.string(), // Honeypot — accept any value (so an aggressive autofill can't silently // block a real user); the server drops submissions where it's non-empty. website: z.string().optional(), }) .superRefine((val, ctx) => { if (val.phone && val.phone.trim().length > 0) { const valid = isValidPhoneNumber(val.phone, val.phoneCountry as CountryCode); if (!valid) { ctx.addIssue({ code: "custom", path: ["phone"], message: "Enter a valid phone number for the selected country.", }); } } }); type Values = z.infer; export function ContactView() { const router = useRouter(); const [serverError, setServerError] = useState(null); const { register, control, handleSubmit, watch, setValue, formState: { errors, isSubmitting }, } = useForm({ resolver: zodResolver(schema), mode: "onBlur", defaultValues: { name: "", email: "", company: "", phone: "", phoneCountry: DEFAULT_COUNTRY, message: "", department: "Enterprise Sales", website: "", }, }); // eslint-disable-next-line react-hooks/incompatible-library -- react-hook-form watch() is not memoizable; expected const department = watch("department"); const phoneCountry = watch("phoneCountry") as CountryCode; async function onSubmit(values: Values) { setServerError(null); try { const res = await fetch("/api/contact", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ ...values, phone: values.phone ? formatE164(values.phone, values.phoneCountry as CountryCode) : "", }), }); const data = (await res.json().catch(() => ({}))) as { ok?: boolean; error?: string }; if (!res.ok || !data.ok) { setServerError(data.error || "Something went wrong on our side. Please try again."); return; } // Only navigate after a genuinely successful response. router.push("/thank-you?from=contact"); } catch { setServerError("We couldn't reach the server. Check your connection and try again."); } } return (
{/* Ambient background glow for hero — starts at top: 0 behind fixed header */} ); }