/* global React */ // reo-components.jsx — shared visual building blocks for the Reo landing page. // Exported to window at the bottom so other babel scripts can use them. const { useState, useRef, useEffect } = React; /* ----------------------------------------------------------- Sheets sink * Form submissions are appended to a Google Sheet via an Apps Script Web * App. The script's doPost reads JSON from e.postData.contents and routes * by the `form` field ("waitlist" or "contact"). We send Content-Type * text/plain so the browser treats it as a simple request — no CORS * preflight, which Apps Script doesn't reliably handle. */ const SHEETS_ENDPOINT = "https://script.google.com/macros/s/AKfycbx44cZ-5Wv1zJbgpQtzbBthrlwSDx57h7tqEdKeGyQ0_Wxiow6xlsmsNXBUFmXG0JP6/exec"; function postToSheets(payload) { if (!SHEETS_ENDPOINT) return; fetch(SHEETS_ENDPOINT, { method: "POST", body: JSON.stringify(payload), headers: { "Content-Type": "text/plain;charset=utf-8" } }).catch((err) => { console.warn("Sheets sync failed:", err); }); } /* ----------------------------------------------------------- Agent glyphs * Small monochrome SVG glyphs — no emoji, no stock icons. Each glyph reads * editorial at 16–24px. They use currentColor so callers can recolor. */ function Glyph({ name, size = 16, stroke = 1.25 }) { const c = "currentColor"; const common = { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: c, strokeWidth: stroke, strokeLinecap: "round", strokeLinejoin: "round" }; switch (name) { case "clock": return ; case "cross-arrows": return ; case "diverge": return ; case "wave": return ; case "log": return ; case "shield": return ; case "eye-off": return ; case "target": return ; case "bell": return ; case "link": return ; case "calendar": return ; case "chip": return ; case "ear": return ; case "thread": return ; case "at": return ; case "currency": return ; case "scale": return ; default: return ; } } /* ----------------------------------------------------------- Brand wordmark * Three letters, lowercase, with a single deliberate dot to act as a logo * mark. Letterspacing tightened slightly. No mixed case. */ function ReoMark({ size = 22, color = "currentColor", clickable = false }) { const inner = ( <> {/* Logo glyph — a 2×2 grid of dots, the bottom-right one is accent. Reads as: "patterns" with one signal worth surfacing. */} {[0,1,2,3].map(i => ( ))} reo ); const style = { display: "inline-flex", alignItems: "center", fontFamily: "var(--font-sans)", fontWeight: 500, fontSize: size, letterSpacing: "-0.035em", color, lineHeight: 1, textDecoration: "none", cursor: clickable ? "pointer" : "default", userSelect: "none" }; if (clickable) { const scrollTop = (e) => { e?.preventDefault(); try { window.scrollTo({ top: 0, behavior: "smooth" }); } catch { window.scrollTo(0, 0); } }; return {inner}; } return {inner}; } /* ----------------------------------------------------------- SourceChip * Monospace pill that signals a real verifiable source. Used inside digest * insight cards and "between the lines" hero visuals. */ function SourceChip({ children, tone = "accent" }) { const bg = tone === "muted" ? "var(--paper-2)" : "var(--accent-tint)"; const fg = tone === "muted" ? "var(--ink-2)" : "var(--accent)"; const bd = tone === "muted" ? "var(--rule-2)" : "var(--accent-tint-2)"; return ( {children} ); } /* ----------------------------------------------------------- AudienceTag * Tiny label that always shows who will see something. Required honesty. */ function AudienceTag({ to = "you only" }) { return ( Visible to: {to} ); } /* ----------------------------------------------------------- InsightCard * The atomic Reo unit: one inference, with sources, audience, and a single * primary action. Used inside the digest still and as standalone hero art. */ function InsightCard({ agent, agentGlyph, headline, body, sources = [], audience = "you only", primary = "Open thread", secondary = "Mark resolved", pinned = false, highlighted = false }) { return (
{/* agent label row */}
{agent}
{pinned && ( ▲ Pinned this week )}
{/* the inference itself */}

{headline}

{body && (

{body}

)} {/* sources row */} {sources.length > 0 && (
{sources.map((s, i) => {s})}
)} {/* footer: audience + actions */}
); } const btnPrimary = { height: 28, padding: "0 12px", background: "var(--ink)", color: "var(--paper)", border: "1px solid var(--ink)", borderRadius: 4, fontSize: 12, fontFamily: "var(--font-sans)", fontWeight: 500, cursor: "pointer", letterSpacing: "-0.005em", whiteSpace: "nowrap", flexShrink: 0 }; const btnTertiary = { height: 28, padding: "0 12px", background: "transparent", color: "var(--ink-2)", border: "1px solid var(--rule-2)", borderRadius: 4, fontSize: 12, fontFamily: "var(--font-sans)", fontWeight: 500, cursor: "pointer", letterSpacing: "-0.005em", whiteSpace: "nowrap", flexShrink: 0 }; /* ----------------------------------------------------------- SkillCard * Editorial card. The "agents as cards in a library" treatment — the user's * brief asked for this metaphor. Each card has a glyph, name, short * description, and a small toggle that flips between "Watching" / "Off". */ function SkillCard({ glyph, name, description, on = false, badge, onToggle, compact = false }) { const [enabled, setEnabled] = useState(on); const toggle = () => { setEnabled(v => !v); onToggle?.(!enabled); }; return (
{ e.currentTarget.style.transform = "translateY(-1px)"; }} onMouseLeave={(e) => { e.currentTarget.style.transform = "translateY(0)"; }} >
{enabled ? "● Watching" : "○ Off"}

{name}

{description}

{badge && ( {badge} )}
); } /* ----------------------------------------------------------- Annotation * Hand-drawn-looking pointer + label, used for the annotated hero variant. */ function Annotation({ letter, label, x, y, towards = "left", length = 80 }) { // towards = direction the pointer goes (toward the artifact) const isLeft = towards === "left"; const isRight = towards === "right"; const isUp = towards === "up"; const isDown = towards === "down"; return (
{(isLeft || isUp) && ( ({letter}) {label} )} {isLeft && } {isRight && } {isUp && } {isDown && } {(isRight || isDown) && ( ({letter}) {label} )}
); } /* ----------------------------------------------------------- ChromeBar * Mac-style window chrome row used to frame product stills. Three dots, no * url bar. The dots are muted, not gummy candy. */ function ChromeBar({ title, right }) { return (
{[0,1,2].map(i => ( ))} {title} {right}
); } /* ----------------------------------------------------------- ComplianceBadge * Original badge — does NOT replicate AICPA / HIPAA / ISO / GDPR / CASA * trademarked logo art. Uses the framework name in a tasteful frame plus the * required visible "In progress" chip beneath. This is design honesty — and * also avoids reproducing branded marks. */ function ComplianceBadge({ framework, fullName, targetQuarter, status = "in-progress" }) { const statusLabel = status === "planned" ? "Planned" : "In progress"; const isPlanned = status === "planned"; return (
Framework
{framework}
{fullName}
{/* corner ticks */} {["tl","tr","bl","br"].map(c => ( ))}
{isPlanned ? ( Planned ) : ( In progress )} Target: {targetQuarter}
); } /* ----------------------------------------------------------- FAQ * Accessible accordion with keyboard support. */ function FAQItem({ q, a, initialOpen = false }) { const [open, setOpen] = useState(initialOpen); return (
{a}
); } /* ----------------------------------------------------------- DemoModal * Tasteful demo modal that mimics a 45-second walkthrough. The "video" is a * staged sequence of insight cards animating in — restrained motion only, * fade + slight rise. ESC closes. */ function DemoModal({ open, onClose }) { useEffect(() => { if (!open) return; const onKey = (e) => { if (e.key === "Escape") onClose(); }; document.addEventListener("keydown", onKey); return () => document.removeEventListener("keydown", onKey); }, [open, onClose]); const [stage, setStage] = useState(0); useEffect(() => { if (!open) return; setStage(0); const t = [ setTimeout(() => setStage(1), 600), setTimeout(() => setStage(2), 1400), setTimeout(() => setStage(3), 2200), setTimeout(() => setStage(4), 3200), ]; return () => t.forEach(clearTimeout); }, [open]); if (!open) return null; return (
e.stopPropagation()} style={{ width: "min(960px, 100%)", background: "var(--paper)", border: "1px solid var(--rule-strong)", borderRadius: 8, padding: 0, overflow: "hidden", display: "flex", flexDirection: "column" }}>
Reo · 45-second demo
▸ Friday digest · 8:00 AM · 14 March 2026
{stage}/4
{[ { delay: 0, glyph: "clock", agent: "Customer commitments tracker", headline: "You promised Acme an export endpoint by end of Q3 — the work moved to Q4 last week.", sources: ["Acme · re: Q3 plans (Aug 12)", "Eng standup notes (Sep 4)"], audience: "you only" }, { delay: 1, glyph: "cross-arrows", agent: "Cross-customer contradictions", headline: "Voro and Beam were told different launch dates for SSO — Aug 15 vs Sep 30.", sources: ["Voro · re: SSO timeline", "Beam · re: rollout"], audience: "you only" }, { delay: 2, glyph: "wave", agent: "Cooling counterparty threads", headline: "Three threads with Pier have gone quiet since their renewal in February.", sources: ["Pier · re: Q1 expansion"], audience: "you only" }, { delay: 3, glyph: "log", agent: "Decision audit log", headline: "On Tuesday you decided to defer the auth migration — captured here so it doesn't slip again.", sources: ["Team standup · Mar 11"], audience: "team · ENG" }, ].map((c, i) => (
i ? 1 : 0, transform: stage > i ? "translateY(0)" : "translateY(8px)", transition: "opacity 320ms ease, transform 320ms ease" }}>
))}
); } /* ----------------------------------------------------------- Build-your-own * Lightly interactive: user types or picks a preset, click "Generate Skill", * a card materializes. Resets on edit. */ function BuildYourOwn() { const presets = [ "Flag any customer email that mentions our competitors by name.", "Surface when a customer asks the same question twice in 30 days.", "Notice when a vendor changes the price after we've signed off.", "Watch for any thread where the team disagrees silently through me." ]; const [val, setVal] = useState(presets[0]); const [generated, setGenerated] = useState(null); const [thinking, setThinking] = useState(false); const generate = () => { if (!val.trim()) return; setThinking(true); setGenerated(null); setTimeout(() => { // derive a name + glyph from the prompt (light heuristic — not LLM) const name = deriveName(val); const glyph = deriveGlyph(val); setGenerated({ name, glyph, description: val.trim() }); setThinking(false); }, 900); }; function deriveName(t) { const s = t.toLowerCase(); if (s.includes("competitor")) return "Competitor mention watch"; if (s.includes("twice") || s.includes("repeat")) return "Repeated question tracker"; if (s.includes("price")) return "Price change sentinel"; if (s.includes("disagree")) return "Silent disagreement detector"; if (s.includes("overdue") || s.includes("late")) return "Overdue commitment watch"; return "Custom inference agent"; } function deriveGlyph(t) { const s = t.toLowerCase(); if (s.includes("competitor")) return "scale"; if (s.includes("twice") || s.includes("repeat")) return "ear"; if (s.includes("price")) return "currency"; if (s.includes("disagree")) return "cross-arrows"; return "target"; } return (
Build your own

Or describe one in plain English.