{[0, 1, 2, 3, 4].map(i => (

))}

); } if (variant === 'compass') { return (

); } // horizon (default) return (

32.7°N · Pacific · 06:12

); } // ─── Score dial (animates on scroll into view) ──────── function ScoreDial({ from = 12, to = 67, label = 'AI Visibility Score', delay = 0 }) { const [val, setVal] = React.useState(from); const ref = React.useRef(null); React.useEffect(() => { const el = ref.current; if (!el) return; const obs = new IntersectionObserver(([e]) => { if (e.isIntersecting) { setTimeout(() => { const start = performance.now(); const dur = 1400; const tick = (t) => { const p = Math.min(1, (t - start) / dur); const eased = 1 - Math.pow(1 - p, 3); setVal(Math.round(from + (to - from) * eased)); if (p < 1) requestAnimationFrame(tick); }; requestAnimationFrame(tick); }, delay); obs.disconnect(); } }, { threshold: 0.4 }); obs.observe(el); return () => obs.disconnect(); }, [from, to, delay]); const pct = val / 100; const R = 70, C = 2 * Math.PI * R; return (

{val}

/ 100

{label}

); } // ─── Audit input ───────────────────────────────────── function AuditInput() { const [url, setUrl] = React.useState(''); const [email, setEmail] = React.useState(''); const [state, setState] = React.useState('idle'); // idle | error | sent const submit = (e) => { e.preventDefault(); try { const u = url.trim(); if (!/^https?:\/\//i.test(u) && !/\./.test(u)) { setState('error'); return; } if (!/\S+@\S+\.\S+/.test(email)) { setState('error'); return; } setState('sent'); } catch { setState('error'); } }; if (state === 'sent') { return (

Got it. We'll email you results within 24 hours.

We run 25 queries across 5 AI engines. You'll get a PDF + a 15-min walkthrough offer.

); } return ( ); } // ─── FAQ accordion ─────────────────────────────────── function FAQ({ items }) { const [open, setOpen] = React.useState(0); return (

{items.map((it, i) => (

{open === i && (

{it.a}

)}

))}

); } // ─── Pricing toggle + cards ────────────────────────── const PRICING_TIERS = [ { name: 'Starter', monthly: 1500, blurb: 'Local visibility for single-location clinics.', bullets: ['25 queries / 5 engines monthly', 'Weekly citation tracking', '2 content briefs / mo', 'Quarterly strategy call', 'Email support'] }, { name: 'Growth', monthly: 2750, blurb: 'For clinics ready to dominate their city.', featured: true, bullets: ['50 queries / 5 engines weekly', 'Daily citation tracking', '4 content pieces / mo', 'Monthly strategy call', 'Schema + review ops', 'Email support'] }, { name: 'Scale', monthly: 4500, blurb: 'Multi-location or competitive markets.', bullets: ['100 queries / 5 engines weekly', 'Real-time citation monitoring', '8 content pieces / mo', 'Bi-weekly strategy call', 'Full-funnel optimization', 'Dedicated email and Slack'] }, ]; function PricingCards() { const [annual, setAnnual] = React.useState(false); const save = 0.15; // 15% off annual return (

{[['Monthly', false], ['Annual — save 15%', true]].map(([l, v]) => ( ))}

{PRICING_TIERS.map(t => { const price = annual ? Math.round(t.monthly * (1 - save)) : t.monthly; return (

{t.featured && (

Most popular

)}

{t.name}

${price.toLocaleString()}

/mo

{annual && (

Billed annually · ${(price*12).toLocaleString()}/yr

)}

{t.blurb}

✓ {b}

Get started →

+ $2,500 one-time site build

); })}

); } // ─── Tweaks panel ───────────────────────────────────── function TweaksPanel() { const [visible, setVisible] = React.useState(false); const [settings, setSettings] = React.useState(() => { try { return JSON.parse(localStorage.getItem('psa_tweaks') || '{}'); } catch { return {}; } }); const defaults = { hero: 'horizon', density: 'normal', art: 'on' }; const s = { ...defaults, ...settings }; React.useEffect(() => { const handler = (e) => { if (e.data?.type === '__activate_edit_mode') setVisible(true); if (e.data?.type === '__deactivate_edit_mode') setVisible(false); }; window.addEventListener('message', handler); window.parent.postMessage({ type: '__edit_mode_available' }, '*'); return () => window.removeEventListener('message', handler); }, []); React.useEffect(() => { localStorage.setItem('psa_tweaks', JSON.stringify(s)); document.body.classList.toggle('dense', s.density === 'dense'); document.body.classList.toggle('minimal', s.art === 'off'); document.body.dataset.hero = s.hero; window.dispatchEvent(new CustomEvent('psa-tweaks', { detail: s })); }, [s.hero, s.density, s.art]); const update = (k, v) => setSettings(p => ({ ...p, [k]: v })); if (!visible) return null; return (

Tweaks

Page controls

{[['Horizon', 'horizon'], ['Bars', 'bars'], ['Compass', 'compass']].map(([l, v]) => ( update('hero', v)}>{l} ))} {[['Normal', 'normal'], ['Dense', 'dense']].map(([l, v]) => ( update('density', v)}>{l} ))} {[['On', 'on'], ['Minimal', 'off']].map(([l, v]) => ( update('art', v)}>{l} ))}

); } function Row({ label, children }) { return (

{label}

{children}

); } function Chip({ active, onClick, children }) { return ( ); } // Hook to read current hero variant (updates on tweak) function useHeroVariant() { const [v, setV] = React.useState(() => { try { return JSON.parse(localStorage.getItem('psa_tweaks') || '{}').hero || 'horizon'; } catch { return 'horizon'; } }); React.useEffect(() => { const h = (e) => setV(e.detail.hero); window.addEventListener('psa-tweaks', h); return () => window.removeEventListener('psa-tweaks', h); }, []); return v; } Object.assign(window, { PSA_NAVY: NAVY, PSA_CREAM: CREAM, PSA_CITRUS: CITRUS, PSA_SURF: SURF, PSA_FOG: FOG, PSA_GRAPH: GRAPH, Logo, Nav, Footer, HeroArt, ScoreDial, AuditInput, FAQ, PricingCards, TweaksPanel, useHeroVariant, });