/* global React */ const { useState, useEffect, useRef, useCallback } = React; /* ---------- Scroll reveal ---------- */ function useReveal() { const ref = useRef(null); useEffect(() => { const root = ref.current; if (!root) return; const els = root.matches?.('.reveal') ? [root] : Array.from(root.querySelectorAll('.reveal')); if (!els.length) return; if (!('IntersectionObserver' in window)) { els.forEach(e => e.classList.add('in')); return; } const io = new IntersectionObserver((entries) => { entries.forEach(en => { if (en.isIntersecting) { en.target.classList.add('in'); io.unobserve(en.target); } }); }, { threshold: 0.12, rootMargin: '0px 0px -8% 0px' }); els.forEach(e => io.observe(e)); return () => io.disconnect(); }); return ref; } /* ---------- Logo — hex mark + official wordmark ---------- */ function Logo({ size = 24 }) { return ( {/* Official lockup — mark + wordmark in one coordinate space. Mark scaled 0.409 so its stroke (22→9) matches the wordmark stroke (9); both centered on the shared y-axis (48) and sitting level. */} {/* Mark */} {/* Wordmark — A·I carry the accent (hidden AI) */} ); } /* ---------- Section label ---------- */ function SectionLabel({ index, children, accent }) { return (
{index && {index}} {children}
); } /* ---------- Button ---------- */ function Btn({ children, primary, sm, href = '#', onClick, arrow }) { return ( {children} {arrow && →} ); } /* ---------- Placeholder image ---------- */ function Ph({ label, ratio = '16 / 10', style, children, grid }) { return (
{children || {label}}
); } /* ---------- Corner registration ticks ---------- */ function CornerTicks({ color = 'var(--line-2)', size = 9, inset = 8 }) { const base = { position: 'absolute', pointerEvents: 'none' }; const h = { width: size, height: 1, background: color }; const v = { width: 1, height: size, background: color }; return ( <> ); } /* ---------- Readout chip ---------- */ function Readout({ k, v, accent }) { return (
{k} {v}
); } /* ---------- Nav ---------- */ const NAV = [ { id: 'platform', label: 'Platform' }, { id: 'collaboration', label: 'Collaboration' }, ]; function Nav({ route, go }) { const [scrolled, setScrolled] = useState(false); const [open, setOpen] = useState(false); useEffect(() => { const on = () => setScrolled(window.scrollY > 12); on(); window.addEventListener('scroll', on, { passive: true }); return () => window.removeEventListener('scroll', on); }, []); const onLink = (id) => (e) => { e.preventDefault(); setOpen(false); go(id); }; return (
{open && (
{NAV.map(n => ( {n.label} ))}
)}
); } /* ---------- Platform availability glyphs ---------- */ function AppleGlyph({ s = 16 }) { return ( ); } function AndroidGlyph({ s = 16 }) { return ( ); } function WindowsGlyph({ s = 14 }) { return ( ); } /* ---------- Footer ---------- */ function Footer({ go }) { const onLink = (id) => (e) => { e.preventDefault(); go(id); }; const { AppStoreBadge, GooglePlayBadge, QR } = window; const platforms = [ { label: 'iOS', glyph: }, { label: 'Android', glyph: }, { label: 'Windows', glyph: }, ]; return (
{/* Left — brand + slogan + verbiage */}
KNOW FIRST

Every maintenance need, from capture to invoice, in one flow. Maintenance that tells you first — and pays for itself.

{/* Center — Get the app */}
GET THE APP
{AppStoreBadge ? : null} {GooglePlayBadge ? : null}
Available on {platforms.map((p) => ( {p.glyph}{p.label} ))}
{/* Right — QR */}
{QR ? : null}
SCAN TO DOWNLOAD
); } /* ---------- Frozen footer bar (mirrors sticky header) ---------- */ function FooterBar({ go, route }) { const onLink = (id) => (e) => { e.preventDefault(); go(id); }; const links = [['About', 'about'], ['Privacy', 'privacy'], ['Contact', 'contact']]; return ( ); } Object.assign(window, { useReveal, Logo, SectionLabel, Btn, Ph, CornerTicks, Readout, Nav, Footer, FooterBar, NAV, });