const { useState, useEffect, useRef } = React; /* ---------- typing helper ---------- */ function useTyping(text, speed = 22, start = true, restart = 0) { const [out, setOut] = useState(""); useEffect(() => { if (!start) return; setOut(""); let i = 0; const id = setInterval(() => { i++; setOut(text.slice(0, i)); if (i >= text.length) clearInterval(id); }, speed); return () => clearInterval(id); }, [text, start, speed, restart]); return out; } /* ---------- live sparkline ---------- */ function Spark() { const [pts, setPts] = useState(() => Array.from({length: 24}, () => 10 + Math.random()*16)); useEffect(() => { const id = setInterval(() => { setPts(p => [...p.slice(1), 8 + Math.random()*20]); }, 700); return () => clearInterval(id); }, []); const w = 120, h = 28; const step = w / (pts.length - 1); const d = pts.map((y, i) => `${i===0?'M':'L'}${(i*step).toFixed(1)},${(h - y).toFixed(1)}`).join(' '); const area = `${d} L${w},${h} L0,${h} Z`; return ( ); } /* ---------- Workspace UI (hero) ---------- */ function WorkspaceUI({ copy }) { const w = copy.workspace; // cycle through email drafts const drafts = [ { to: "marc.lehmann@kunde.ch", subject: "Re: Angebot Q3 Roadmap", body: "Hallo Marc,\n\ndanke für deine Rückmeldung. Anbei die aktualisierte Roadmap mit den Meilensteinen für Q3. Lass uns Mittwoch 14:30 kurz syncen — ich blocke direkt im Kalender." }, { to: "team@baeumlin.ch", subject: "Re: Onboarding-Workshop nächste Woche", body: "Hi zusammen,\n\nder Workshop ist auf Dienstag 09:00 fixiert. Die Unterlagen liegen im geteilten Drive — bitte vorab durchgehen. Bei Fragen meldet euch direkt." }, { to: "finance@kunde.ch", subject: "Re: Rechnung INV-2026-0412", body: "Hallo,\n\ndie Rechnung wurde heute Morgen beglichen — Referenz im Anhang. Bei weiteren Fragen stehe ich gerne zur Verfügung." } ]; const [draftIdx, setDraftIdx] = useState(0); const [tick, setTick] = useState(0); const current = drafts[draftIdx]; const body = useTyping(current.body, 14, true, draftIdx); // advance to next draft after the body finishes + a pause useEffect(() => { const totalMs = current.body.length * 14 + 2400; const id = setTimeout(() => { setDraftIdx(i => (i + 1) % drafts.length); setTick(t => t + 1); }, totalMs); return () => clearTimeout(id); }, [draftIdx]); const [activeSidebar, setActiveSidebar] = useState(1); // Drafts return (

{/* chrome */}

{w.title}

live

{/* sidebar */} {/* main */}

{w.draft.toUpperCase()}

AI · GPT-4 · just now

TO {current.to}

SUBJ {current.subject}

{body}▍

{w.draftSub}

{w.intel.toUpperCase()}

{w.eff}

{w.hours}

{w.saved}

{w.auto.toUpperCase()}

{item}

● {w.found.toUpperCase()}

{w.foundDetail}

); } function Check() { return ( ); } function SidebarIcon({ i }) { const paths = [ "M3 5h10v6H3z M3 5l5 4 5-4", // inbox "M4 3h6l3 3v7H4z M10 3v3h3", // drafts "M3 8h10 M3 4h10 M3 12h6", // workflows "M3 4h10v8H3z M3 8h10", // knowledge "M3 12V4 M3 12h10 M6 12V8 M9 12V6 M12 12V9", // analyzer (bars) "M8 5v6 M5 8h6 M8 2v2 M8 12v2 M2 8h2 M12 8h2", // settings ]; return ( ); } /* ---------- Hero ---------- */ function Hero({ copy }) { const h = copy.hero; return (

{/* subtle ambient — no rainbow orbs */}

{h.pill}

{h.h1_1}{' '} {h.h1_2}
{h.h1_3}

{h.sub}

{h.cta1} ↗ {h.cta2}

{h.chips.map((c, i) => (

{c}

))}

{/* floating callout: hours saved (top-left) */}

{copy.workspace.saved}

{copy.workspace.hours}

▲ +18.4% vs. letzte Woche

{/* floating callout: automation found (bottom-right) */}

{copy.workspace.found}

{copy.workspace.foundDetail}

92×/Monat · ROI 88/100 →

); } function Dot() { return ; } Object.assign(window, { Hero, WorkspaceUI, Dot, Check, useTyping, Spark, SidebarIcon });

{h.h1_1}{' '} {h.h1_2} {h.h1_3}

{h.h1_1}{' '} {h.h1_2}
{h.h1_3}