/* SKOPIA — Contact / Waitlist modal * * Global: window.openContactModal({ subject?, intent? }) * Listens for: a click on any element with data-contact-trigger, * or href="#contact" / href="#waitlist" / href="#signup" * (when intent is set via attr data-intent). */ const CONTACT_EMAIL = 'contact@skopia.com.au'; const INTENT_PRESETS = { general: { subject: 'SKOPIA — general enquiry', heading: 'Get in touch.', sub: 'Tell us what you need. We reply within one business day.' }, waitlist: { subject: 'SKOPIA — waitlist signup', heading: 'Join the waitlist.', sub: 'Build and Track are landing soon. Drop your details and we’ll be in touch the moment they’re ready.' }, sales: { subject: 'SKOPIA — volume pricing enquiry', heading: 'Talk to us.', sub: 'Volume pricing for teams of 10+, custom plans, procurement support — we’ll come back to you fast.' }, signup: { subject: 'SKOPIA Lens — early access', heading: 'Start with Lens.', sub: 'Drop your details and we’ll send a free Lens account by return.' }, }; const ContactModal = () => { const [open, setOpen] = useState(false); const [intent, setIntent] = useState('general'); const [submitted, setSubmitted] = useState(false); const [busy, setBusy] = useState(false); const [error, setError] = useState(null); const formRef = useRef(null); // ── Open / close API ─────────────────────────────────────── useEffect(() => { window.openContactModal = (opts = {}) => { const next = opts.intent && INTENT_PRESETS[opts.intent] ? opts.intent : 'general'; setIntent(next); setSubmitted(false); setError(null); setOpen(true); }; // Global click delegation — intercept hash anchors / data attrs const onClick = (e) => { // Walk up to find a clickable let el = e.target; while (el && el !== document.body) { if (el.matches && (el.matches('[data-contact-trigger]') || el.matches('a[href]'))) { const explicit = el.getAttribute('data-contact-trigger'); const href = el.getAttribute('href') || ''; let next = null; if (explicit) next = explicit; else if (href === '#contact') next = 'general'; else if (href === '#waitlist') next = 'waitlist'; else if (href === '#sales') next = 'sales'; else if (href === '#signup') next = 'signup'; if (next) { e.preventDefault(); window.openContactModal({ intent: next }); return; } } el = el.parentElement; } }; document.addEventListener('click', onClick, true); // Esc to close const onKey = (e) => { if (e.key === 'Escape') setOpen(false); }; document.addEventListener('keydown', onKey); return () => { document.removeEventListener('click', onClick, true); document.removeEventListener('keydown', onKey); }; }, []); // ── Body scroll lock ─────────────────────────────────────── useEffect(() => { if (open) { const prev = document.body.style.overflow; document.body.style.overflow = 'hidden'; return () => { document.body.style.overflow = prev; }; } }, [open]); const preset = INTENT_PRESETS[intent]; const handleSubmit = (e) => { e.preventDefault(); setError(null); setBusy(true); const fd = new FormData(formRef.current); const data = Object.fromEntries(fd.entries()); // Compose a mailto fallback so the message reliably reaches the inbox // even without a backend handler. const body = `Hi SKOPIA team,\n\n` + `Name: ${data.name}\n` + `Company: ${data.company || '—'}\n` + `Role: ${data.role || '—'}\n` + `Email: ${data.email}\n` + `Phone: ${data.phone || '—'}\n` + `Interested in: ${data.interest || '—'}\n` + `Team size: ${data.teamSize || '—'}\n` + `\nMessage:\n${data.message || '—'}\n`; const subject = encodeURIComponent(`${preset.subject}${data.company ? ' — ' + data.company : ''}`); const url = `mailto:${CONTACT_EMAIL}?subject=${subject}&body=${encodeURIComponent(body)}`; try { // Open the user's mail client in a new tab window.location.href = url; setSubmitted(true); } catch (err) { setError('Could not open your mail client. Please email ' + CONTACT_EMAIL + ' directly.'); } finally { setBusy(false); } }; if (!open) return null; const inputStyle = { width: '100%', padding: '11px 14px', fontFamily: 'var(--font-body)', fontSize: 14, color: '#1A1A2E', background: '#fff', border: '1px solid #E2E6F0', borderRadius: 4, outline: 'none', transition: 'border-color .15s, box-shadow .15s', }; const labelStyle = { display: 'block', fontFamily: 'var(--font-head)', fontWeight: 700, fontSize: 11, letterSpacing: 1.2, textTransform: 'uppercase', color: '#6B7280', marginBottom: 6, }; return (
{ if (e.target === e.currentTarget) setOpen(false); }} >
{/* Gradient accent bar */}
{/* Close button */} {!submitted ? ( <> {/* Header */}
{intent === 'waitlist' ? 'Waitlist' : intent === 'sales' ? 'Sales' : 'Contact'}

{preset.heading}

{preset.sub}

{/* Body — scrollable */}
{ e.target.style.borderColor = '#4A6FE8'; e.target.style.boxShadow = '0 0 0 3px rgba(74,111,232,0.15)'; }} onBlur={(e) => { e.target.style.borderColor = '#E2E6F0'; e.target.style.boxShadow = 'none'; }} />
{ e.target.style.borderColor = '#4A6FE8'; e.target.style.boxShadow = '0 0 0 3px rgba(74,111,232,0.15)'; }} onBlur={(e) => { e.target.style.borderColor = '#E2E6F0'; e.target.style.boxShadow = 'none'; }} />
{ e.target.style.borderColor = '#4A6FE8'; e.target.style.boxShadow = '0 0 0 3px rgba(74,111,232,0.15)'; }} onBlur={(e) => { e.target.style.borderColor = '#E2E6F0'; e.target.style.boxShadow = 'none'; }} />
{ e.target.style.borderColor = '#4A6FE8'; e.target.style.boxShadow = '0 0 0 3px rgba(74,111,232,0.15)'; }} onBlur={(e) => { e.target.style.borderColor = '#E2E6F0'; e.target.style.boxShadow = 'none'; }} />
{ e.target.style.borderColor = '#4A6FE8'; e.target.style.boxShadow = '0 0 0 3px rgba(74,111,232,0.15)'; }} onBlur={(e) => { e.target.style.borderColor = '#E2E6F0'; e.target.style.boxShadow = 'none'; }} />