/* ContactModal — "Book a Demo" → contact form * - 3 fields: work email, full name, company * - GDPR consent (required) + marketing opt-in (optional) * - Free-email warning (non-blocking) * - Plan chip in header when opened from a pricing card * - Terminal-style submit log + confirmation * - Mobile: full-screen sheet · Desktop: centred modal * Mock submission: console.log + 800ms delay */ const FREE_EMAIL_DOMAINS = [ "gmail.com","googlemail.com","outlook.com","hotmail.com","live.com","msn.com", "yahoo.com","yahoo.co.uk","ymail.com","icloud.com","me.com","mac.com", "aol.com","protonmail.com","proton.me","mail.com","gmx.com","gmx.de", "zoho.com","yandex.com","yandex.ru","seznam.cz","centrum.sk","azet.sk", ]; const CM_COPY = { EN: { title: "Book a demo", sub: "Tell us a bit about you. We'll guide you through the interactive dashboard with demo data — and reply within 24 hours.", contactTitle: "Get in touch", contactSub: "Have a question, a partnership idea, or just want to say hello? Drop us a line — we read every message and reply within 24 hours.", quoteTitle: "Get a quote", quoteSub: "Tell us a bit about you and pick the plan you're interested in. We'll send a tailored quote within 24 hours.", quotePlanLabel: "Which plan are you interested in? (optional)", quotePlanAny: "Not sure yet", plan: "PLAN", email: "Work email", emailPh: "you@company.com", name: "Full name", namePh: "Jane Novak", company: "Company", companyPh: "Acme Corp", freeWarn: "Looks like a personal address. A work email gets a faster, more accurate response.", requiredEmail: "Email is required.", invalidEmail: "Please enter a valid email.", requiredName: "Please enter your name.", requiredCompany: "Please enter your company.", requiredConsent: "Please accept the data-processing terms to continue.", gdpr: "I agree to the processing of my data for the purpose of being contacted by AdScout.", marketing: "Send me occasional category-intelligence reports (optional).", privacy: "By submitting you agree to our Privacy Policy.", submit: "Send request", submitting: "Sending…", cancel: "Cancel", badge: "REQUEST_FORM // CONTACT", successTitle: "Request received.", successSub: "Our team will reach out within 24 hours at the email you provided.", successMeta: "REF", close: "Close", logs: [ "> establishing connection…", "> validating payload…", "> dispatching to ops_queue…", "> ack received. response window: 24h", ], }, SK: { title: "Rezervovať demo", sub: "Povedzte nám zopár vecí o sebe. Prevedieme vás interaktívnym dashboardom s demo dátami — a ozveme sa do 24 hodín.", contactTitle: "Kontaktujte nás", contactSub: "Máte otázku, nápad na spoluprácu alebo nás chcete len pozdraviť? Napíšte nám — čítame každú správu a odpovieme do 24 hodín.", quoteTitle: "Získať cenovú ponuku", quoteSub: "Povedzte nám zopár vecí o sebe a vyberte plán, ktorý vás zaujíma. Ozveme sa s ponukou do 24 hodín.", quotePlanLabel: "Ktorý plán vás zaujíma? (nepovinné)", quotePlanAny: "Ešte neviem", plan: "PLÁN", email: "Pracovný e-mail", emailPh: "vy@firma.com", name: "Meno a priezvisko", namePh: "Jana Nováková", company: "Firma", companyPh: "Acme s.r.o.", freeWarn: "Zdá sa, že je to osobná adresa. Pracovný e-mail dostane rýchlejšiu a presnejšiu odpoveď.", requiredEmail: "E-mail je povinný.", invalidEmail: "Zadajte platný e-mail.", requiredName: "Zadajte svoje meno.", requiredCompany: "Zadajte názov firmy.", requiredConsent: "Prosím odsúhlaste spracovanie údajov.", gdpr: "Súhlasím so spracovaním osobných údajov za účelom kontaktovania zo strany AdScout.", marketing: "Posielajte mi občasné category-intelligence reporty (nepovinné).", privacy: "Odoslaním súhlasíte s našimi zásadami ochrany osobných údajov.", submit: "Odoslať žiadosť", submitting: "Odosielam…", cancel: "Zrušiť", badge: "REQUEST_FORM // KONTAKT", successTitle: "Žiadosť prijatá.", successSub: "Náš tím sa vám ozve do 24 hodín na zadaný e-mail.", successMeta: "REF", close: "Zavrieť", logs: [ "> nadväzujem spojenie…", "> validujem dáta…", "> odosielam do ops_queue…", "> potvrdené. odozva do 24h", ], }, }; function ContactModal({ lang, open, plan, formType = "demo", onClose }) { const C = CM_COPY[lang] || CM_COPY.EN; const isQuote = formType === "quote"; const isContact = formType === "contact"; const planList = (PLANS && (PLANS[lang] || PLANS.EN)) || []; const [email, setEmail] = React.useState(""); const [name, setName] = React.useState(""); const [company, setCompany] = React.useState(""); const [selectedPlan, setSelectedPlan] = React.useState(""); const [gdpr, setGdpr] = React.useState(false); const [marketing, setMarketing] = React.useState(false); const [errors, setErrors] = React.useState({}); const [submitting, setSubmitting] = React.useState(false); const [logIdx, setLogIdx] = React.useState(-1); const [done, setDone] = React.useState(false); const [refId, setRefId] = React.useState(""); const dialogRef = React.useRef(null); const firstInputRef = React.useRef(null); // Reset every time it opens React.useEffect(() => { if (open) { setEmail(""); setName(""); setCompany(""); setSelectedPlan(plan || ""); setGdpr(false); setMarketing(false); setErrors({}); setSubmitting(false); setLogIdx(-1); setDone(false); setRefId(""); setTimeout(() => firstInputRef.current && firstInputRef.current.focus(), 60); document.body.style.overflow = "hidden"; } else { document.body.style.overflow = ""; } return () => { document.body.style.overflow = ""; }; }, [open, plan]); // Esc to close React.useEffect(() => { if (!open) return; const onKey = (e) => { if (e.key === "Escape" && !submitting) onClose && onClose(); }; window.addEventListener("keydown", onKey); return () => window.removeEventListener("keydown", onKey); }, [open, submitting, onClose]); if (!open) return null; const emailDomain = (email.split("@")[1] || "").toLowerCase().trim(); const isFreeEmail = !!emailDomain && FREE_EMAIL_DOMAINS.includes(emailDomain); const emailLooksValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email); const validate = () => { const e = {}; if (!email.trim()) e.email = C.requiredEmail; else if (!emailLooksValid) e.email = C.invalidEmail; if (!name.trim()) e.name = C.requiredName; if (!company.trim()) e.company = C.requiredCompany; if (!gdpr) e.gdpr = C.requiredConsent; setErrors(e); return Object.keys(e).length === 0; }; const submit = async (ev) => { ev && ev.preventDefault(); if (submitting || done) return; if (!validate()) return; setSubmitting(true); // Stream log lines for (let i = 0; i < C.logs.length; i++) { setLogIdx(i); // eslint-disable-next-line no-await-in-loop await new Promise((r) => setTimeout(r, 220)); } const payload = { form_type: formType, email: email.trim(), name: name.trim(), company: company.trim(), plan: (isQuote ? selectedPlan : plan) || null, gdpr_consent: gdpr, marketing_opt_in: marketing, lang, ts: new Date().toISOString(), source: typeof window !== "undefined" ? window.location.href : "", }; const WEB3FORMS_KEYS = { demo: '28121ad6-cd21-4c51-b9b8-4fe4ab0ce824', quote: '353bd520-12dc-42b0-a99f-c04bc4e8323f', contact: '28121ad6-cd21-4c51-b9b8-4fe4ab0ce824', }; const subjectMap = { demo: 'Book a Demo', quote: 'Get a Quote', contact: 'Contact', }; const res = await fetch('https://api.web3forms.com/submit', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ access_key: WEB3FORMS_KEYS[formType] || WEB3FORMS_KEYS.demo, subject: `AdScout — ${subjectMap[formType] || 'Form'} from ${payload.company}`, from_name: payload.name, reply_to: payload.email, email: payload.email, company: payload.company, plan: payload.plan || 'N/A', form_type: payload.form_type, gdpr_consent: payload.gdpr_consent, marketing_opt_in: payload.marketing_opt_in, source: payload.source, lang: payload.lang, }), }); if (!res.ok) { throw new Error('Submission failed'); } const ref = "AS-" + Math.random().toString(36).slice(2, 8).toUpperCase(); setRefId(ref); setDone(true); window.dataLayer = window.dataLayer || []; window.dataLayer.push({ event: 'form_submit', form_type: formType, user_data: { email_address: email.trim(), sha256_email_address: '', }, }); setSubmitting(false); }; const isMobile = typeof window !== "undefined" && window.innerWidth < 720; return (
{ if (e.target === e.currentTarget && !submitting) onClose && onClose(); }} style={{ position: "fixed", inset: 0, zIndex: 1000, background: "rgba(5,5,8,0.75)", backdropFilter: "blur(6px)", WebkitBackdropFilter: "blur(6px)", display: "flex", alignItems: isMobile ? "flex-end" : "center", justifyContent: "center", padding: isMobile ? 0 : 24, animation: "fadeInUp 200ms var(--ease-out)", }} >
{/* Lime halo behind dialog */}
{/* Header */}
{C.badge} {(plan || (isQuote && selectedPlan)) && ( {C.plan}: {String(plan || selectedPlan).toUpperCase()} )}
{/* Body — scrollable */}
{!done ? (

{isQuote ? C.quoteTitle : isContact ? C.contactTitle : C.title}

{isQuote ? C.quoteSub : isContact ? C.contactSub : C.sub}

{ setEmail(e.target.value); if (errors.email) setErrors((x) => ({ ...x, email: undefined })); }} style={cmInputStyle(!!errors.email)} /> { setName(e.target.value); if (errors.name) setErrors((x) => ({ ...x, name: undefined })); }} style={cmInputStyle(!!errors.name)} /> { setCompany(e.target.value); if (errors.company) setErrors((x) => ({ ...x, company: undefined })); }} style={cmInputStyle(!!errors.company)} /> {isQuote && (
{planList.map((pl) => ( setSelectedPlan(pl.n)} /> ))} setSelectedPlan("")} compact />
)}
{ setGdpr(v); if (errors.gdpr) setErrors((x) => ({ ...x, gdpr: undefined })); }} error={errors.gdpr} required > {C.gdpr} {C.marketing} {/* Submit log — visible while submitting */} {submitting && (
{C.logs.slice(0, logIdx + 1).map((l, i) => (
{l} {i === logIdx && ▋}
))}
)} ) : ( // Confirmation
ACK · 200_OK

{C.successTitle}

{C.successSub}

{refId} {email} {company} {(plan || (isQuote && selectedPlan)) && {String(plan || selectedPlan).toUpperCase()}}
)}
{/* Footer — sticky CTA */}
{!done ? (

{C.privacy}

 ) : ( )}
); } function cmInputStyle(hasError) { return { width: "100%", background: "var(--bg-1)", border: `1px solid ${hasError ? "rgba(239,68,68,0.55)" : "var(--border-hairline-strong)"}`, borderRadius: 10, padding: "12px 14px", font: "500 15px/1.2 var(--font-body)", color: "#fff", outline: "none", transition: "border-color 160ms var(--ease-out), box-shadow 160ms var(--ease-out), background 160ms var(--ease-out)", }; } function CMField({ label, error, warn, children }) { // Inject focus styling via onFocus/onBlur on the inner input — done at field level via wrapper const ref = React.useRef(null); React.useEffect(() => { const el = ref.current && ref.current.querySelector("input,textarea"); if (!el) return; const onFocus = () => { el.style.borderColor = "var(--brand-lime)"; el.style.boxShadow = "0 0 0 3px rgba(201,244,20,0.12)"; el.style.background = "var(--bg-2)"; }; const onBlur = () => { el.style.borderColor = error ? "rgba(239,68,68,0.55)" : "var(--border-hairline-strong)"; el.style.boxShadow = "none"; el.style.background = "var(--bg-1)"; }; el.addEventListener("focus", onFocus); el.addEventListener("blur", onBlur); return () => { el.removeEventListener("focus", onFocus); el.removeEventListener("blur", onBlur); }; }, [error]); return (
{children} {error && ( ! {error} )} {warn && !error && ( ~ {warn} )}
); } function CMCheck({ checked, onChange, children, error, required }) { return ( ); } function PlanCard({ plan, active, onClick, compact = false }) { const hl = plan.hl; return ( ); } function PlanChip({ label, meta, active, onClick }) { return ( ); } function CMRow({ k, children }) { return (
{k} {children}
); } Object.assign(window, { ContactModal });