// TerraGenie Support — components const { useState, useEffect, useRef, useMemo, useCallback } = React; // —————————————————— Icon system —————————————————— const Icons = { // UI icons used inline with ui-refs dxf: () => DXF, save: () => , location: () => , query: () => , stakeout: () => , select: () => , layers: () => , zoom: () => , draw: () => , undo: () => , dropdown: () => , user: () => , refresh: () => , web: () => , // Section icons box: () => , power: () => , map: () => , upload: () => , target: () => , pin: () => , line: () => , polygon: () => , export: () => , report: () => , csv: () => CSV, // Kit icons antenna: () => , tablet: () => , pole: () => , charger: () => , bracket: () => }; const Icon = ({ name }) => { const Cmp = Icons[name]; return Cmp ? : null; }; // —————————————————— Highlighting helper —————————————————— function highlight(text, query) { if (!query || !text) return text; const re = new RegExp(`(${query.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')})`, 'gi'); const parts = String(text).split(re); return parts.map((p, i) => re.test(p) ? {p} : {p} ); } // —————————————————— Nav —————————————————— function SupNav() { return ( ); } // —————————————————— Hero —————————————————— function SupHero({ query, setQuery, stats }) { return (
TerraGenie Operator's Manual · 2026 Edition

Support & How-To

Every step, every button, every gotcha — searchable.

setQuery(e.target.value)} autoComplete="off" spellCheck="false" /> {query ? `${stats.matched} match${stats.matched === 1 ? '' : 'es'}` : `${stats.total} topics`}
); } // —————————————————— Step content renderer —————————————————— function renderInline(item, query) { if (item.kind === "li") { return
  • {highlight(item.text, query)}
    • ; } if (item.kind === "li-ui") { return (
  • {highlight(item.text, query)} {item.ref.text} {item.suffix && highlight(item.suffix, query)}
    • ); } return null; } // —————————————————— Annotated interface map —————————————————— function IfaceAnnotated({ data, query }) { const [active, setActive] = useState(1); const row = data.rows.find((r) => r.n === active) || data.rows[0]; return (
    TerraGenie app interface
    {data.rows.map((r) => )}
    {String(row.n).padStart(2, "0")}
    {highlight(row.title, query)} {highlight(row.desc, query)}
    {data.rows.map((r) => )}
    ); } function SectionContent({ content, query }) { return ( <> {content.map((c, i) => { if (c.kind === "p") return

    {highlight(c.text, query)}

    ; if (c.kind === "h4") return

    {highlight(c.text, query)}

    ; if (c.kind === "p-ul") return ( ); if (c.kind === "step") return (
    {c.n}

    {highlight(c.title, query)}

      {c.body.map((b, bi) => {renderInline(b, query)})}
    ); if (c.kind === "callout") { const icons = { tip: "💡", warn: "⚠", note: "📌", success: "✅" }; return (
    {icons[c.variant]}
    {highlight(c.title, query)} {highlight(c.body, query)}
    ); } if (c.kind === "status") return (
    {c.rows.map((r, ri) =>
    {r.dot === "blue-x" ? "✕" : ""}
    {highlight(r.title, query)} {highlight(r.desc, query)}
    )}
    ); if (c.kind === "kit") return (
    {c.items.map((k, ki) =>
    {highlight(k.label, query)}
    )}
    ); if (c.kind === "iface") return (
    {c.rows.map((r, ri) =>
    {highlight(r.title, query)}{highlight(r.desc, query)}
    )}
    ); if (c.kind === "iface-annotated") return ; return null; })} ); } // —————————————————— Topic card (grid tile) —————————————————— function SupCard({ section, onOpen, query, idx }) { return ( ); } // —————————————————— Modal popup for full guide content —————————————————— function SupModal({ section, onClose, query }) { const modalRef = useRef(null); const [closing, setClosing] = useState(false); const requestClose = useCallback(() => { setClosing(true); setTimeout(onClose, 220); }, [onClose]); useEffect(() => { const onKey = (e) => {if (e.key === "Escape") requestClose();}; window.addEventListener("keydown", onKey); const prev = document.body.style.overflow; document.body.style.overflow = "hidden"; // Focus the modal shell for screen readers setTimeout(() => modalRef.current && modalRef.current.focus(), 20); return () => { window.removeEventListener("keydown", onKey); document.body.style.overflow = prev; }; }, [requestClose]); if (!section) return null; return (
    e.stopPropagation()}>
    {section.category} · {section.num}

    {section.title}

    {section.sub}

    {section.video &&
    Watch: {section.title}
    }
    ); } // —————————————————— Contact block + ticket form —————————————————— function SupContact() { useEffect(() => { if (document.querySelector('script[data-ghl-form-embed]')) return; const s = document.createElement('script'); s.src = 'https://link.msgsndr.com/js/form_embed.js'; s.async = true; s.setAttribute('data-ghl-form-embed', ''); document.body.appendChild(s); }, []); return (
    Still stuck? We've got you.

    Real humans. US-based. No phone trees.

    If the guides above didn't cover it, reach a TerraGenie specialist directly. Every ticket is answered by someone who has run the TG2 on a jobsite.