/* ===================================================================== Contact — Split view: AI chat agent + form that fills itself live. Mobile: agent-first with floating form preview. ===================================================================== */ const { useEffect: useEffectCt, useRef: useRefCt, useState: useStateCt } = React; // `optional: true` means the user can skip via a one-click button const FIELDS = [ { k: 'name', label: 'Name', type: 'text', placeholder: 'Your full name' }, { k: 'business', label: 'Business name', type: 'text', placeholder: 'Company / business' }, { k: 'email', label: 'Email', type: 'email', placeholder: 'you@example.com' }, { k: 'phone', label: 'Phone', type: 'tel', placeholder: '(405) 555-0100', optional: true }, { k: 'projectType', label: 'What kind of site', type: 'select', options: ['Simple one-pager', 'Full business website', 'Online store', 'Listings (cars, real estate, etc.)', 'Google presence & SEO only', 'AI helper / chatbot only', 'Custom / not sure yet'] }, { k: 'budget', label: 'Budget range', type: 'select', options: ['Under $3k', '$3–8k', '$8–25k', '$25k+', 'Not sure yet'] }, { k: 'timeline', label: 'Timeline', type: 'select', options: ['ASAP (this month)', '1–3 months', '3–6 months', 'Flexible'] }, { k: 'description', label: 'What you need', type: 'textarea', placeholder: 'Tell us a bit about your business and what you need' }, { k: 'referral', label: 'How did you hear about us', type: 'select', options: ['Google search', 'Referral', 'Social media', 'Saw our work', 'Other'], optional: true }, ]; // Infer business category from business name — returns a sub-type question the // agent asks opportunistically before `projectType`. function inferBusinessContext(businessName) { if (!businessName) return null; const n = businessName.toLowerCase(); const categories = [ { match: /(design|studio|creative|graphic|decal|print|sign)/, label: 'design / creative', chips: ['Graphic / logo design', 'Decals & signage', 'Architectural / interior', 'Auto / car wraps', 'Fine art / illustration', 'Web / digital design'] }, { match: /(auto|motor|garage|tire|body shop|detail|car wash|dealership)/, label: 'automotive', chips: ['Repair / mechanic shop', 'Dealership / sales', 'Detailing / car wash', 'Body shop / collision', 'Tires / parts', 'Custom / performance'] }, { match: /(realty|real estate|homes|properties|realtor|broker)/, label: 'real estate', chips: ['Residential agent', 'Commercial broker', 'Property management', 'New construction', 'Short-term rentals'] }, { match: /(law|legal|attorney|firm)/, label: 'legal', chips: ['Personal injury', 'Family law', 'Business / corporate', 'Criminal defense', 'Estate / probate'] }, { match: /(restaurant|cafe|café|coffee|bbq|bar|grill|kitchen|bakery|pizza|taco|deli|eatery)/, label: 'food / hospitality', chips: ['Sit-down restaurant', 'Fast casual / counter', 'Coffee / bakery', 'Food truck', 'Catering', 'Bar / brewery'] }, { match: /(salon|spa|barber|beauty|nails|hair|wellness)/, label: 'beauty / wellness', chips: ['Hair salon / barber', 'Nail salon', 'Day spa', 'Medical spa', 'Massage / wellness'] }, { match: /(fitness|gym|yoga|crossfit|pilates|training)/, label: 'fitness', chips: ['Gym / membership', 'Personal training', 'Yoga / pilates studio', 'CrossFit / group', 'Physical therapy'] }, { match: /(clinic|dental|dentist|medical|health|chiro|physio|vet)/, label: 'healthcare', chips: ['Dental practice', 'Medical clinic', 'Chiropractic', 'Veterinary', 'Mental health'] }, { match: /(construction|build|contractor|roof|plumb|hvac|electric|remodel|paint)/, label: 'trades / construction', chips: ['General contractor', 'Roofing', 'Plumbing / HVAC', 'Electrical', 'Remodeling', 'Painting'] }, { match: /(boutique|shop|store|apparel|clothing|goods|market)/, label: 'retail', chips: ['Clothing / apparel', 'Home goods', 'Specialty / gift shop', 'Online-first brand', 'Farmers market / local'] }, { match: /(consult|advisory|strateg|coach)/, label: 'consulting', chips: ['Business consulting', 'Executive coaching', 'Marketing / growth', 'Financial advisory', 'Ops / strategy'] }, { match: /(church|ministry|nonprofit|foundation|community)/, label: 'nonprofit / faith', chips: ['Church / ministry', 'Nonprofit org', 'Community group', 'Foundation'] }, ]; for (const c of categories) { if (c.match.test(n)) { return { label: c.label, chips: [...c.chips, 'Something else — I\'ll describe it later'] }; } } return null; } // Agent tones const TONES = [ { k: 'neutral', label: 'Professional', desc: 'Confident, technical, unfussy — our default' }, { k: 'warm', label: 'Warm', desc: 'Conversational, fewer words, human' }, { k: 'dry', label: 'Dry wit', desc: 'Midwest deadpan' }, ]; // Tone-specific prompts (agent asks questions this way) function agentPrompts(tone) { const P = { neutral: { intro: "I'll get your project scoped in about 2 minutes. Start whenever you're ready — I'll ask the essentials, fill the form on your right, and a human will answer within one business day.", name: "First — who am I talking to? Just your full name.", business: "And your business or company name?", email: "Best email to reach you?", phone: "Phone number — in case a quick call is faster. (Optional.)", projectType: "What kind of site are you thinking? A simple one-pager, a full business website, online store, a listings site for cars or real estate — or something custom? Not sure is a fine answer.", budget: "Ballpark budget? A rough number helps us suggest the right fit — no commitment.", timeline: "When would you like to launch? ASAP, a few months out, flexible?", currentSite: "Do you have a website right now? If so, drop the link. (Optional.)", description: "Last one — in a few sentences, what are you hoping this website will do for your business?", referral: "How'd you hear about us?", done: "All set. I've filled in the form on the right — review it, edit anything that's off, and send it. We answer in a business day.", }, warm: { intro: "Hey — I'll help you get this over the wall. Two minutes, tops. Ready?", name: "What's your name?", business: "Business name?", email: "Where should we email you?", phone: "Phone number? Totally optional.", projectType: "What are we building? One-pager, listings, store, internal tool, data stuff, AI — whatever fits.", budget: "Rough budget? Doesn't have to be exact.", timeline: "When do you need it?", currentSite: "Current site URL? If you have one.", description: "Tell me about the project — just a couple sentences.", referral: "How'd you find us?", done: "That's it! Look over what I filled in on the right, tweak anything, hit send. We'll reply in a day.", }, dry: { intro: "Fine. Two minutes. I ask, you answer, the form fills itself. That's the arrangement.", name: "Name. Full one.", business: "Business name. If there is one.", email: "Email. Where we'll send the response you definitely won't miss.", phone: "Phone. Optional. Oklahoma area code implied.", projectType: "What are we building? Small site, listings, store, dashboard, data pipeline, AI — the usual.", budget: "Budget. Ballpark. Nobody's holding you to it.", timeline: "Timeline. When does this need to exist?", currentSite: "Current site. URL. Skip if there isn't one.", description: "Describe the thing. Couple sentences.", referral: "How'd you find us? Not that it matters.", done: "Done. Form's on the right. Check it, send it. We reply in a business day. That's the deal.", }, }; return P[tone] || P.neutral; } function Contact() { // stage: 'choose' -> pick Agent or Form // 'tone' -> Agent path: pick tone (auto-starts convo) // 'chat' -> conversation running // 'form' -> direct-form path const [stage, setStage] = useStateCt('choose'); const [tone, setTone] = useStateCt(null); const [formRevealed, setFormRevealed] = useStateCt(false); const [values, setValues] = useStateCt({}); const [skipped, setSkipped] = useStateCt({}); const [submitted, setSubmitted] = useStateCt(false); const [submitting, setSubmitting] = useStateCt(false); const ref = useRefCt(null); useReveal(ref); const submit = () => { setSubmitting(true); setTimeout(() => { setSubmitting(false); setSubmitted(true); }, 1600); }; const activeFields = FIELDS; return (
{/* Background shader */}
{/* Header */}
Tell us what
you're building.} kicker="Free 30-minute consult. We answer in one business day. Talk to our intake agent below, or fill out the form directly — your choice." right={ stage !== 'choose' ? ( ) : null } />
{submitted ? : ( <> {stage === 'choose' && ( setStage('tone')} onForm={() => setStage('form')} /> )} {stage === 'tone' && ( { setTone(k); setStage('chat'); }} /> )} {stage === 'chat' && (
setFormRevealed(true)} />
)} {stage === 'form' && (
)} )}
); } /* ===== Stage 1: Choose Agent or Form ===== */ function ChooseStage({ onAgent, onForm }) { const Card = ({ glyph, eyebrow, title, desc, cta, onClick, accent }) => ( ); return (
Talk to our intake agent.} desc="A two-minute conversation. The agent asks, you answer, and an inquiry form fills itself out live. This is one of the things we build." cta="Start conversation" onClick={onAgent} /> Fill the form yourself.} desc="Prefer the classic route? Skip the chat and type directly into the inquiry form. Same inbox, same one-business-day reply." cta="Open form" onClick={onForm} />
); } /* ===== Stage 2: Pick tone — auto-starts conversation ===== */ function ToneStage({ onPick }) { return (
— STEP 2 OF 2 · PICK A VOICE
How would you like the agent to speak?

Pick one — the conversation starts immediately.

{TONES.map((t, i) => { const samples = { neutral: "First — who am I talking to? Just your full name.", warm: "Hey — what's your name?", dry: "Name. Full one.", }; return ( ); })}
); } // ----- AGENT PANE ----- // Driven by POST /api/chat — the model returns the next reply, 3–6 tailored // click-chips, any fields it extracted from the last user turn, and a done // flag. Scripted prompts below are kept as a graceful fallback for local dev // without AI_GATEWAY_API_KEY set, or any upstream failure. // RFC-4122 v4 UUID. Used as the client-generated session key for chat-log // rows in Neon — one per conversation, regenerated on page refresh. function makeSessionId() { try { if (typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function') { return crypto.randomUUID(); } } catch (_) { /* fall through */ } // Fallback for older browsers — not cryptographically strong, but unique // enough for log keys, and the server validates the UUID shape anyway. const r = (n) => Math.floor(Math.random() * n).toString(16); const s = (n) => Array.from({ length: n }, () => r(16)).join(''); return `${s(8)}-${s(4)}-4${s(3)}-${(8 + Math.floor(Math.random() * 4)).toString(16)}${s(3)}-${s(12)}`; } function AgentPane({ tone, setTone, activeFields, values, setValues, skipped, setSkipped, onSubmit, submitting, onFirstQuestion }) { const [messages, setMessages] = useStateCt([]); const [suggestions, setSuggestions] = useStateCt([]); const [activeFieldKey, setActiveFieldKey] = useStateCt(null); const [done, setDone] = useStateCt(false); const [input, setInput] = useStateCt(''); const [typing, setTyping] = useStateCt(false); const [apiDown, setApiDown] = useStateCt(false); const scrollRef = useRefCt(null); const bootedRef = useRefCt(false); const firedFirstQ = useRefCt(false); const sessionIdRef = useRefCt(null); if (!sessionIdRef.current) sessionIdRef.current = makeSessionId(); // Mirror state into refs so async callbacks always see the latest snapshot // without re-subscribing to the fetch in useEffect. const valuesRef = useRefCt(values); valuesRef.current = values; const skippedRef = useRefCt(skipped); skippedRef.current = skipped; const toneRef = useRefCt(tone); toneRef.current = tone; useEffectCt(() => { if (scrollRef.current) scrollRef.current.scrollTop = scrollRef.current.scrollHeight; }, [messages, typing, suggestions]); const schemaForApi = activeFields.map(f => ({ key: f.k, label: f.label, type: f.type, optional: !!f.optional, options: f.options, })); const isSkipAnswer = (s) => { const v = String(s || '').trim().toLowerCase(); return v === '—' || v === 'skip' || v === 'skip for now' || v === 'skip it'; }; // Scripted fallback — used when /api/chat is unavailable. Walks the same // field list with the hardcoded tone prompts from above. const scriptedStep = () => { const prompts = agentPrompts(toneRef.current); const v = valuesRef.current; const sk = skippedRef.current; const next = activeFields.find(f => !v[f.k] && !sk[f.k]); if (!next) { setMessages(m => [...m, { r: 'bot', t: prompts.done, id: Date.now() + Math.random() }]); setDone(true); setSuggestions([]); setActiveFieldKey(null); return; } const text = prompts[next.k] || `Tell me about ${next.label.toLowerCase()}.`; const chips = next.options ? [...next.options, ...(next.optional ? ['Skip for now'] : [])] : (next.optional ? ['Skip for now'] : []); setMessages(m => [...m, { r: 'bot', t: text, id: Date.now() + Math.random() }]); setSuggestions(chips); setActiveFieldKey(next.k); }; const callAgent = async (transcript) => { setTyping(true); try { const res = await fetch('/api/chat', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ sessionId: sessionIdRef.current, messages: transcript.map(m => ({ role: m.r === 'bot' ? 'assistant' : 'user', content: m.t, })), values: valuesRef.current, skipped: Object.keys(skippedRef.current).filter(k => skippedRef.current[k]), tone: toneRef.current, schema: schemaForApi, }), }); if (!res.ok) throw new Error('agent_' + res.status); const data = await res.json(); // Fold any fields the model pulled out of the last user message into // the form. Only accept keys the schema knows about. if (data.extracted && typeof data.extracted === 'object') { const validKeys = new Set(activeFields.map(f => f.k)); const clean = {}; Object.keys(data.extracted).forEach(k => { const v = data.extracted[k]; if (validKeys.has(k) && typeof v === 'string' && v.trim()) clean[k] = v.trim(); }); if (Object.keys(clean).length) { setValues(v => ({ ...v, ...clean })); } } const reply = typeof data.reply === 'string' && data.reply.trim() ? data.reply : '…'; setMessages(m => [...m, { r: 'bot', t: reply, id: Date.now() + Math.random() }]); setSuggestions(Array.isArray(data.suggestions) ? data.suggestions.slice(0, 6) : []); setActiveFieldKey(typeof data.nextField === 'string' ? data.nextField : null); setDone(Boolean(data.done)); } catch (err) { if (!apiDown && typeof console !== 'undefined') { console.warn('[intake] live agent unavailable, scripted fallback:', err); } setApiDown(true); scriptedStep(); } finally { setTyping(false); if (!firedFirstQ.current) { firedFirstQ.current = true; onFirstQuestion && onFirstQuestion(); } } }; // Boot conversation once tone is picked. useEffectCt(() => { if (bootedRef.current) return; bootedRef.current = true; callAgent([]); }, []); const answer = (text) => { const val = String(text || '').trim(); if (!val || done || typing) return; if (activeFieldKey) { if (isSkipAnswer(val)) { setSkipped(s => ({ ...s, [activeFieldKey]: true })); skippedRef.current = { ...skippedRef.current, [activeFieldKey]: true }; } else { setValues(v => ({ ...v, [activeFieldKey]: val })); valuesRef.current = { ...valuesRef.current, [activeFieldKey]: val }; } } const nextTranscript = [...messages, { r: 'user', t: val, id: Date.now() + Math.random() }]; setMessages(nextTranscript); setSuggestions([]); setInput(''); callAgent(nextTranscript); }; const activeField = activeFieldKey ? activeFields.find(f => f.k === activeFieldKey) : null; const filledCount = activeFields.filter(f => values[f.k]).length; const accountedCount = activeFields.filter(f => values[f.k] || skipped[f.k]).length; const progressPct = Math.min(100, (accountedCount / Math.max(1, activeFields.length)) * 100); return (
{/* Header */}
M
INTAKE AGENT
{apiDown ? 'OFFLINE' : 'LIVE'}
{/* Messages */}
{messages.map((m) => )} {typing && }
{/* Input */} {!done && (
{/* Tailored chips — the primary input. Typing is the fallback. */} {suggestions.length > 0 && (
{suggestions.map(o => ( ))}
)}
setInput(e.target.value)} onKeyDown={e => { if (e.key === 'Enter') answer(input); }} placeholder={activeField ? `Or type your ${activeField.label.toLowerCase()}...` : 'Type your answer...'} disabled={typing} style={{ flex: 1, background: 'transparent', border: 'none', outline: 'none', color: 'var(--fg-1)', fontFamily: 'var(--font-body)', fontSize: 14, padding: '10px 0' }}/> {activeField?.optional && ( )}
{/* Progress — tracks filled fields, not question index, so extracted multi-fills show up immediately. */}
{filledCount} / {activeFields.length}
)} {done && (
{submitting ? <> SENDING... : '✓ Send inquiry'}
)}
); } function Message({ m }) { const isBot = m.r === 'bot'; const [shown, setShown] = useStateCt(isBot ? '' : m.t); useEffectCt(() => { if (!isBot) return; let i = 0; const speed = 12 + Math.random() * 12; const t = setInterval(() => { i++; setShown(m.t.slice(0, i)); if (i >= m.t.length) clearInterval(t); }, speed); return () => clearInterval(t); }, []); return (
{isBot ? '— AGENT' : '— YOU'}
{shown}{isBot && shown.length < m.t.length && }
); } function TypingIndicator() { return (
— AGENT
); } // ----- FORM PANE ----- function FormPane({ activeFields, values, setValues, skipped = {}, onSubmit, submitting, agentMode, revealed = true }) { const [justFilled, setJustFilled] = useStateCt({}); const prevValues = useRefCt({}); useEffectCt(() => { const filled = {}; Object.keys(values).forEach(k => { if (values[k] !== prevValues.current[k]) filled[k] = true; }); if (Object.keys(filled).length) { setJustFilled(f => ({ ...f, ...filled })); setTimeout(() => { setJustFilled({}); }, 1400); } prevValues.current = { ...values }; }, [values]); const handleChange = (k, v) => setValues(vs => ({ ...vs, [k]: v })); const canSubmit = activeFields.every(f => f.optional || values[f.k]); const accountedCount = activeFields.filter(f => values[f.k] || skipped[f.k]).length; return (
— INQUIRY FORM
{agentMode ? 'LIVE · AUTO-FILLING' : `${accountedCount} / ${activeFields.length} FILLED`}
{activeFields.map(f => ( handleChange(f.k, v)} justFilled={justFilled[f.k]} readOnly={agentMode}/> ))}
{submitting ? <> SENDING : 'Send inquiry →'} WE ANSWER IN 1 BUSINESS DAY
); } function FormField({ field, value, onChange, justFilled, readOnly }) { const [focus, setFocus] = useStateCt(false); const highlight = justFilled; const borderColor = highlight ? 'var(--accent)' : (focus ? 'var(--fg-2)' : 'var(--border-strong)'); const labelEl = (
{highlight && ( FILLING )}
); const commonStyle = { background: 'transparent', border: 'none', borderBottom: `1px solid ${borderColor}`, padding: '10px 0', color: 'var(--fg-1)', fontFamily: 'var(--font-display)', fontSize: 16, fontWeight: 400, outline: 'none', width: '100%', transition: 'border-color .25s, background .4s', backgroundColor: highlight ? 'color-mix(in oklab, var(--accent) 8%, transparent)' : 'transparent', }; return (
{labelEl} {field.type === 'textarea' ? (