// Home / Introduction page
function Home() {
  const shell = useShell();
  const tocItems = [
    { id: 'what', label: 'What is ClawAgen?' },
    { id: 'start', label: 'Where to start' },
    { id: 'principles', label: 'Design principles' },
    { id: 'principles-fs', label: 'Filesystem is truth', level: 3 },
    { id: 'principles-tools', label: 'Two tools, always', level: 3 },
    { id: 'principles-isolation', label: 'One folder per user', level: 3 },
    { id: 'libraries', label: 'Client libraries' },
    { id: 'help', label: 'Getting help' },
  ];

  return (
    <div className="app">
      <Topbar section="docs" theme={shell.theme} setTheme={shell.setTheme} onSearch={() => shell.setSearchOpen(true)} />
      <div className="main">
        <Sidebar activeId="introduction" />
        <article className="content">
          <div className="crumbs">
            <a href="#">Docs</a>
            <span className="sep">/</span>
            <a href="#">Getting started</a>
            <span className="sep">/</span>
            <span>Introduction</span>
          </div>

          <div className="eyebrow">Documentation · v0.1</div>
          <h1 className="h1">A personal AI agent <em>for every user.</em></h1>
          <p className="lede">
            ClawAgen is an agent-as-a-service platform. Every signup gets one persistent AI
            agent — with its own memory, Markdown skills, channel connections, and scheduled
            tasks. Multi-tenant SaaS, filesystem-first, physically isolated per user.
          </p>

          <div style={{display:'flex', gap:10, marginBottom:36, flexWrap:'wrap'}}>
            <a href="quickstart.html" className="btn-primary">
              <Icon name="rocket" size={13} stroke={2}/> Start in 2 minutes
            </a>
            <a href="api-reference.html" className="btn-ghost" style={{border:'1px solid var(--line)'}}>
              <Icon name="code" size={13} stroke={2} style={{marginRight:6}}/> Read the API reference
            </a>
            <span className="tag-pill">
              <span style={{width:6,height:6,borderRadius:'50%',background:'oklch(0.62 0.12 150)'}}/>
              All systems operational
            </span>
          </div>

          <h2 id="what" className="h2">What is ClawAgen?</h2>
          <p>
            ClawAgen mirrors <a className="inline" href="https://openclaw.sh" target="_blank" rel="noreferrer">OpenClaw's</a>{' '}
            local-agent architecture and adapts it for the cloud. Every tenant gets an isolated
            <code> /data/tenants/&#123;id&#125;/</code> workspace: their own agents, skills, memory files,
            and SQLite database — physically separated, not just logically.
          </p>
          <p>
            Behind the scenes each tenant runs <strong>two agents</strong>: an <em style={{color:'var(--ink-3)', fontStyle:'italic'}}>Admin</em>
            agent for the owner (broad toolset) and a <em style={{color:'var(--ink-3)', fontStyle:'italic'}}>CS</em> agent for
            customer-facing channels (restricted). Both share the tenant's skills, memory, and personality —
            but speak with different voices and permissions.
          </p>

          <CodeBlock
            tabs={[
              { label: 'curl', raw: `curl https://api.clawagen.com/api/admin \\\n  -H "X-API-Key: $CLAWAGEN_KEY" \\\n  -H "Content-Type: application/json" \\\n  -d '{"message":"Summarize my unread WhatsApp messages"}'`,
                code: `<span class="tok-com">$</span> curl https://api.clawagen.com/api/admin <span class="tok-pun">\\</span>
  -H <span class="tok-str">"X-API-Key: $CLAWAGEN_KEY"</span> <span class="tok-pun">\\</span>
  -H <span class="tok-str">"Content-Type: application/json"</span> <span class="tok-pun">\\</span>
  -d <span class="tok-str">'{"message":"Summarize my unread WhatsApp messages"}'</span>` },
              { label: 'node.js', raw: `import { ClawAgen } from '@clawagen/node';\nconst c = new ClawAgen(process.env.CLAWAGEN_KEY);\n\nfor await (const chunk of c.chat.admin.stream({\n  message: 'Summarize my unread WhatsApp messages',\n})) {\n  process.stdout.write(chunk.delta);\n}`,
                code: `<span class="tok-kw">import</span> { ClawAgen } <span class="tok-kw">from</span> <span class="tok-str">'@clawagen/node'</span>;
<span class="tok-kw">const</span> <span class="tok-var">c</span> = <span class="tok-kw">new</span> <span class="tok-fn">ClawAgen</span>(process.env.CLAWAGEN_KEY);

<span class="tok-kw">for await</span> (<span class="tok-kw">const</span> <span class="tok-var">chunk</span> <span class="tok-kw">of</span> c.chat.admin.<span class="tok-fn">stream</span>({
  message: <span class="tok-str">'Summarize my unread WhatsApp messages'</span>,
})) {
  process.stdout.<span class="tok-fn">write</span>(chunk.delta);
}` },
              { label: 'python', raw: `from clawagen import ClawAgen\nc = ClawAgen(api_key=os.environ["CLAWAGEN_KEY"])\n\nfor chunk in c.chat.admin.stream(message="Summarize my unread WhatsApp messages"):\n    print(chunk.delta, end="", flush=True)`,
                code: `<span class="tok-kw">from</span> clawagen <span class="tok-kw">import</span> ClawAgen
<span class="tok-var">c</span> = <span class="tok-fn">ClawAgen</span>(api_key=os.environ[<span class="tok-str">"CLAWAGEN_KEY"</span>])

<span class="tok-kw">for</span> chunk <span class="tok-kw">in</span> c.chat.admin.<span class="tok-fn">stream</span>(message=<span class="tok-str">"Summarize my unread WhatsApp messages"</span>):
    <span class="tok-fn">print</span>(chunk.delta, end=<span class="tok-str">""</span>, flush=<span class="tok-kw">True</span>)` },
            ]}
          />

          <h2 id="start" className="h2">Where to start</h2>
          <p>Pick the path that matches how you learn.</p>

          <div className="card-grid">
            <a className="card" href="quickstart.html">
              <div className="card-ico"><Icon name="rocket" size={16}/></div>
              <h3>Quickstart</h3>
              <p>Claim your tenant, write your first skill, and get a reply from your agent — in under five minutes.</p>
              <span className="arr"><Icon name="arrowR" size={14} stroke={2}/></span>
            </a>
            <a className="card" href="guide.html">
              <div className="card-ico"><Icon name="puzzle" size={16}/></div>
              <h3>How ClawAgen works</h3>
              <p>A walkthrough of multi-tenant isolation, the 2-tool runtime, and progressive context disclosure.</p>
              <span className="arr"><Icon name="arrowR" size={14} stroke={2}/></span>
            </a>
            <a className="card" href="api-reference.html">
              <div className="card-ico"><Icon name="code" size={16}/></div>
              <h3>API reference</h3>
              <p>Every endpoint, every header, every streaming event. Searchable and copy-paste-ready.</p>
              <span className="arr"><Icon name="arrowR" size={14} stroke={2}/></span>
            </a>
            <a className="card" href="#">
              <div className="card-ico"><Icon name="zap" size={16}/></div>
              <h3>Channels</h3>
              <p>Connect WhatsApp, Telegram, Messenger, Instagram DMs, or the web widget — each with per-tenant credentials.</p>
              <span className="arr"><Icon name="arrowR" size={14} stroke={2}/></span>
            </a>
          </div>

          <h2 id="principles" className="h2">Design principles</h2>
          <p>Three ideas shape every product decision. When something in the API feels unusual,
          <em style={{color:'var(--ink-3)', fontStyle:'italic'}}> "why did they do it like that?"</em> — this is the answer.</p>

          <h3 id="principles-fs" className="h3">Filesystem is truth</h3>
          <p>
            Every tenant's data lives in a folder of Markdown files. <code>IDENTITY.md</code>, <code>SOUL.md</code>,{' '}
            <code>MEMORY.md</code>, <code>skills/&#42;/SKILL.md</code> — humans can read them with <code>cat</code>,{' '}
            version them with git, edit them in Cursor. SQLite is just a rebuildable index on top.
          </p>

          <Callout type="note" title="Why this matters">
            Delete <code>data.db</code> and your agent loses nothing — the reindexer reads the files
            back in. Debugging an agent? Open its folder. No ORM, no schema migrations, no mystery.
          </Callout>

          <h3 id="principles-tools" className="h3">Two tools, always</h3>
          <p>
            The LLM only ever sees two tools: <code>bash</code> and <code>load_skill</code>. Every other operation —
            scheduling a cron, searching memory, sending a WhatsApp reply — is a subcommand of the{' '}
            <code>tunder</code> CLI that <code>bash</code> runs. This pattern (borrowed from{' '}
            <a className="inline" href="https://blog.cloudflare.com/code-mode-mcp/" target="_blank" rel="noreferrer">Cloudflare Code Mode</a>)
            saves ~15K tokens per request vs MCP schemas for 60+ operations.
          </p>

          <h3 id="principles-isolation" className="h3">One folder per user</h3>
          <p>
            Tenant isolation is a directory boundary, not a VPC. Each user's data lives under{' '}
            <code>/data/tenants/&#123;id&#125;/</code> with a per-tenant SQLite file. 10,000 users = 10,000 folders,
            not 10,000 containers. A query against tenant A cannot see tenant B — they open different database files.
          </p>

          <Callout type="info" title="Pool model with data isolation">
            This pattern is documented in the{' '}
            <a className="inline" href="https://docs.aws.amazon.com/wellarchitected/latest/saas-lens/saas-lens.html" target="_blank" rel="noreferrer">AWS SaaS Lens</a>{' '}
            and used by Turso, Notion, Linear, and Claude Projects. Shared compute, isolated data.
          </Callout>

          <h2 id="libraries" className="h2">Client libraries</h2>
          <p>Official SDKs, all open source, all under MIT. More coming in later phases.</p>

          <div className="card-grid" style={{gridTemplateColumns:'repeat(3, 1fr)'}}>
            {[
              { name: 'Node.js', ver: 'v0.1.0 · preview', icon: 'code' },
              { name: 'Python', ver: 'v0.1.0 · preview', icon: 'terminal' },
              { name: 'CLI (tunder)', ver: 'ships with agents', icon: 'terminal' },
            ].map(s => (
              <a key={s.name} className="card" href="#" style={{padding:'18px 18px 16px'}}>
                <div style={{display:'flex', alignItems:'center', gap:10, marginBottom:8}}>
                  <div className="card-ico" style={{margin:0, width:28, height:28}}><Icon name={s.icon} size={14}/></div>
                  <h3 style={{margin:0}}>{s.name}</h3>
                </div>
                <p style={{fontFamily:'var(--font-mono)', fontSize:12}}>{s.ver}</p>
              </a>
            ))}
          </div>

          <h2 id="help" className="h2">Getting help</h2>
          <p>
            ClawAgen is pre-release — expect rough edges. For questions and bug reports, open an issue on{' '}
            <a className="inline" href="https://github.com/carrickcheah/ai-agents" target="_blank" rel="noreferrer">GitHub</a>.
            For incidents, check the status page (coming soon).
          </p>

          <Feedback />
          <PageFoot next={{ label: 'Quickstart', href: 'quickstart.html' }} />
        </article>
        <TOC items={tocItems} />
      </div>
      <SearchOverlay open={shell.searchOpen} onClose={() => shell.setSearchOpen(false)} />
      <TweaksPanel visible={shell.tweaksVisible} theme={shell.theme} setTheme={shell.setTheme} />
    </div>
  );
}
ReactDOM.createRoot(document.getElementById('root')).render(<Home />);