"use client"; import { useEffect, useRef, useState } from "react"; import Link from "next/link"; import { motion, AnimatePresence } from "framer-motion"; import { ArrowUpRight, Check, ChevronDown, Maximize2, RefreshCw, X, Mail, MessageSquare, Server } from "lucide-react"; import { contactConfig } from "@/lib/contact"; const intents = [...contactConfig.services] as string[]; export default function ContactClient() { const [step, setStep] = useState(0); const [intent, setIntent] = useState(null); const [form, setForm] = useState({ name:"", email:"", company:"", subject:"", message:"", budget:"", timeline:"" }); const [honeypot, setHoneypot] = useState(""); const [errors, setErrors] = useState>({}); const [loading, setLoading] = useState(false); const [success, setSuccess] = useState(false); const [errorMsg, setErrorMsg] = useState(null); const [zyFull, setZyFull] = useState(false); const [zyKey, setZyKey] = useState(0); const [faq, setFaq] = useState(0); const [bgStep, setBgStep] = useState(0); const btnRef = useRef(null); useEffect(() => { setBgStep(step); }, [step]); useEffect(() => { if (zyFull) document.body.style.overflow="hidden"; else document.body.style.overflow=""; return ()=>{document.body.style.overflow="";}; }, [zyFull]); // magnetic send useEffect(() => { if (window.matchMedia("(pointer: coarse)").matches) return; const el = btnRef.current; if (!el) return; const onMove = (e: MouseEvent) => { const r = el.getBoundingClientRect(); const x = e.clientX - (r.left + r.width/2); const y = e.clientY - (r.top + r.height/2); const dist = Math.hypot(x,y); if (dist < 180) { el.style.transform = `translate(${x*0.12}px, ${y*0.12}px)`; } else { el.style.transform = ""; } }; const onLeave = () => { el.style.transform = ""; }; window.addEventListener("mousemove", onMove); window.addEventListener("mouseleave", onLeave); return () => { window.removeEventListener("mousemove", onMove); window.removeEventListener("mouseleave", onLeave); }; }, [step, success]); const validateStep = () => { const e: Record = {}; if (step===0 && !intent) e.intent = "Select an option"; if (step===1) { if (!form.name.trim() || form.name.trim().length<2) e.name = "Please enter your name"; if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email)) e.email = "Please enter a valid email address."; if (!form.subject.trim()) e.subject = "Add a subject"; if (!form.message.trim() || form.message.trim().length<10) e.message = "Message at least 10 chars"; if (form.message.length>2000) e.message = "Max 2000 chars"; } setErrors(e); return Object.keys(e).length===0; }; const next = () => { if (validateStep()) setStep(s=> Math.min(3, s+1)); }; const prev = () => setStep(s=> Math.max(0, s-1)); const submit = async () => { if (!validateStep()) return; setLoading(true); setErrorMsg(null); try { const res = await fetch("/api/contact", { method:"POST", headers:{ "Content-Type":"application/json" }, body: JSON.stringify({ ...form, intent, honeypot }) }); const data = await res.json(); if (!res.ok) throw new Error(data.error || "Failed"); setSuccess(true); } catch (err:any) { setErrorMsg(err.message || "The message couldn't be sent. Please try again or use the direct email option."); } finally { setLoading(false); } }; return (
{/* HERO */}
PING ravneet • ONLINE
ravneet@contact:~$ availability

Contact / Let's Talk

HAVE AN IDEA?
LET'S MAKE IT REAL.

Whether it's a project, collaboration, question or simply an idea worth discussing, send me a message.

{contactConfig.availability} {contactConfig.location} • {contactConfig.timezone}
Start a conversation ↓
START A CONVERSATION
{/* CONTACT INFO */}

EMAIL

{contactConfig.email}

Best for: Projects / Business

ZYPHRON

Cloud / Hosting

Ask about Zyphron

LOCATION

{contactConfig.location}

{contactConfig.timezone} • {contactConfig.responseTime}

{/* METHOD CARDS */}
{[ { name:"Email", best:"Projects / Business", href:`mailto:${contactConfig.email}`, label:"Send Email →" }, { name:"LinkedIn", best:"Professional", href: contactConfig.socials.linkedin, label:"Connect →" }, { name:"GitHub", best:"Code / Projects", href: contactConfig.socials.github, label:"View GitHub →" }, { name:"Zyphron", best:"Cloud / Hosting", href: contactConfig.socials.zyphron, label:"Visit →" }, ].map(m=>(

{m.name}

Best for: {m.best}

 ))}
{/* PROJECT BRIEF vs QUICK */}

HAVE A PROJECT IN MIND?

Detailed brief — 4 steps, no reload.

{/* FORM */}
{/* step indicator */}
{[0,1,2,3].map(s=>( ))}
0{step+1} / 04
{/* success */} {success ? (

MESSAGE SENT.

Thanks for reaching out. Your message has been received.
I'll get back to you as soon as possible.

Back Home → Explore My Work →
) : errorMsg ? (

SOMETHING WENT WRONG.

{errorMsg}

Use Email
) : step===0 ? (

WHAT CAN I HELP WITH?

Select one — cards animate ✓

{intents.map(o=>( ))}
{errors.intent &&

{errors.intent}

}
) : step===1 ? (

TELL ME ABOUT IT

{/* honeypot hidden */} setHoneypot(e.target.value)} tabIndex={-1} autoComplete="off" aria-hidden className="hidden" />
setForm({...form, name:e.target.value})} autoComplete="name" placeholder="Ravneet" className={`mt-1 w-full rounded-xl bg-black/40 border px-3 py-2.5 text-sm text-white placeholder:text-white/30 outline-none ${errors.name ? "border-red-400/50" : "border-white/10 focus:border-white/20"}`} /> {errors.name &&

{errors.name}

}
setForm({...form, email:e.target.value})} autoComplete="email" type="email" placeholder="you@example.com" className={`mt-1 w-full rounded-xl bg-black/40 border px-3 py-2.5 text-sm text-white placeholder:text-white/30 outline-none ${errors.email ? "border-red-400/50" : "border-white/10 focus:border-white/20"}`} /> {errors.email &&

{errors.email}

}
setForm({...form, company:e.target.value})} placeholder="Optional" className="mt-1 w-full rounded-xl bg-black/40 border border-white/10 px-3 py-2.5 text-sm text-white placeholder:text-white/30 outline-none focus:border-white/20" />
setForm({...form, subject:e.target.value})} placeholder="Website — Zyphron idea" className={`mt-1 w-full rounded-xl bg-black/40 border px-3 py-2.5 text-sm text-white placeholder:text-white/30 outline-none ${errors.subject ? "border-red-400/50" : "border-white/10 focus:border-white/20"}`} /> {errors.subject &&

{errors.subject}

}