/* ════════════════════════════════════════════════════════
InstantVisibilityCheck Widget
─────────────────────────────────────────────────────────
Calls /api/visibility-check (Vercel serverless → live AI search).
Real live AI search, not a simulation.
═══════════════════════════════════════════════════════ */
const PROCEDURES = [
'Rhinoplasty', 'Breast Augmentation', 'Facelift',
'Mommy Makeover', 'BBL', 'Body Contouring', 'Non-Surgical'
];
// Mirrors server-side scaling in /api/visibility-check.js so the form can
// preview the exact total count before submission.
function queriesPerProcedure(count) {
if (count <= 1) return 5;
if (count === 2) return 4;
if (count <= 4) return 3;
return 2;
}
const SAFE_RE = /^[A-Za-z0-9\s\-'.,&]+$/;
const sanitize = (s) => String(s || '').trim().slice(0, 80);
async function fetchVisibility({ practice, surgeon, zip, procedures, email }) {
const response = await fetch('/api/visibility-check', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
practice_name: practice,
surgeon_name: surgeon || null,
zip,
procedures,
email: email.trim()
})
});
if (!response.ok) {
let err;
try { err = await response.json(); } catch (e) { err = { error: 'Request failed' }; }
throw new Error(err.error || 'Something went wrong');
}
return await response.json();
}
const EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
function InstantVisibilityCheck({ gold }) {
const [stage, setStage] = React.useState('form');
const [form, setForm] = React.useState({
practice: '',
surgeon: '',
zip: '',
procedures: ['Rhinoplasty']
});
const [leadEmail, setLeadEmail] = React.useState('');
const [error, setError] = React.useState('');
const [result, setResult] = React.useState(null);
const [email, setEmail] = React.useState('');
const [emailErr, setEmailErr] = React.useState('');
const fieldStyle = {
fontFamily: "'SF Pro Text','-apple-system',BlinkMacSystemFont,sans-serif", fontSize: 14,
color: '#FAFAF8', background: 'rgba(255,255,255,0.04)',
border: '1px solid rgba(250,250,248,0.12)', borderRadius: 10,
padding: '12px 16px', outline: 'none', width: '100%',
transition: 'border-color 0.2s, background 0.2s',
};
function toggleProcedure(p) {
setForm(f => {
const has = f.procedures.includes(p);
const next = has ? f.procedures.filter(x => x !== p) : [...f.procedures, p];
return { ...f, procedures: next };
});
}
function handleSubmit(e) {
e.preventDefault();
const practice = sanitize(form.practice);
const surgeon = sanitize(form.surgeon);
const zip = sanitize(form.zip);
if (practice.length < 2 || practice.length > 80) return setError('Please enter your practice name (2–80 characters).');
if (!/^\d{5}$/.test(zip)) return setError('Please enter a valid 5-digit US ZIP code.');
if (surgeon && surgeon.length > 80) return setError('Surgeon name too long.');
if (!SAFE_RE.test(practice)) return setError('Practice name has invalid characters.');
if (surgeon && !SAFE_RE.test(surgeon)) return setError('Surgeon name has invalid characters.');
if (form.procedures.length === 0) return setError('Select at least one procedure.');
if (form.procedures.some(p => !PROCEDURES.includes(p))) return setError('Invalid procedure.');
if (!EMAIL_RE.test(leadEmail.trim())) return setError('Please enter a valid work email.');
setError('');
setStage('loading');
fetchVisibility({ practice, surgeon, zip, procedures: form.procedures, email: leadEmail })
.then((res) => {
setResult({ ...res, practice, surgeon, zip, procedures: form.procedures, leadEmail: leadEmail.trim() });
setStage('results');
})
.catch((err) => {
setError(err.message || 'Something went wrong. Please try again.');
setStage('form');
});
}
function handleClaim(e) {
e.preventDefault();
if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) return setEmailErr('Enter a valid email.');
setEmailErr('');
try {
const payload = { ...result, email, ts: new Date().toISOString() };
const KEY = 'arc_audit_claims';
const arr = JSON.parse(localStorage.getItem(KEY) || '[]');
arr.push(payload); localStorage.setItem(KEY, JSON.stringify(arr));
} catch(e) {}
setStage('submitted');
}
function reset() {
setStage('form'); setResult(null); setEmail(''); setLeadEmail('');
setForm({ practice: '', surgeon: '', zip: '', procedures: ['Rhinoplasty'] });
}
// ── FORM ─────────────────────────────────────────────────
if (stage === 'form') {
const procCount = form.procedures.length;
const perProc = queriesPerProcedure(procCount);
const totalQueries = procCount * perProc;
return (
Live AI Check · Powered by Perplexity
See if AI recommends your practice. Free. 30 seconds.
Enter your practice name, ZIP code, and the procedures you offer. Live searches run on Perplexity right now — and show you exactly what patients see when they ask AI for a surgeon, including who it recommends instead of you.
This live check runs on Perplexity. Your full Citation Gap Report tests all four major AI engines — ChatGPT, Gemini, Grok, and Google AI Overviews — across 50 queries (200 data points) for a defensible citation rate.
{/* Email capture */}
Get the full 50-query Citation Gap Report
Across all 5 AI engines (ChatGPT, Gemini, Grok, Google AI Overviews, and Perplexity). Free. Delivered in 7 days.