/* global React, ReactDOM */
const { useState, useEffect } = React;

// ============================================================
//   Logo mark — three stacked workers in a hard-bordered tile
// ============================================================
function WesLogo({ size = 40 }) {
    return (
        <svg
            width={size}
            height={size}
            viewBox="0 0 40 40"
            aria-label="wes"
            role="img"
        >
            <rect
                x="0.5"
                y="0.5"
                width="39"
                height="39"
                fill="var(--paper)"
                stroke="var(--ink)"
                strokeWidth="1.5"
            />
            {/* trunk */}
            <line
                x1="20"
                y1="4"
                x2="20"
                y2="36"
                stroke="var(--ink)"
                strokeWidth="1.5"
            />
            {/* three branches */}
            <line
                x1="20"
                y1="12"
                x2="30"
                y2="12"
                stroke="var(--ink)"
                strokeWidth="1.5"
            />
            <line
                x1="20"
                y1="22"
                x2="30"
                y2="22"
                stroke="var(--ink)"
                strokeWidth="1.5"
            />
            <line
                x1="20"
                y1="32"
                x2="30"
                y2="32"
                stroke="var(--ink)"
                strokeWidth="1.5"
            />
            {/* worker nodes */}
            <rect
                x="28"
                y="9"
                width="7"
                height="7"
                fill="var(--accent)"
                stroke="var(--ink)"
                strokeWidth="1.5"
            />
            <rect
                x="28"
                y="19"
                width="7"
                height="7"
                fill="var(--ink)"
                stroke="var(--ink)"
                strokeWidth="1.5"
            />
            <rect
                x="28"
                y="29"
                width="7"
                height="7"
                fill="var(--paper)"
                stroke="var(--ink)"
                strokeWidth="1.5"
            />
            {/* root node */}
            <rect
                x="5"
                y="17"
                width="11"
                height="6"
                fill="var(--ink)"
                stroke="var(--ink)"
                strokeWidth="1.5"
            />
            <text
                x="10.5"
                y="22"
                textAnchor="middle"
                fill="var(--paper)"
                fontFamily="var(--font-mono)"
                fontWeight="700"
                fontSize="5.2"
                letterSpacing="0.15"
            >
                wes
            </text>
        </svg>
    );
}

const TERM_LINES = [
    { kind: "p", text: "$ wes init" },
    {
        kind: "ok",
        text: "initialized .wes/ for git@github.com:DhashS/wes_test.git",
    },
    { kind: "p", text: "$ wes branch add feat/login" },
    { kind: "dim", text: "workspace created: .wes/workspaces/feat/login" },
    { kind: "p", text: "$ wes worker add -b feat/login -n claude" },
    { kind: "dim", text: "worker created: claude (branch: feat/login)" },
    { kind: "p", text: "$ wes worker add -b feat/login -n codex" },
    { kind: "dim", text: "worker created: codex  (branch: feat/login)" },
    { kind: "p", text: "$ wes status" },
];

const STATUS_ROWS = [
    {
        type: "repo",
        branch: "main",
        name: "wes_test",
        files: 0,
        plus: 0,
        minus: 0,
        dot: "idle",
    },
    {
        type: "workspace",
        branch: "feat/login",
        name: "feat/login",
        files: 0,
        plus: 0,
        minus: 0,
        dot: "idle",
    },
    {
        type: "worker",
        branch: "feat/login",
        name: "claude",
        files: 4,
        plus: 87,
        minus: 12,
        dot: "work",
    },
    {
        type: "worker",
        branch: "feat/login",
        name: "codex",
        files: 2,
        plus: 24,
        minus: 3,
        dot: "work",
    },
];

// ============================================================
//   Components
// ============================================================
// expose for use across components
window.WesLogo = WesLogo;

function TopBar() {
    const [time, setTime] = useState(() => new Date());
    useEffect(() => {
        const id = setInterval(() => setTime(new Date()), 1000);
        return () => clearInterval(id);
    }, []);
    const stamp = time.toISOString().replace("T", " ").slice(0, 19) + " UTC";
    return (
        <div className="topbar">
            <div className="wrap topbar-inner">
                <div style={{ display: "flex", gap: 12, alignItems: "center" }}>
                    <WesLogo size={22} />
                    <span className="brand">wes</span>
                    <span className="pill">
                        <span className="dot"></span>v0.1.0 · pre-release
                    </span>
                </div>
                <nav>
                    <a href="#vscode">vscode</a>
                    <a href="#what">what</a>
                    <a href="#swarm">swarm</a>
                    <a href="#multiplayer">multiplayer</a>
                    <a href="#install">install</a>
                    <a href="#roadmap">roadmap</a>
                </nav>
                <div className="right">
                    <span className="pill muted">
                        <span className="dot"></span>
                        {stamp}
                    </span>
                </div>
            </div>
        </div>
    );
}

function Hero() {
    return (
        <div className="hero">
            <div className="wrap hero-grid">
                <div>
                    <div className="hero-mark">
                        <div className="meta">
                            <span className="pill">
                                <span className="dot"></span>vscode native
                            </span>
                            <span className="pill">
                                <span className="dot"></span>cross-platform
                            </span>
                            <span className="pill warn">
                                <span className="dot"></span>multiplayer
                            </span>
                            <span className="pill muted">
                                <span className="dot"></span>rust · acp
                            </span>
                        </div>
                    </div>
                    <h1>
                        isolated workspaces
                        <br />
                        for your <em>agent swarms</em>.<br />
                        multiplayer, for teams.
                    </h1>
                    <p className="lede">
                        wes spawns coding agents into{" "}
                        <span className="ascii-inline">file://</span> clones of
                        your repo — one per workspace. you stay on{" "}
                        <span className="ascii-inline">main</span>; they hack on{" "}
                        <span className="ascii-inline">feat/*</span>. review
                        diffs in VSCode, ship in parallel — Multiplayer with
                        Live Share for your team.
                    </p>
                    <div className="cta-row">
                        <a className="btn primary" href="#install">
                            install wes <span className="arrow">↗</span>
                        </a>
                        <a
                            className="btn"
                            href="https://github.com/DhashS/wes"
                            target="_blank"
                            rel="noreferrer"
                        >
                            github <span className="arrow">↗</span>
                        </a>
                        <a className="btn ghost" href="#what">
                            learn more <span className="arrow">↓</span>
                        </a>
                    </div>
                </div>

                <div
                    className="terminal"
                    role="img"
                    aria-label="terminal showing wes init, branch and worker creation"
                >
                    <div className="terminal-bar">
                        <span className="dots">
                            <span />
                            <span />
                            <span />
                        </span>
                        <span className="title">~/code/wes_test — wes</span>
                        <span style={{ width: 32 }} />
                    </div>
                    <div className="terminal-body">
                        {TERM_LINES.map((l, i) => (
                            <div key={i} className={`row ${l.kind}`}>
                                {l.kind === "p" ? (
                                    <span className="p">{l.text}</span>
                                ) : l.kind === "ok" ? (
                                    <span className="ok">{l.text}</span>
                                ) : (
                                    <span className="dim">{l.text}</span>
                                )}
                            </div>
                        ))}
                        <table>
                            <thead>
                                <tr>
                                    <th></th>
                                    <th>type</th>
                                    <th>branch</th>
                                    <th>name</th>
                                    <th>files</th>
                                    <th>+</th>
                                    <th>-</th>
                                </tr>
                            </thead>
                            <tbody>
                                {STATUS_ROWS.map((r, i) => (
                                    <tr key={i}>
                                        <td className="dot-cell">
                                            <span className={`d ${r.dot}`} />
                                        </td>
                                        <td className="tag">{r.type}</td>
                                        <td>{r.branch}</td>
                                        <td>{r.name}</td>
                                        <td>{r.files}</td>
                                        <td>{r.plus}</td>
                                        <td>{r.minus}</td>
                                    </tr>
                                ))}
                            </tbody>
                        </table>
                        <div className="row p" style={{ marginTop: 8 }}>
                            $ <span className="cursor" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
}

function Pillars() {
    const items = [
        {
            n: "01",
            glyph: "⌘",
            title: "lives inside vscode",
            body: "one sidebar tree: project, workspaces, workers. inline +/− to spawn. click chat — an ACP agent opens in column 1, transcript lives across panel close/reopen, diffs land in the native diff editor.",
        },
        {
            n: "02",
            glyph: "⌘",
            title: "cross-platform on day one",
            body: "a single rust binary on macOS (arm64 + intel), linux (x86_64 + aarch64), and the WSL path you actually use on windows. one cli, one server, one extension — installed by tarball, not a daemon.",
        },
        {
            n: "03",
            glyph: "⇆",
            title: "multiplayer out of the box",
            body: "host wires up wes serve once. guests join over Live Share and get the same tree, the same active chats, the same transcript — host stays canonical, guest spawn waits on host approval.",
        },
    ];

    return (
        <section id="what">
            <div className="wrap">
                <p className="eyebrow">what wes is</p>
                <h2 className="dsh">
                    a coordination layer for parallel agent workflows
                </h2>
                <p className="section-lede">
                    wes is a small cli, an http/MCP server, and a vscode
                    extension. it pins one workspace per tracked branch — a
                    clean checkout you never edit — and clones it via
                    <span className="ascii-inline">file://</span> for every
                    agent worker. because git allows only one checkout per
                    branch, but you want a swarm.
                </p>
                <div className="pillars">
                    {items.map((p) => (
                        <div className="pillar" key={p.n}>
                            <div className="num">{p.n}</div>
                            <div className="glyph">{p.glyph}</div>
                            <h3>{p.title}</h3>
                            <p>{p.body}</p>
                        </div>
                    ))}
                </div>
            </div>
        </section>
    );
}

function Swarm() {
    const rows = [
        {
            k: "workspaces · the source of truth",
            v: (
                <>
                    git worktrees would be perfect — except git only allows one
                    checkout per branch. so wes pins one workspace per tracked
                    branch, fast-forwards it on every call, and treats it as the
                    rebase target.
                </>
            ),
        },
        {
            k: "workers · the swarm",
            v: (
                <>
                    <code>file://</code> clones of a workspace. as many as you
                    want per branch. agents commit here, push to the workspace,
                    get reviewed. delete a worker, the work survives in the
                    reflog.
                </>
            ),
        },
        {
            k: "acp · the bridge",
            v: (
                <>
                    each worker hosts an Agent Communication Protocol session.
                    claude, codex, anything ACP-speaking. wes proxies stdio
                    agents over http.
                </>
            ),
        },
        {
            k: "spawn",
            v: (
                <span className="mono">
                    <code>wes worker add -b feat/x -n alice</code>
                </span>
            ),
        },
    ];

    return (
        <section id="swarm">
            <div className="wrap">
                <p className="eyebrow">the topology</p>
                <h2 className="dsh">
                    one workspace per branch. as many workers as you want.
                </h2>
                <p className="section-lede">
                    we'd use plain git worktrees if they supported more than one
                    checkout per branch — they don't. so wes keeps a workspace
                    pristine and clones it via{" "}
                    <span className="ascii-inline">file://</span> for each
                    worker. cheap, parallel, throwaway.
                </p>
                <dl className="legend legend-inline">
                    {rows.map((r) => (
                        <div key={r.k}>
                            <dt>{r.k}</dt>
                            <dd>{r.v}</dd>
                        </div>
                    ))}
                </dl>
            </div>
        </section>
    );
}

function VsCodeMock() {
    return (
        <section id="vscode">
            <div className="wrap">
                <p className="eyebrow">vscode extension</p>
                <h2 className="dsh">YOUR REPO, YOUR WORKSPACES, YOUR SWARMS</h2>
                <p className="section-lede">
                    one tree view. workers tinted green when an ACP chat is
                    live. spawn, stop, diff, update — every action is two clicks
                    from the project root.
                </p>

                <div
                    className="vscode"
                    role="img"
                    aria-label="VSCode window with the wes sidebar and an ACP chat panel open"
                >
                    <div className="vsc-rail">
                        <div className="icon">☰</div>
                        <div className="icon">⌕</div>
                        <div className="icon">⎇</div>
                        <div className="icon active">▣</div>
                        <div className="icon">⚙</div>
                    </div>
                    <div className="vsc-side">
                        <div className="vsc-titlebar">
                            <span>wes — composer</span>
                            <span style={{ color: "#888" }}>···</span>
                        </div>

                        <div className="vsc-section">
                            <div className="head">
                                <span className="chev">▾</span>project
                                <span className="actions">
                                    <span title="diff">±</span>
                                    <span title="open folder">↗</span>
                                </span>
                            </div>
                            <div className="vsc-row">
                                <span className="ico">🗂</span>
                                <span className="label">wes_test</span>
                                <span className="branch">main</span>
                            </div>
                            <div className="vsc-tree">
                                a.txt · b.txt · c.txt
                            </div>
                        </div>

                        <div className="vsc-section">
                            <div className="head">
                                <span className="chev">▾</span>workspaces
                                <span className="actions">
                                    <span title="add">＋</span>
                                </span>
                            </div>
                            <div className="vsc-row">
                                <span className="ico">⌥</span>
                                <span className="label">feat/login</span>
                                <span className="branch">tracking</span>
                            </div>
                            <div className="vsc-row">
                                <span className="ico">⌥</span>
                                <span className="label">ds/add-c</span>
                                <span className="branch">pinned</span>
                            </div>
                        </div>

                        <div className="vsc-section">
                            <div className="head">
                                <span className="chev">▾</span>workers
                                <span className="actions">
                                    <span title="add">＋</span>
                                </span>
                            </div>
                            <div className="vsc-row active">
                                <span className="ico">●</span>
                                <span className="label">claude</span>
                                <span
                                    className="live work"
                                    title="agent working"
                                />
                            </div>
                            <div className="vsc-row">
                                <span className="ico">●</span>
                                <span className="label">codex</span>
                                <span className="live" title="chat active" />
                            </div>
                            <div className="vsc-row">
                                <span className="ico">○</span>
                                <span className="label">scratch</span>
                                <span className="branch">idle</span>
                            </div>
                        </div>

                        <div className="vsc-section">
                            <div className="head">
                                <span className="chev">▸</span>diffs (2)
                            </div>
                        </div>
                    </div>

                    <div className="vsc-main">
                        <div className="vsc-tabs">
                            <div className="vsc-tab active">
                                ▣ acp · claude · feat/login
                            </div>
                            <div className="vsc-tab">
                                ⇄ a.txt (claude) ↔ a.txt (workspace)
                            </div>
                        </div>

                        <div className="vsc-chat">
                            <div className="vsc-msg">
                                <div className="who">
                                    <span className="role host">▼ host</span>
                                    <span className="who-actor">dhash</span>
                                    <span
                                        style={{
                                            marginLeft: "auto",
                                            color: "#6b7280",
                                        }}
                                    >
                                        10:24:01
                                    </span>
                                </div>
                                add a login form to <code>routes/auth.tsx</code>
                                . use the existing form primitives.
                            </div>
                            <div className="vsc-msg">
                                <div className="who">
                                    <span className="role agent">▶ agent</span>
                                    <span className="who-actor">
                                        claude · sonnet 4.5
                                    </span>
                                    <span
                                        style={{
                                            marginLeft: "auto",
                                            color: "#6b7280",
                                        }}
                                    >
                                        10:24:09
                                    </span>
                                </div>
                                read <code>components/forms/Field.tsx</code> ·
                                scaffolded the route · added zod validation.
                                <div className="diff-pill">
                                    <span>▣ open diff</span>
                                    <span className="plus">+87</span>
                                    <span className="minus">−12</span>
                                    <span style={{ color: "#9b9b9b" }}>
                                        routes/auth.tsx
                                    </span>
                                </div>
                            </div>
                            <div className="vsc-msg">
                                <div className="who">
                                    <span className="role user">▶ guest</span>
                                    <span className="who-actor">skylarmb</span>
                                    <span
                                        style={{
                                            marginLeft: "auto",
                                            color: "#6b7280",
                                        }}
                                    >
                                        10:24:33
                                    </span>
                                </div>
                                also wire the “forgot password” link — point it
                                at <code>/auth/recover</code> for now.
                            </div>
                        </div>

                        <div className="vsc-composer">
                            <div className="inp">
                                <span style={{ color: "#9b9b9b" }}>›</span>{" "}
                                &nbsp;
                                <span className="cur" />
                            </div>
                            <button className="send">send</button>
                        </div>

                        <div className="vsc-statusbar live">
                            <span className="item">⚑ acp · :7070</span>
                            <span className="item">
                                ⇆ live share · 2 guests
                            </span>
                            <span className="item">▣ feat/login</span>
                            <span className="item">claude / codex</span>
                            <span
                                className="item"
                                style={{ marginLeft: "auto" }}
                            >
                                UTF-8 · LF · TS
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    );
}

function Multiplayer() {
    return (
        <section id="multiplayer">
            <div className="wrap">
                <p className="eyebrow">multiplayer · live share</p>
                <h2 className="dsh">
                    two windows. one transcript. zero localhost.
                </h2>
                <p className="section-lede">
                    host runs wes serve. guests join Live Share and never touch{" "}
                    <span className="ascii-inline">127.0.0.1</span>. host owns
                    the agent pids, the ACP urls, the filesystem; guests render
                    a synced tree from a sanitized snapshot. every prompt and
                    every event is host-canonical and ordered.
                </p>

                <div className="live-split">
                    <div className="live-window">
                        <div className="head">
                            <span className="who host">host · dhash</span>
                            <span className="url">
                                wes-acp://local · 127.0.0.1:7070
                            </span>
                        </div>
                        <div className="body">
                            <div className="bubble user">
                                <div className="who">
                                    <b>dhash</b> · prompt · #seq=14
                                </div>
                                add a login form to <code>routes/auth.tsx</code>
                                .
                            </div>
                            <div className="bubble agent">
                                <div className="who">
                                    claude · session/update · #seq=15
                                </div>
                                done. opened <code>routes/auth.tsx</code> in
                                your diff view.
                            </div>
                            <div className="bubble user guest-in">
                                <div className="who">
                                    <b>skylarmb</b> · prompt · #seq=16
                                </div>
                                also wire up “forgot password” →{" "}
                                <code>/auth/recover</code>.
                            </div>
                            <div className="bubble agent">
                                <div className="who">
                                    claude · session/update · #seq=17
                                </div>
                                added the route.{" "}
                                <span style={{ color: "var(--mute)" }}>
                                    diff broadcast to all participants.
                                </span>
                            </div>
                        </div>
                    </div>

                    <div className="live-window">
                        <div className="head">
                            <span className="who guest">guest · skylarmb</span>
                            <span className="url">
                                wes.acp.v1 · live share rpc
                            </span>
                        </div>
                        <div className="body">
                            <div className="bubble user">
                                <div className="who">
                                    <b>dhash</b> · prompt · #seq=14
                                </div>
                                add a login form to <code>routes/auth.tsx</code>
                                .
                            </div>
                            <div className="bubble agent">
                                <div className="who">
                                    claude · session/update · #seq=15
                                </div>
                                done. opened <code>routes/auth.tsx</code> in
                                your diff view.
                            </div>
                            <div className="bubble user guest-in">
                                <div className="who">
                                    <b>skylarmb (you)</b> · prompt · #seq=16
                                </div>
                                also wire up “forgot password” →{" "}
                                <code>/auth/recover</code>.
                            </div>
                            <div className="bubble agent">
                                <div className="who">
                                    claude · session/update · #seq=17
                                </div>
                                added the route.{" "}
                                <span style={{ color: "var(--mute)" }}>
                                    diff opened in your editor.
                                </span>
                            </div>
                        </div>
                    </div>
                </div>

                <div className="tag-row">
                    <span className="dsb-tag">
                        host approval for guest spawns
                    </span>
                    <span className="dsb-tag">
                        actor identity (live share &gt; gh &gt; ms)
                    </span>
                    <span className="dsb-tag">
                        monotonic per-session sequence
                    </span>
                    <span className="dsb-tag">
                        no host paths in guest payloads
                    </span>
                    <span className="dsb-tag">
                        native diff via wes-acp-diff://
                    </span>
                </div>
            </div>
        </section>
    );
}

function Install() {
    return (
        <section id="install" className="tight">
            <div className="wrap">
                <p className="eyebrow">install</p>
                <h2 className="dsh">one binary. four targets. no daemon.</h2>

                <div className="platforms" style={{ marginBottom: 28 }}>
                    <div className="plat">
                        <div className="name">macOS</div>
                        <div className="arch">aarch64 (apple silicon)</div>
                        <div className="status">released</div>
                    </div>
                    <div className="plat">
                        <div className="name">macOS</div>
                        <div className="arch">x86_64 (intel)</div>
                        <div className="status">released</div>
                    </div>
                    <div className="plat">
                        <div className="name">Linux</div>
                        <div className="arch">x86_64 · aarch64</div>
                        <div className="status">released</div>
                    </div>
                    <div className="plat">
                        <div className="name">Windows</div>
                        <div className="arch">via WSL2</div>
                        <div className="status beta">beta</div>
                    </div>
                </div>

                <div className="install" style={{ marginBottom: 24 }}>
                    <span className="label">macOS · apple silicon</span>
                    <pre>
                        {`# grab the binary
curl -fsSL https://github.com/DhashS/wes/releases/latest/download/wes-macos-aarch64.tar.gz | tar xz
sudo mv wes /usr/local/bin/

# install the vscode extension
code --install-extension wes.vsix

# init in any git repo
cd ~/code/your-project
wes init
wes serve   # the extension will auto-start this for you`}
                    </pre>
                </div>

                <div className="code-pane">
                    {"// .wes/wes.config.json — local, project-scoped"}
                    {"\n"}
                    {"{"}
                    {"\n"}
                    {"  "}
                    <span className="n">
                        "git@github.com:DhashS/wes_test.git"
                    </span>
                    : [{"\n"}
                    {"    {"}
                    {"\n"}
                    {"      "}
                    <span className="n">"folder"</span>:{" "}
                    <span className="s">"/Users/dhash/code/wes_test"</span>,
                    {"\n"}
                    {"      "}
                    <span className="n">"workspaces"</span>: [{"\n"}
                    {"        { "}
                    <span className="n">"name"</span>:{" "}
                    <span className="s">"feat/login"</span>,{" "}
                    <span className="n">"branch"</span>:{" "}
                    <span className="s">"feat/login"</span>,{" "}
                    <span className="n">"tracking_upstream"</span>: true {"}"},
                    {"\n"}
                    {"      "}],{"\n"}
                    {"      "}
                    <span className="n">"workers"</span>: [{"\n"}
                    {"        { "}
                    <span className="n">"name"</span>:{" "}
                    <span className="s">"claude"</span>,{" "}
                    <span className="n">"branch"</span>:{" "}
                    <span className="s">"feat/login"</span> {"}"},{"\n"}
                    {"        { "}
                    <span className="n">"name"</span>:{" "}
                    <span className="s">"codex"</span>,{" "}
                    <span className="n">"branch"</span>:{" "}
                    <span className="s">"feat/login"</span> {"}"}
                    {"\n"}
                    {"      "}]{"\n"}
                    {"    }"}
                    {"\n"}
                    {"  "}]{"\n"}
                    {"}"}
                </div>
            </div>
        </section>
    );
}

function Roadmap() {
    return (
        <section id="roadmap">
            <div className="wrap">
                <p className="eyebrow">roadmap</p>
                <h2 className="dsh">swarms are software-defined.</h2>
                <p className="section-lede">
                    the shape of a swarm is just code against the wes api. a
                    merge queue that fast-forwards ready branches, rebases on
                    conflict, and assigns a worker to the ones that fight back —
                    a couple hundred lines on top of wes. not a separate app.
                    write your own.
                </p>

                <div className="gastown">
                    <div className="roadmap">
                        <div className="rm-item">
                            <div className="when now">now · v0.1</div>
                            <div>
                                <h4>swarm + isolated workers</h4>
                                <p>
                                    workspaces, workers, ACP chat, diffs in the
                                    native editor, vscode tree.
                                </p>
                            </div>
                        </div>
                        <div className="rm-item">
                            <div className="when now">now · v0.1</div>
                            <div>
                                <h4>multiplayer via Live Share</h4>
                                <p>
                                    host-canonical chat log, sanitized
                                    snapshots, guest approval, sequence-ordered
                                    transcript.
                                </p>
                            </div>
                        </div>
                        <div className="rm-item">
                            <div className="when next">next · v0.2</div>
                            <div>
                                <h4>scriptable swarms</h4>
                                <p>
                                    public api so a merge queue, code-review
                                    bot, or your own topology fits in &lt;300
                                    lines.
                                </p>
                            </div>
                        </div>
                        <div className="rm-item">
                            <div className="when next">next · v0.2</div>
                            <div>
                                <h4>remote execution</h4>
                                <p>
                                    workers on a beefy box you don't own. ssh +
                                    tarball provision, host stays on your
                                    laptop.
                                </p>
                            </div>
                        </div>
                        <div className="rm-item">
                            <div className="when next">next · v0.2</div>
                            <div>
                                <h4>chat config marketplace</h4>
                                <p>
                                    local + global <code>chat_config</code> with
                                    prompts, env, isolation. import a config
                                    from a url.
                                </p>
                            </div>
                        </div>
                        <div className="rm-item">
                            <div className="when">later</div>
                            <div>
                                <h4>mobile app</h4>
                                <p>
                                    iOS + android client. read transcripts,
                                    prompt workers, approve diffs from the bus.
                                </p>
                            </div>
                        </div>
                        <div className="rm-item">
                            <div className="when">later</div>
                            <div>
                                <h4>bouncer-mode history</h4>
                                <p>
                                    server-owned ACP replay so a panel can
                                    reattach from offset, not from a client
                                    cache.
                                </p>
                            </div>
                        </div>
                        <div className="rm-item">
                            <div className="when">later</div>
                            <div>
                                <h4>swarm policies</h4>
                                <p>
                                    spawn rules, budget caps, autoscale workers
                                    per branch, kill the worst-performing one.
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    );
}

function Footer() {
    return (
        <footer>
            <div className="wrap row">
                <div>
                    <span className="name">wes</span> · a coordination layer for
                    parallel agent workflows.
                    <br />
                    built by{" "}
                    <a href="https://dha.sh" target="_blank" rel="noreferrer">
                        dhash
                    </a>{" "}
                    · MIT · early stages, breaking changes likely.
                </div>
                <div style={{ display: "flex", gap: 18 }}>
                    <a
                        href="https://github.com/DhashS/wes"
                        target="_blank"
                        rel="noreferrer"
                    >
                        github
                    </a>
                    <a href="#install">install</a>
                    <a href="#roadmap">roadmap</a>
                </div>
            </div>
        </footer>
    );
}

// ============================================================
//   App
// ============================================================
function App() {
    return (
        <>
            <TopBar />
            <Hero />
            <VsCodeMock />
            <Pillars />
            <Swarm />
            <Multiplayer />
            <Install />
            <Roadmap />
            <Footer />
        </>
    );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);