const Landing = ({ onNav }) => {
  const [installer, setInstaller] = React.useState('npm');
  const installCmds = {
    npm: '$ npm install arcrun',
    pip: '$ pip install arcrun',
    bun: '$ bun add arcrun',
  };

  return (
    <div>
      <TopNav onNav={onNav} current="landing" />

      <div className="container">
        <section className="hero">
          <div className="hero-bg" />
          <div className="hero-bg-grid" />
          <div className="hero-eyebrow">
            <span className="dot" />
            <span>Now in public beta — MCP-native</span>
          </div>
          <h1>Build AI workflows<br/><span className="grad">without the glue code.</span></h1>
          <p className="sub">Connect your tools, automate your work. Orchestrate workflows from Claude.ai, your IDE, or a few lines of code — Arcrun handles auth, retries, and state.</p>
          <div className="hero-ctas">
            <button className="btn btn-primary btn-lg" onClick={() => onNav('auth')}>
              Start free <Icon name="arrow_right" size={15} />
            </button>
            <button className="btn btn-secondary btn-lg">
              <Icon name="book" size={14} /> Read the docs
            </button>
          </div>
        </section>

        <section className="paths">
          {/* Developer path */}
          <div className="path-card">
            <div className="path-label">
              <Icon name="terminal" size={13} /> For Developers
            </div>
            <h3>Three lines, any runtime.</h3>
            <p className="lede">Install once, call Arcrun from Node, Python, or your edge runtime. OAuth, rate limits, and retries are handled.</p>

            <div className="install-tabs">
              {Object.keys(installCmds).map(k => (
                <button key={k} className={installer === k ? 'active' : ''} onClick={() => setInstaller(k)}>{k}</button>
              ))}
            </div>

            <div className="terminal" style={{marginBottom: 12}}>
              <div className="terminal-head">
                <div className="dots"><span/><span/><span/></div>
                <div className="title">terminal</div>
              </div>
              <div className="terminal-body">
                <div><span className="dim">{installCmds[installer]}</span></div>
              </div>
            </div>

            <div className="terminal">
              <div className="terminal-head">
                <div className="dots"><span/><span/><span/></div>
                <div className="title">{installer === 'pip' ? 'app.py' : 'app.ts'}</div>
              </div>
              <div className="terminal-body">
                {installer === 'pip' ? (
                  <>
                    <div><span className="c1">from</span> <span className="c2">arcrun</span> <span className="c1">import</span> <span className="c2">Arcrun</span></div>
                    <div className="sp-4"/>
                    <div><span className="c2">client</span> = <span className="c4">Arcrun</span>(<span className="c2">token</span>=<span className="c2">os</span>.<span className="c4">getenv</span>(<span className="c3">"ARCRUN_KEY"</span>))</div>
                    <div><span className="c2">run</span> = <span className="c2">client</span>.<span className="c4">run</span>(<span className="c3">"digest/weekly"</span>, <span className="c2">inputs</span>={'{'}<span className="c3">"user"</span>: <span className="c3">"u_219"</span>{'}'})</div>
                  </>
                ) : (
                  <>
                    <div><span className="c1">import</span> {'{'} <span className="c2">Arcrun</span> {'}'} <span className="c1">from</span> <span className="c3">"arcrun"</span>;</div>
                    <div className="sp-4"/>
                    <div><span className="c1">const</span> <span className="c2">client</span> = <span className="c1">new</span> <span className="c4">Arcrun</span>({'{'} <span className="c2">token</span>: <span className="c2">process</span>.<span className="c2">env</span>.<span className="c2">ARCRUN_KEY</span> {'}'});</div>
                    <div><span className="c1">const</span> <span className="c2">run</span> = <span className="c1">await</span> <span className="c2">client</span>.<span className="c4">run</span>(<span className="c3">"digest/weekly"</span>, {'{'} <span className="c2">user</span>: <span className="c3">"u_219"</span> {'}'});</div>
                  </>
                )}
              </div>
            </div>

            <div className="sp-16" />
            <div className="flex gap-12" style={{fontSize: 12.5, color: 'var(--text-mute)'}}>
              <span className="flex gap-6" style={{alignItems: 'center'}}><Icon name="check" size={12} /> Typed SDKs</span>
              <span className="flex gap-6" style={{alignItems: 'center'}}><Icon name="check" size={12} /> Idempotent runs</span>
              <span className="flex gap-6" style={{alignItems: 'center'}}><Icon name="check" size={12} /> Self-host ready</span>
            </div>
          </div>

          {/* Everyone path */}
          <div className="path-card">
            <div className="path-label">
              <Icon name="spark" size={13} /> For Everyone
            </div>
            <h3>Talk to your workflows.</h3>
            <p className="lede">Install Arcrun inside your AI assistant and run your apps by asking. Trigger workflows, fetch data, or draft messages — in plain English.</p>

            <div className="chat-preview">
              <div className="chat-head">
                <span className="brand-dot">AI</span>
                <span>Your assistant — Arcrun connected</span>
                <span style={{marginLeft: 'auto'}} className="pill active"><span className="pdot" />2 apps</span>
              </div>
              <div className="chat-body">
                <div className="chat-msg user">
                  <div className="avatar">M</div>
                  <div className="bubble">Send this week's customer digest to the revenue team.</div>
                </div>
                <div className="chat-msg ai">
                  <div className="avatar">A</div>
                  <div className="bubble">
                    Running <span style={{color: 'var(--primary)', fontWeight: 500}}>digest/weekly</span> for 147 accounts, then posting to #revenue.
                    <div className="tool-card">
                      <div className="tool-icon">AR</div>
                      <div className="tool-meta">
                        <div className="tool-name">arcrun · digest/weekly</div>
                        <div className="tool-sub">4 of 5 steps complete · 00:12 elapsed</div>
                      </div>
                      <span className="pill active"><span className="pdot" />running</span>
                    </div>
                  </div>
                </div>
              </div>
              <div className="chat-input">
                <span>Reply to your assistant…</span>
                <span className="caret" />
              </div>
            </div>

            <div className="sp-16" />
            <div className="flex gap-12" style={{fontSize: 12.5, color: 'var(--text-mute)'}}>
              <span className="flex gap-6" style={{alignItems: 'center'}}><Icon name="check" size={12} /> One-click connect</span>
              <span className="flex gap-6" style={{alignItems: 'center'}}><Icon name="check" size={12} /> Works in your IDE</span>
              <span className="flex gap-6" style={{alignItems: 'center'}}><Icon name="check" size={12} /> Audit trail</span>
            </div>
          </div>
        </section>

        <section className="strip">
          <div className="cell">
            <div className="ico"><Icon name="bolt" size={15} /></div>
            <h4>Run anywhere</h4>
            <p>Node, Python, Deno, Bun, Cloudflare Workers. One API, same semantics.</p>
          </div>
          <div className="cell">
            <div className="ico"><Icon name="workflow" size={15} /></div>
            <h4>Composable steps</h4>
            <p>Model calls, HTTP, database, branching — wire them visually or in code.</p>
          </div>
          <div className="cell">
            <div className="ico"><Icon name="key" size={15} /></div>
            <h4>Scoped keys</h4>
            <p>Per-workflow API keys with fine-grained scopes and live revocation.</p>
          </div>
          <div className="cell">
            <div className="ico"><Icon name="eye" size={15} /></div>
            <h4>Observable</h4>
            <p>Every run is replayable. Inspect inputs, outputs, and token usage.</p>
          </div>
        </section>
      </div>

      <Footer onNav={onNav} />
    </div>
  );
};

window.Landing = Landing;