/* ============================================================ Tectus — scroll-pinned "How it works" (step-synced visuals) + continuous service marquee. Motion patterns adapted into the Tectus dark design system (original visuals & content). ============================================================ */ const { Eyebrow: HWEyebrow, Badge: HWBadge, Button: HWButton } = window.TectusDesignSystem_c42b34; const { STORE_LINKS } = window; const HIW_STEPS = [ { n: '01', t: 'Submit request details', d: 'Set time, location, armed or unarmed preference, personnel, and special notes — a complete request in minutes.' }, { n: '02', t: 'Match with vetted vendors', d: 'Your request is matched to licensed vendors with the right credentials, ranked by fit and availability.' }, { n: '03', t: 'Coordinate through the platform', d: 'Confirm details, message the vendor, and align on every requirement in one shared thread.' }, { n: '04', t: 'Track', d: 'Follow status from assigned to on site to completed — every step logged and audit-ready.' }, ]; /* ---------- shared panel chrome ---------- */ function HiwPanel({ title, right, children }) { return (
{title}
{right}
{children}
); } function HiwField({ icon, label, value, mono }) { return (
{label}
{value}
); } /* ---------- visual 1 — request ---------- */ function VisualRequest() { return ( Draft}>
Requirement
Unarmed
Armed
Estimated
$2,100
Submit request
); } /* ---------- visual 2 — match ---------- */ const CANDIDATES = [ { in: 'SV', name: 'Sentinel Vetted', meta: 'Executive · Armed', match: '98%', best: true }, { in: 'AP', name: 'Apex Protection', meta: 'Event · Armed', match: '94%', best: false }, { in: 'GL', name: 'Guardline Security', meta: 'Patrol · Unarmed', match: '89%', best: false }, ]; function VisualMatch() { return ( 3 candidates}> {CANDIDATES.map((c) => (
{c.in}
{c.name} {c.best && Best match}
{['Licensed', 'Insured'].map((b) => ( {b} ))} · {c.meta}
{c.match}
))}
Assign Sentinel Vetted
); } /* ---------- visual 3 — coordinate ---------- */ function VisualCoordinate() { return ( RQ-2048}>
SV
Two close-protection agents confirmed. We'll arrive 30 min ahead for a site sweep.
You
Perfect. Point of contact is at the north entrance.
Requirements confirmed
{['Access details shared', 'Dress code: business formal', 'On-site contact assigned'].map((r) => (
{r}
))}
); } /* ---------- visual 4 — track ---------- */ const TRACK = [ { t: 'Requested', s: '19:02', state: 'done' }, { t: 'Vendor assigned', s: '19:08', state: 'done' }, { t: 'On site', s: '19:34', state: 'active' }, { t: 'Completed', s: 'Est. 01:00', state: 'pending' }, ]; function VisualTrack() { return ( On site}>
{TRACK.map((r, i) => { const done = r.state === 'done', active = r.state === 'active'; const color = done ? 'var(--color-success)' : active ? 'var(--color-primary)' : 'var(--color-text-faint)'; return (
{done && } {active && } {i < TRACK.length - 1 && }
{r.t}
{r.s}
); })}
Logged & audit-ready Updated 14s ago
); } const HIW_VISUALS = [VisualRequest, VisualMatch, VisualCoordinate, VisualTrack]; /* ---------- how it works — scroll-pinned; each scroll advances a step ---------- */ function HowItWorksPinned() { const [active, setActive] = useState(0); const [progress, setProgress] = useState(0); const secRef = useRef(null); const [inView, setInView] = useState(false); const DURATION = 6000; // ms per step for auto-advance // reveal + pause auto-advance when off-screen useEffect(() => { const el = secRef.current; if (!el) return; const io = new IntersectionObserver(([e]) => setInView(e.isIntersecting), { threshold: 0.35 }); io.observe(el); return () => io.disconnect(); }, []); // auto-advance the active tab with a progress bar useEffect(() => { if (!inView) return; let raf = 0, start = performance.now(); const tick = (now) => { const p = Math.min(1, (now - start) / DURATION); setProgress(p); if (p >= 1) { start = now; setActive((a) => (a + 1) % HIW_STEPS.length); } raf = requestAnimationFrame(tick); }; raf = requestAnimationFrame(tick); return () => cancelAnimationFrame(raf); }, [inView, active]); const pick = (i) => { setActive(i); setProgress(0); }; const V = HIW_VISUALS[active]; return (
{/* desktop / tablet: Apollo-style tabbed feature layout */}
How it works

A structured workflow, end to end

{/* tab row */}
{HIW_STEPS.map((s, i) => { const on = i === active; return ( ); })}
{/* large swapping visual panel */}
{/* mobile: stacked */}
How it works

A structured workflow, end to end

{HIW_STEPS.map((s, i) => { const V = HIW_VISUALS[i]; return (
{s.n}

{s.t}

{s.d}

); })}
); } /* ---------- service marquee ---------- */ function Marquee() { const items = ['Executive protection', 'Event security', 'Mobile patrol', 'Retail security', 'Alarm response', 'Corporate security', 'Fire watch']; const loop = [...items, ...items]; return (
{loop.map((t, i) => ( {t} ))}
); } /* ---------- video section (placeholder) ---------- */ function VideoSection() { const videoRef = useRef(null); useEffect(() => { const v = videoRef.current; if (!v) return; const obs = new IntersectionObserver(([e]) => { if (e.isIntersecting) v.play().catch(() => {}); else v.pause(); }, { threshold: 0.4 }); obs.observe(v); return () => obs.disconnect(); }, []); return (
Watch

See Tectus in action

A short overview of how coverage gets requested, matched, and tracked — start to finish.
); } Object.assign(window, { HowItWorksPinned, Marquee, VideoSection }); /* ============================================================ App download section — both apps, with store buttons. ============================================================ */ function AppDownload() { const apps = [ { name: 'Tectus', tag: 'For clients', mark: 'assets/tectus-icon-white.webp', markId: 'iconWhite', store: 'tectus', desc: 'Request and manage licensed security coverage. Submit requests by time, location, and requirement, then track every job to completion.', points: ['Request coverage in minutes', 'Live status from match to completion', 'Coordinate with vendors in one place'], label: 'Tectus', }, { name: 'Tectus GO', tag: 'For vendors', mark: 'assets/tectus-go-icon-white.webp', markId: 'goIconWhite', store: 'go', desc: 'The operations app for approved security vendors and personnel. Accept jobs, assign teams, and update status from the field.', points: ['Accept and manage job requests', 'Assign personnel and schedules', 'Update job status on site'], label: 'Tectus GO', }, ]; return (
); } Object.assign(window, { AppDownload }); /* ============================================================ Coverage map — supported-city availability (Google Places + embed) ============================================================ */ const GMAPS_KEY = 'AIzaSyDfxORl_-2husdM0RaSUa9fMKhULhzv5Mc'; const LOCATION_URL_BASE = 'https://tectusapp.com/location'; const US_STATES = { AL:'alabama', AK:'alaska', AZ:'arizona', AR:'arkansas', CA:'california', CO:'colorado', CT:'connecticut', DE:'delaware', DC:'district of columbia', FL:'florida', GA:'georgia', HI:'hawaii', ID:'idaho', IL:'illinois', IN:'indiana', IA:'iowa', KS:'kansas', KY:'kentucky', LA:'louisiana', ME:'maine', MD:'maryland', MA:'massachusetts', MI:'michigan', MN:'minnesota', MS:'mississippi', MO:'missouri', MT:'montana', NE:'nebraska', NV:'nevada', NH:'new hampshire', NJ:'new jersey', NM:'new mexico', NY:'new york', NC:'north carolina', ND:'north dakota', OH:'ohio', OK:'oklahoma', OR:'oregon', PA:'pennsylvania', RI:'rhode island', SC:'south carolina', SD:'south dakota', TN:'tennessee', TX:'texas', UT:'utah', VT:'vermont', VA:'virginia', WA:'washington', WV:'west virginia', WI:'wisconsin', WY:'wyoming' }; function covNorm(v) { return (v || '').toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g, '').replace(/[’']/g, '').replace(/[^a-z0-9\s,-]/g, ' ').replace(/\s+/g, ' ').trim(); } function covPhrase(hay, phrase) { if (!hay || !phrase) return false; const esc = phrase.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); return new RegExp(`(^|[\\s,])${esc}([\\s,]|$)`, 'i').test(hay); } function covParseState(q) { for (const [code, name] of Object.entries(US_STATES)) { if (covPhrase(q, code.toLowerCase()) || covPhrase(q, name)) return code.toLowerCase(); } return ''; } function covScore(item, rawQuery) { const q = covNorm(rawQuery); if (!q) return 0; const city = covNorm(item.city), state = covNorm(item.state); const stateName = covNorm(US_STATES[item.state] || ''); const labelComma = covNorm(`${item.city}, ${item.state}`); const labelName = covNorm(`${item.city}, ${stateName}`); const hasCity = covPhrase(q, city); const hasCode = covPhrase(q, state); const hasName = stateName ? covPhrase(q, stateName) : false; const parsed = covParseState(q); if (q === labelComma) return 5000; if (q === labelName) return 4950; if (q === city) return 4900; if (q.includes(labelComma)) return 4800; if (q.includes(labelName)) return 4750; if (hasCity && (hasCode || hasName)) return 4700; if (hasCity) { if (parsed && parsed !== state) return 0; return 4200; } return 0; } let __gmapsPromise = null; function loadGmaps() { if (window.google && window.google.maps && window.google.maps.importLibrary) return Promise.resolve(); if (__gmapsPromise) return __gmapsPromise; __gmapsPromise = new Promise((resolve, reject) => { const s = document.createElement('script'); s.src = `https://maps.googleapis.com/maps/api/js?key=${GMAPS_KEY}&loading=async&v=weekly&libraries=places`; s.async = true; s.defer = true; s.onload = () => resolve(); s.onerror = () => reject(new Error('gmaps load')); document.head.appendChild(s); }); return __gmapsPromise; } function CoverageMap() { const LOCS = window.TECTUS_LOCATIONS || []; const [query, setQuery] = useState(''); const [searched, setSearched] = useState(''); const [showSug, setShowSug] = useState(false); const [gsug, setGsug] = useState([]); const [ready, setReady] = useState(false); useEffect(() => { let c = false; loadGmaps().then(() => !c && setReady(true)).catch(() => {}); return () => { c = true; }; }, []); const tq = query.trim(); // local supported-city suggestions const localSug = useMemo(() => { const q = covNorm(tq); if (!q) return []; return LOCS.filter((i) => covNorm(i.city).startsWith(q) || covNorm(`${i.city}, ${i.state}`).includes(q)) .slice(0, 6).map((i) => ({ id: `l-${i.city}-${i.state}`, label: `${i.city}, ${i.state}`, kind: 'Supported location' })); }, [tq]); // google place suggestions useEffect(() => { let c = false; async function run() { if (!ready || tq.length < 3) { setGsug([]); return; } try { const { AutocompleteSuggestion } = await window.google.maps.importLibrary('places'); const res = await AutocompleteSuggestion.fetchAutocompleteSuggestions({ input: tq, includedRegionCodes: ['us'] }); if (c) return; setGsug((res && res.suggestions || []).slice(0, 5).map((s, i) => { const p = s.placePrediction; return { id: (p && p.placeId) || `g-${i}`, label: (p && p.text && p.text.text) || tq, kind: 'Google suggestion' }; })); } catch (e) { if (!c) setGsug([]); } } const t = setTimeout(run, 180); return () => { c = true; clearTimeout(t); }; }, [ready, tq]); const sugg = useMemo(() => { const seen = new Set(); const out = []; [...localSug, ...gsug].forEach((s) => { const k = covNorm(s.label); if (!seen.has(k)) { seen.add(k); out.push(s); } }); return out.slice(0, 8); }, [localSug, gsug]); const results = useMemo(() => { if (!searched) return []; return LOCS.map((i) => ({ ...i, score: covScore(i, searched) })).filter((i) => i.score >= 4200) .sort((a, b) => b.score - a.score || `${a.city}, ${a.state}`.localeCompare(`${b.city}, ${b.state}`)).slice(0, 4); }, [searched]); const primary = results[0] || null; const embedQ = primary ? `${primary.city}, ${primary.state}, USA` : (searched || 'United States'); const mapSrc = `https://www.google.com/maps/embed/v1/place?key=${GMAPS_KEY}&q=${encodeURIComponent(embedQ)}&zoom=${searched ? 12 : 4}`; const runSearch = (v) => { const n = (v != null ? v : query).trim(); setQuery(n); setSearched(n); setShowSug(false); }; return (
Coverage

Check Tectus availability

Enter a city or full address. Search suggestions appear as you type.

 {/* search */}
{ e.preventDefault(); runSearch(); }} style={{ position: 'relative', marginBottom: 18, zIndex: 20 }}> { setQuery(e.target.value); setShowSug(Boolean(e.target.value.trim())); if (!e.target.value.trim()) setSearched(''); }} onFocus={() => { if (tq) setShowSug(true); }} onBlur={() => setTimeout(() => setShowSug(false), 150)} placeholder="Enter city, ZIP code, or address" autoComplete="off" style={{ width: '100%', height: 56, padding: '0 60px 0 48px', background: 'var(--color-bg)', border: '1px solid var(--color-border)', borderRadius: 'var(--radius-md)', color: 'var(--color-text)', font: 'inherit', fontSize: 15.5, outline: 'none' }} onFocusCapture={(e) => (e.target.style.borderColor = 'var(--color-primary)')} /> {showSug && tq && sugg.length > 0 && (
{sugg.map((s) => ( ))}
)}
{/* map */}
{/* results — only after a search */} {searched && (
{results.length > 0 ? results.map((item, idx) => (
{searched}
{item.city}, {item.state} Available
Coverage available in your area.
}>View details
)) : (
This location isn’t currently supported. Try another city, or contact Tectus for availability.
)}
)} {/* advisor row */}
Have questions about our services? Talk to an advisor
); } Object.assign(window, { CoverageMap });