// Shared UI components for OhMyGlass const { useState, useEffect, useLayoutEffect, useRef } = React; // ============== ICONS ============== const Icon = { Arrow: ({ size = 16 }) => ( ), Phone: ({ size = 16 }) => ( ), Play: ({ size = 24 }) => ( ), Check: ({ size = 24 }) => ( ), Menu: ({ size = 20 }) => ( ), X: ({ size = 20 }) => ( ), IG: ({ size = 18 }) => ( ), Google: ({ size = 24 }) => ( ), FB: ({ size = 18 }) => ( ), Star: ({ size = 14 }) => ( ), ChevronDown: ({ size = 18 }) => ( ), Message: ({ size = 18 }) => ( ), }; function SmsQuoteCta({ location, variant = 'outline' }) { const S = window.OMG_DATA.site; const href = window.OMG_smsHref(); const btnClass = variant === 'on-red' ? 'btn sms-btn sms-btn--on-red btn-xl' : variant === 'solid-red' ? 'btn btn-red btn-xl sms-btn' : 'btn btn-bone-out btn-xl sms-btn'; return (
Text us: {S.phoneDisplay}

{S.smsHelper}

); } // ============== NAV ============== function Nav({ page, setPage, urgency, onOpenTweaks }) { const [scrolled, setScrolled] = useState(false); const [menuOpen, setMenuOpen] = useState(false); const mobileMenuCloseRef = useRef(null); const hamburgerRef = useRef(null); const hadMenuOpenRef = useRef(false); useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 20); window.addEventListener('scroll', onScroll); return () => window.removeEventListener('scroll', onScroll); }, []); useEffect(() => { document.body.style.overflow = menuOpen ? 'hidden' : ''; return () => { document.body.style.overflow = ''; }; }, [menuOpen]); useEffect(() => { if (menuOpen) { hadMenuOpenRef.current = true; const onKey = (e) => { if (e.key === 'Escape') setMenuOpen(false); }; window.addEventListener('keydown', onKey); const t = requestAnimationFrame(() => mobileMenuCloseRef.current?.focus()); return () => { cancelAnimationFrame(t); window.removeEventListener('keydown', onKey); }; } if (hadMenuOpenRef.current) { hadMenuOpenRef.current = false; requestAnimationFrame(() => hamburgerRef.current?.focus()); } return undefined; }, [menuOpen]); const go = (p, anchor) => { setPage(p); setMenuOpen(false); window.scrollTo({ top: 0, behavior: 'smooth' }); if (anchor) setTimeout(() => { const el = document.getElementById(anchor); if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' }); }, 120); }; const navItems = [ ['Home', 'home'], ['Services', 'services'], ['Emergency', 'emergency'], ['Service Areas', 'services', 'areas'], ['Reviews', 'home', 'reviews'], ['Contact', 'contact'], ]; return ( <> ); } function EmergencyBar({ urgency }) { const level = Math.max(1, Math.min(5, urgency)); if (level === 1) return null; const T = window.OMG_DATA.trust; const msg = level >= 4 ? <>24/7 EMERGENCY · RAPID DISPATCH · BOARD-UP FREE : <>{T.responseTimeBar}; return (
{msg} · 647-803-2730 {level >= 3 && ( <> · 437-525-1255 )}
); } // ============== FOOTER ============== function Footer({ setPage }) { const go = (p) => { setPage(p); window.scrollTo({ top: 0 }); }; return ( ); } function floatCallOverlapsRedUnderlay(floatRect) { const markers = document.querySelectorAll('[data-float-underlay="red"]'); for (const el of markers) { const r = el.getBoundingClientRect(); if (r.bottom <= floatRect.top || r.top >= floatRect.bottom || r.right <= floatRect.left || r.left >= floatRect.right) continue; return true; } return false; } // ============== FLOAT CALL BUTTON ============== function FloatCall({ page = '' }) { const [visible, setVisible] = useState(false); const [onRedBg, setOnRedBg] = useState(false); const ref = useRef(null); useEffect(() => { const onScroll = () => setVisible(window.scrollY > 600); onScroll(); window.addEventListener('scroll', onScroll, { passive: true }); return () => window.removeEventListener('scroll', onScroll); }, []); useLayoutEffect(() => { const tick = () => { const el = ref.current; if (!el || !visible) { setOnRedBg(false); return; } setOnRedBg(floatCallOverlapsRedUnderlay(el.getBoundingClientRect())); }; tick(); window.addEventListener('scroll', tick, { passive: true }); window.addEventListener('resize', tick); return () => { window.removeEventListener('scroll', tick); window.removeEventListener('resize', tick); }; }, [visible, page]); return ( Call 24/7 · 647-803-2730 ); } // ============== QUOTE FORM ============== function QuoteForm({ compact = false, submitLocation }) { const [form, setForm] = useState({ name: '', phone: '', email: '', service: '', message: '' }); const [errors, setErrors] = useState({}); const [submitted, setSubmitted] = useState(false); const [loading, setLoading] = useState(true); useEffect(() => { const t = setTimeout(() => setLoading(false), 700); return () => clearTimeout(t); }, []); const validate = () => { const e = {}; if (!form.name.trim()) e.name = 'Required'; if (!form.phone.trim()) e.phone = 'Required'; else if (!/^[\d\s\-\(\)\+]{7,}$/.test(form.phone)) e.phone = 'Invalid phone'; if (!form.email.trim()) e.email = 'Required'; else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email)) e.email = 'Invalid email'; if (!form.service) e.service = 'Pick one'; return e; }; const onSubmit = (ev) => { ev.preventDefault(); const e = validate(); setErrors(e); if (Object.keys(e).length === 0) { if (typeof window.OMG_trackEvent === 'function') { window.OMG_trackEvent('quote_form_submit', { location: submitLocation || (compact ? 'compact' : 'contact'), }); } setSubmitted(true); } }; const field = (k) => ({ value: form[k], onChange: (ev) => setForm(f => ({ ...f, [k]: ev.target.value })), }); if (loading) return (
Loading secure form…
); if (submitted) return (

Quote request received.

Thanks {form.name.split(' ')[0] || 'friend'} — we've got it. For emergencies, our dispatch team prioritizes your message and reaches out as soon as possible. Otherwise expect a text or email within 2 business hours.

Or call now · 647-803-2730
); return (
Free quote · no obligation

Tell us what broke.

{errors.name && {errors.name}}
{errors.phone && {errors.phone}}
{errors.email && {errors.email}}
{errors.service && {errors.service}}