/* eslint-disable */ // HAIQ — Contact modal (opens on any CTA click) const MODAL_COPY = { ua: { eyebrow: 'Консультація', title: "Зв'яжіться з нами", desc: "Заповніть форму — ми відповімо протягом 24 годин і обговоримо ваш проєкт.", labelName: "Ім'я *", labelPhone: 'Телефон *', labelEmail: 'Email *', labelMsg: 'Деталі запиту', placeName: "Ваше ім'я", placePhone: '+380 XX XXX XX XX', placeEmail: 'your@email.com', placeMsg: 'Розкажіть про ваш проєкт або задачу...', submit: 'Відправити заявку', sending: 'Відправляємо...', errMsg: 'Помилка. Спробуйте ще раз або напишіть нам у Telegram.', errName: "Введіть ваше ім'я", errPhone: 'Введіть коректний номер (+380XXXXXXXXX або 0XXXXXXXXX)', errEmail: 'Введіть коректний email', successTitle: 'Заявку отримано!', successDesc: "Ми зв'яжемося з вами протягом 24 годин.", close: 'Закрити', }, en: { eyebrow: 'Consultation', title: 'Get in touch', desc: "Fill in the form — we'll reply within 24 hours and discuss your project.", labelName: 'Name *', labelPhone: 'Phone *', labelEmail: 'Email *', labelMsg: 'Request details', placeName: 'Your name', placePhone: '+380 XX XXX XX XX', placeEmail: 'your@email.com', placeMsg: 'Tell us about your project or task...', submit: 'Send request', sending: 'Sending...', errMsg: 'Error. Please try again or message us on Telegram.', errName: 'Please enter your name', errPhone: 'Enter a valid number (+380XXXXXXXXX or 0XXXXXXXXX)', errEmail: 'Enter a valid email address', successTitle: 'Request received!', successDesc: "We'll get back to you within 24 hours.", close: 'Close', }, }; function validatePhone(v) { // Accepts: +380XXXXXXXXX, 380XXXXXXXXX, 0XXXXXXXXX (9 digits after prefix) return /^(\+?380|0)\d{9}$/.test(v.replace(/[\s\-()]/g, '')); } function validateEmail(v) { return /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/.test(v.trim()); } function ContactModal({lang}) { const langRef = React.useRef(lang); React.useEffect(() => { langRef.current = lang; }, [lang]); const [open, setOpen] = React.useState(false); const [source, setSource] = React.useState(''); const [name, setName] = React.useState(''); const [phone, setPhone] = React.useState(''); const [email, setEmail] = React.useState(''); const [message, setMessage] = React.useState(''); const [status, setStatus] = React.useState('idle'); // idle | loading | success | error const [errors, setErrors] = React.useState({}); React.useEffect(() => { window.openContactModal = (src) => { setSource(src || ''); setName(''); setPhone(''); setEmail(''); setMessage(''); setStatus('idle'); setErrors({}); setOpen(true); }; }, []); // Close on Escape React.useEffect(() => { if (!open) return; const handler = (e) => { if (e.key === 'Escape') setOpen(false); }; document.addEventListener('keydown', handler); document.body.style.overflow = 'hidden'; return () => { document.removeEventListener('keydown', handler); document.body.style.overflow = ''; }; }, [open]); if (!open) return null; const c = MODAL_COPY[langRef.current] || MODAL_COPY.ua; function validateField(field, value) { const c2 = MODAL_COPY[langRef.current] || MODAL_COPY.ua; if (field === 'name' && !value.trim()) return c2.errName; if (field === 'phone' && !validatePhone(value)) return c2.errPhone; if (field === 'email' && !validateEmail(value)) return c2.errEmail; return ''; } function blurField(field, value) { const err = validateField(field, value); setErrors(prev => ({...prev, [field]: err})); } async function submit(e) { e.preventDefault(); const nameErr = validateField('name', name); const phoneErr = validateField('phone', phone); const emailErr = validateField('email', email); if (nameErr || phoneErr || emailErr) { setErrors({ name: nameErr, phone: phoneErr, email: emailErr }); return; } setStatus('loading'); try { const res = await fetch('/api/leads', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ name, phone, email, message, source }), }); if (!res.ok) { const body = await res.json().catch(() => ({})); console.error('[ContactModal] POST /api/leads failed:', res.status, body); throw new Error(body.error || res.status); } setStatus('success'); } catch (err) { console.error('[ContactModal] submit error:', err); setStatus('error'); } } const inp = { width: '100%', boxSizing: 'border-box', background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(255,255,255,0.1)', borderRadius: 10, padding: '12px 14px', fontFamily: 'var(--font-sans)', fontSize: 14, color: '#fff', outline: 'none', transition: 'border-color 0.2s ease', }; return (
{ if (e.target === e.currentTarget) setOpen(false); }} style={{ position: 'fixed', inset: 0, zIndex: 2000, background: 'rgba(0,0,0,0.75)', backdropFilter: 'blur(10px)', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 20, animation: 'haiqModalIn 0.2s ease', }} >
{/* Close button */} {status === 'success' ? (
✓

{c.successTitle}

{c.successDesc}

) : ( <>
{c.eyebrow}

{c.title}

{c.desc}

{ setName(e.target.value); if (errors.name) setErrors(prev => ({...prev, name: ''})); }} placeholder={c.placeName} style={{...inp, borderColor: errors.name ? '#F87171' : 'rgba(255,255,255,0.1)'}} onFocus={e => e.target.style.borderColor = errors.name ? '#F87171' : 'rgba(129,140,248,0.6)'} onBlur={e => { blurField('name', name); if (!errors.name) e.target.style.borderColor = 'rgba(255,255,255,0.1)'; }} /> {errors.name &&

{errors.name}

}
{ setPhone(e.target.value); if (errors.phone) setErrors(prev => ({...prev, phone: ''})); }} placeholder={c.placePhone} type="tel" style={{...inp, borderColor: errors.phone ? '#F87171' : 'rgba(255,255,255,0.1)'}} onFocus={e => e.target.style.borderColor = errors.phone ? '#F87171' : 'rgba(129,140,248,0.6)'} onBlur={e => { blurField('phone', phone); if (!errors.phone) e.target.style.borderColor = 'rgba(255,255,255,0.1)'; }} /> {errors.phone &&

{errors.phone}

}
{ setEmail(e.target.value); if (errors.email) setErrors(prev => ({...prev, email: ''})); }} placeholder={c.placeEmail} type="email" style={{...inp, borderColor: errors.email ? '#F87171' : 'rgba(255,255,255,0.1)'}} onFocus={e => e.target.style.borderColor = errors.email ? '#F87171' : 'rgba(129,140,248,0.6)'} onBlur={e => { blurField('email', email); if (!errors.email) e.target.style.borderColor = 'rgba(255,255,255,0.1)'; }} /> {errors.email &&

{errors.email}

}