/* ============================================================ Tectus — services · how it works · compliance ============================================================ */ const { Card: S2Card, Eyebrow: S2Eyebrow, Button: S2Button } = window.TectusDesignSystem_c42b34; /* ---------- 6. Services ---------- */ const SVC_ITEMS = [ { slug: 'executive-protection', t: 'Executive Protection', d: 'Professional executive protection for individuals, executives, and high-risk engagements.', img: 'https://framerusercontent.com/images/Naw0JAW2iTrkROKMOJt1RvFL46E.jpeg' }, { slug: 'event-security', t: 'Event Security', d: 'Reliable, professional security for private, corporate, and public events.', img: 'https://framerusercontent.com/images/BD8PblIINhZwvzAA65yf9NJeS08.jpg' }, { slug: 'retail-security', t: 'Retail Security', d: 'On-site personnel who deter theft and maintain safety.', img: 'https://framerusercontent.com/images/4ucyOnyNNnGNO5NmEf9LxGRHbTA.jpg' }, { slug: 'mobile-patrol', t: 'Mobile Patrol', d: 'Scheduled vehicle patrols and site checks.', img: 'https://framerusercontent.com/images/ZLJLne5Li3MsTstyNYPw0kyHaII.jpg' }, { slug: 'alarm-response', t: 'Alarm Response', d: 'Rapid dispatch to verify and respond to alarm activations.', img: 'https://framerusercontent.com/images/LpbehQ6CwFFGgUq0WMKct5DTk.jpg' }, { slug: 'corporate-security', t: 'Corporate Security', d: 'Professional security for corporate environments and sensitive situations.', img: 'https://framerusercontent.com/images/BJ6ZfrYVdeqlnoZuBqxqrgj6VKw.jpg' }, ]; const SVC_GAP = 20; function Services() { const [idx, setIdx] = useState(0); const [cardW, setCardW] = useState(0); const [vis, setVis] = useState(3); const containerRef = useRef(null); const touchX = useRef(null); useEffect(() => { const measure = () => { if (containerRef.current) { const w = containerRef.current.offsetWidth; const newVis = w < 560 ? 1 : w < 860 ? 2 : 3; setVis(newVis); setCardW((w - SVC_GAP * (newVis - 1)) / newVis); setIdx(i => Math.min(i, SVC_ITEMS.length - newVis)); } }; measure(); window.addEventListener('resize', measure); return () => window.removeEventListener('resize', measure); }, []); const svcMax = SVC_ITEMS.length - vis; const go = (n) => setIdx(Math.max(0, Math.min(svcMax, n))); const onTouchStart = (e) => { touchX.current = e.touches[0].clientX; }; const onTouchEnd = (e) => { if (touchX.current === null) return; const dx = e.changedTouches[0].clientX - touchX.current; if (Math.abs(dx) > 50) go(dx < 0 ? idx + 1 : idx - 1); touchX.current = null; }; const step = cardW + SVC_GAP; return (
Services

Security Solutions For Every Need

Across the full range of physical security coverage — each request staffed by licensed, vetted vendors.
{/* Overflow clip */}
{/* Sliding track */}
0 ? 'transform 0.48s cubic-bezier(0.22,1,0.36,1)' : 'none', willChange: 'transform' }}> {SVC_ITEMS.map((s) => (
{s.t}

{s.t}

{s.d}

Learn More
))}
{/* Arrows — vertically centered always; inside card on mobile, outside on desktop */}
); } /* ---------- 7. How it works ---------- */ const STEPS = [ { n: '01', icon: 'clipboard-list', t: 'Submit request details', d: 'Set time, location, armed or unarmed preference, personnel, and special notes.' }, { n: '02', icon: 'git-compare-arrows', t: 'Match with vetted vendors', d: 'Your request is matched to licensed vendors with the right credentials.' }, { n: '03', icon: 'messages-square', t: 'Coordinate through the platform', d: 'Confirm details, message the vendor, and align on requirements in one place.' }, { n: '04', icon: 'activity', t: 'Track delivery and next steps', d: 'Follow status from assigned to on site to completed — every step logged.' }, ]; function HowItWorks() { return (
{STEPS.map((s, i) => (
{s.n}

{s.t}

{s.d}

 ))}
); } /* ---------- 8. Compliance & trust ---------- */ const PILLARS = [ { icon: 'file-check', t: 'Licensing validation', d: 'State licenses verified before any vendor joins the network.' }, { icon: 'shield-check', t: 'Insurance verification', d: 'Active coverage confirmed and kept current for every vendor.' }, { icon: 'clipboard-check', t: 'Compliance checks', d: 'Armed and unarmed requirements enforced per request.' }, { icon: 'radar', t: 'Ongoing monitoring', d: 'Credentials and performance reviewed on a recurring basis.' }, { icon: 'user-plus', t: 'Structured onboarding', d: 'A documented vetting process for every company we approve.' }, ]; function Compliance() { return (
Compliance & trust

Built around verification and accountability

Tectus is compliance-focused by design. Every vendor is licensed and vetted, every requirement is enforced, and every job is documented.

}>Vendor standards How it works
{PILLARS.map((p) => (

{p.t}

{p.d}

))}
); } Object.assign(window, { Services, HowItWorks, Compliance });