function Quickstart() {
  const [tab, setTab] = React.useState('npm');
  const [copied, setCopied] = React.useState(false);
  const tabs = [
    { id: 'npm', label: 'npm', cmd: 'npx foreman-sh init', sub: 'Recommended. Drops .claude/ + CLAUDE.md into your repo.' },
    { id: 'plugin', label: 'Claude plugin', cmd: '/plugin marketplace add fatihguner/foreman\n/plugin install foreman@foreman-marketplace', sub: 'For Claude Code users.' },
    { id: 'git', label: 'Clone', cmd: 'git clone https://github.com/fatihguner/foreman.git\ncd foreman', sub: 'Manual install.' },
    { id: 'codex', label: 'Codex', cmd: 'git clone https://github.com/fatihguner/foreman.git\ncd foreman\n./scripts/build-codex.sh --clean', sub: 'Codex plugin build.' },
    { id: 'oc', label: 'OpenClaw', cmd: 'git clone https://github.com/fatihguner/foreman.git\ncd foreman\n./scripts/openclaw-setup.sh', sub: 'OpenClaw native plugin.' },
  ];
  const t = tabs.find((x) => x.id === tab);
  const copy = () => {
    navigator.clipboard?.writeText(t.cmd);
    setCopied(true);
    setTimeout(() => setCopied(false), 1200);
  };

  return (
    <section id="install" style={{ paddingTop: 96, paddingBottom: 96, borderTop: '1px solid var(--line)', background: 'var(--paper-3)' }}>
      <div className="container">
        <header style={{ display: 'grid', gridTemplateColumns: '160px 1fr', gap: 48, marginBottom: 48 }}>
          <div className="eyebrow">/10 &nbsp; Quickstart</div>
          <div>
            <h2 style={{ fontSize: 'clamp(40px, 5vw, 64px)', fontWeight: 700, letterSpacing: '-0.035em', maxWidth: 900, textWrap: 'balance' }}>
              One command. Then talk.
            </h2>
            <p style={{ marginTop: 20, fontSize: 18, color: 'var(--muted)', maxWidth: 720, lineHeight: 1.5 }}>
              Foreman runs wherever AI agents run. Pick a platform. Paste. Open Claude Code. Start a real conversation about your business.
            </p>
          </div>
        </header>

        <div style={{ display: 'flex', gap: 6, marginBottom: 16, flexWrap: 'wrap' }}>
          {tabs.map((x) => (
            <button key={x.id} onClick={() => setTab(x.id)} style={{
              padding: '10px 16px',
              background: tab === x.id ? 'var(--ink)' : 'var(--paper)',
              color: tab === x.id ? 'white' : 'var(--ink-2)',
              border: '1px solid ' + (tab === x.id ? 'var(--ink)' : 'var(--line)'),
              fontSize: 13, fontWeight: 500,
            }}>{x.label}</button>
          ))}
        </div>

        <div style={{ background: 'var(--paper)', border: '1px solid var(--line)' }}>
          <div style={{ padding: '14px 20px', borderBottom: '1px solid var(--line)', display: 'flex', alignItems: 'center', justifyContent: 'space-between', background: 'var(--paper-2)' }}>
            <span className="mono" style={{ fontSize: 12, color: 'var(--muted)' }}>~ {t.label}</span>
            <button onClick={copy} className="mono" style={{
              background: 'transparent', border: '1px solid var(--line)',
              padding: '4px 12px', fontSize: 11, color: 'var(--ink-2)',
            }}>{copied ? '\u2713 copied' : 'copy'}</button>
          </div>
          <pre className="mono" style={{
            margin: 0, padding: '24px 24px',
            fontSize: 14, lineHeight: 1.6, color: 'var(--ink)',
            whiteSpace: 'pre-wrap',
          }}>{t.cmd.split('\n').map((l, i) => (
            <span key={i}><span style={{ color: 'var(--muted-2)' }}>$ </span>{l}{'\n'}</span>
          ))}</pre>
          <div style={{ padding: '14px 20px', borderTop: '1px solid var(--line)', fontSize: 13, color: 'var(--muted)' }}>
            {t.sub}
          </div>
        </div>

        <div style={{
          marginTop: 28, padding: '24px 28px',
          background: 'var(--paper)', border: '1px solid var(--line)',
        }}>
          <div className="eyebrow" style={{ marginBottom: 10 }}>Then say something like</div>
          <div style={{ fontSize: 22, fontWeight: 500, letterSpacing: '-0.015em', lineHeight: 1.4, color: 'var(--ink-2)', textWrap: 'pretty' }}>
            &ldquo;My SaaS churn rate is 5.2% and I&rsquo;m preparing for Series A. What should I focus on?&rdquo;
          </div>
        </div>
      </div>
    </section>
  );
}
window.Quickstart = Quickstart;