// sections.jsx — page sections

const HERO_SCRIPT = [
  { kind: 'cmd', text: 'gr start jobs' },
  { kind: 'muted', text: '→ resolving group "jobs"… 3 services' },
  { kind: 'ok', text: '✓ jobs-board    started on :7400  (pid 38214)' },
  { kind: 'ok', text: '✓ jobs-server   started on :7401  (pid 38219)' },
  { kind: 'ok', text: '✓ jobs-worker   started on :7402  (pid 38223)' },
  { kind: 'muted', text: '  ready in 1.2s · http://jobs.gr.local' },
  { kind: 'cmd', text: 'gr status' },
  { kind: 'muted', text: '  GROUP    SERVICE         PORT   STATUS' },
  { kind: '', text: '  jobs     jobs-board      7400   <span class="ok">● running</span>' },
  { kind: '', text: '  jobs     jobs-server     7401   <span class="ok">● running</span>' },
  { kind: '', text: '  jobs     jobs-worker     7402   <span class="ok">● running</span>' },
  { kind: '', text: '  admin    admin           8032   <span class="ok">● running</span>' },
  { kind: '', text: '  data     postgres        5432   <span class="ok">● running</span>' },
];

function SplitHeroPanes() {
  return (
    <div className="split-hero">
      <div className="split-pane">
        <div className="split-head">
          <span className="dot-r r" /><span className="dot-r y" /><span className="dot-r g" />
          <span style={{ marginLeft: 8, opacity: .7 }}>cli · gr</span>
        </div>
        <div className="split-body term">
          <div><span className="prompt">$ </span><span className="hl">gr</span> <span className="arg">group start @jobs</span></div>
          <div className="muted">→ resolving 3 services</div>
          <div><span className="ok">✓</span> jobs-board   <span className="num">:7400</span></div>
          <div><span className="ok">✓</span> jobs-server  <span className="num">:7401</span></div>
          <div><span className="ok">✓</span> jobs-worker  <span className="num">:7402</span></div>
          <div className="muted">  ready in 1.2s</div>
          <div style={{ height: 6 }} />
          <div><span className="prompt">$ </span><span className="cursor" /></div>
        </div>
      </div>
      <div className="split-pane">
        <div className="split-head">
          <span className="dot-r r" /><span className="dot-r y" /><span className="dot-r g" />
          <span style={{ marginLeft: 8, opacity: .7 }}>gui · @jobs</span>
        </div>
        <div className="split-body gui">
          {[
            { n: 'jobs-board', p: 7400, run: true, cpu: '2.4%' },
            { n: 'jobs-server', p: 7401, run: true, cpu: '5.1%' },
            { n: 'jobs-worker', p: 7402, run: true, cpu: '1.2%' },
            { n: 'postgres', p: 5432, run: false, cpu: '—' },
          ].map(s => (
            <div key={s.n} className={`gui-row ${s.run ? 'live' : ''}`}>
              <span className={`pill ${s.run ? 'run' : ''}`} style={{ minWidth: 48, justifyContent: 'center' }}>
                <span className="dot" />{s.run ? 'RUN' : 'OFF'}
              </span>
              <div>
                <div className="gname">{s.n}</div>
                <div className="gmeta">localhost:{s.p}</div>
              </div>
              <span className="gcpu">{s.cpu}</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function Hero() {
  return (
    <section className="hero container" id="top">
      <div className="hero-grid">
        <div>
          <span className="eyebrow">v1.0 · macOS · Windows · Linux</span>
          <h1 style={{ marginTop: 18 }}>
            Localhost,<br />
            <span className="accent">under control.</span>
          </h1>
          <p className="hero-sub">
            CLI, native app, browser extension, SDKs — one local daemon, four surfaces.
            Address every service by name. <span className="mono" style={{ color: 'var(--ink)' }}>gr start jobs</span>, not <span className="mono">:7400</span>.
          </p>
          <div className="hero-ctas">
            <a className="btn btn-primary btn-lg"><Icon name="apple" size={15} /> Download for macOS</a>
            <a className="btn btn-lg"><Icon name="arrow" size={15} /> All platforms</a>
          </div>
          <div className="os-row">
            <span className="dim mono" style={{ fontSize: 12 }}>also</span>
            <span className="os-pill"><span className="dot" />npm i @slowdutch/gretl</span>
            <span className="os-pill"><span className="dot" />brew install gr</span>
          </div>
        </div>
        <div>
          <SplitHeroPanes />
        </div>
      </div>
      <div style={{ marginTop: 60 }}>
        <Terminal script={HERO_SCRIPT} height={260} />
      </div>
    </section>
  );
}

/* ── App screenshot showcase ─────────────── */
function AppShotSection() {
  return (
    <section className="section container">
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.25fr', gap: 64, alignItems: 'center' }} className="responsive-2col">
        <div>
          <span className="eyebrow">The desktop app</span>
          <h2 style={{ marginTop: 14 }}>One window for every service.</h2>
          <p className="dim" style={{ marginTop: 18, fontSize: 16, lineHeight: 1.6 }}>
            Native on macOS, Windows, Linux. Group sidebar on the left, live service list on the right.
            Click to open, restart, or tail logs — same actions you'd do from the CLI, in a window built for browsing.
          </p>
          <ul className="check-list" style={{ marginTop: 18, fontSize: 14.5, color: 'var(--ink-2)', lineHeight: 1.7, paddingLeft: 0, listStyle: 'none' }}>
            <li><span style={{ color: 'var(--accent)', marginRight: 8 }}>✓</span>Live CPU + memory per service</li>
            <li><span style={{ color: 'var(--accent)', marginRight: 8 }}>✓</span>Detected listeners ready to adopt</li>
            <li><span style={{ color: 'var(--accent)', marginRight: 8 }}>✓</span>Drag groups to reorder, ⌘K to jump anywhere</li>
          </ul>
        </div>
        <div style={{ position: 'relative' }}>
          <div className="appshot">
            <div className="app-titlebar">
              <span className="dot-r r" /><span className="dot-r y" /><span className="dot-r g" />
              <div className="app-tabs">
                <span className="on">Services</span><span>Groups</span><span>Logs</span><span>Settings</span>
              </div>
            </div>
            <div className="app-grid">
              <div className="app-side">
                <div className="ah">Groups</div>
                <div className="ar on"><span className="ad" />@jobs <span className="acount">3</span></div>
                <div className="ar"><span className="ad" />@data <span className="acount">2</span></div>
                <div className="ar"><span className="ad" />@web <span className="acount">3</span></div>
                <div className="ar"><span className="ad" />@admin <span className="acount">2</span></div>
                <div className="ah">All</div>
                <div className="ar"><span className="ad" />Detected (4)</div>
                <div className="ar"><span className="ad" />Stopped (8)</div>
              </div>
              <div className="app-main">
                <div className="ahdr">@JOBS · 3 SERVICES · ALL HEALTHY</div>
                {[
                  { n: 'jobs-board', p: 7400, cpu: '2.4%', run: true, act: 'open' },
                  { n: 'jobs-server', p: 7401, cpu: '5.1%', run: true, act: 'open' },
                  { n: 'jobs-worker', p: 7402, cpu: '1.2%', run: true, act: 'logs' },
                ].map(r => (
                  <div className="arow" key={r.n}>
                    <span className="pill run" style={{ minWidth: 74, justifyContent: 'center' }}><span className="dot" />RUNNING</span>
                    <span className="aname">{r.n}</span>
                    <span className="aport">:{r.p}</span>
                    <span className="acpu">{r.cpu} cpu</span>
                    <span className="aact">{r.act}</span>
                  </div>
                ))}
                <div className="ahdr" style={{ marginTop: 18 }}>@DATA · 2 SERVICES</div>
                <div className="arow"><span className="pill run" style={{ minWidth: 74, justifyContent: 'center' }}><span className="dot" />RUNNING</span><span className="aname">postgres</span><span className="aport">:5432</span><span className="acpu">3.8% cpu</span><span className="aact">open</span></div>
                <div className="arow"><span className="pill" style={{ minWidth: 74, justifyContent: 'center' }}><span className="dot" />STOPPED</span><span className="aname">redis</span><span className="aport">:6379</span><span className="acpu">—</span><span className="aact">start</span></div>
              </div>
            </div>
          </div>
          {/* annotations */}
          <div className="annot" style={{ top: 118, left: -20, transform: 'translateX(-100%)' }}>
            <span className="annot-label">name, not :7400</span>
          </div>
          <svg className="annot-line" width="120" height="40" style={{ top: 138, left: -10, transform: 'translateX(-100%)' }} viewBox="0 0 120 40" fill="none">
            <path d="M2 20 C 50 20, 80 20, 115 20" stroke="var(--accent)" strokeWidth="1.2" strokeDasharray="3 4" />
            <circle cx="115" cy="20" r="3" fill="var(--accent)" />
          </svg>
          <div className="annot" style={{ top: 60, right: -20, transform: 'translateX(100%)' }}>
            <span className="annot-label">group sidebar</span>
          </div>
          <svg className="annot-line" width="120" height="40" style={{ top: 80, right: -10, transform: 'translateX(100%) scaleX(-1)' }} viewBox="0 0 120 40" fill="none">
            <path d="M2 20 C 50 20, 80 20, 115 20" stroke="var(--accent)" strokeWidth="1.2" strokeDasharray="3 4" />
            <circle cx="115" cy="20" r="3" fill="var(--accent)" />
          </svg>
        </div>
      </div>
    </section>
  );
}

/* ── Name-based control demo ─────────────── */
function NameSection() {
  const [mode, setMode] = React.useState('name'); // 'name' | 'port'
  return (
    <section className="section container">
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'center' }} className="responsive-2col">
        <div>
          <span className="eyebrow">Name-based control</span>
          <h2 style={{ marginTop: 14 }}>Stop memorizing port numbers.</h2>
          <p className="dim" style={{ marginTop: 18, maxWidth: 480, fontSize: 16, lineHeight: 1.6 }}>
            Register a service once and address it by name forever. Gretl owns the bookkeeping —
            you address services the way you actually think about them.
          </p>
          <div className="tabs" style={{ marginTop: 24 }}>
            <button className={`tab ${mode === 'name' ? 'on' : ''}`} onClick={() => setMode('name')}>by name</button>
            <button className={`tab ${mode === 'port' ? 'on' : ''}`} onClick={() => setMode('port')}>by port</button>
          </div>
        </div>
        <div className="panel">
          <div className="panel-hd">
            <span className="dot-r r" /><span className="dot-r y" /><span className="dot-r g" />
            <span style={{ marginLeft: 8, opacity: .7 }}>compare</span>
          </div>
          <div className="code">
            {mode === 'name' ? (
              <React.Fragment>
                <span className="c"># readable, portable across machines</span>{'\n'}
                <span className="fn">gr</span> start <span className="s">jobs</span>{'\n'}
                <span className="fn">gr</span> open <span className="s">admin</span>{'\n'}
                <span className="fn">gr</span> logs <span className="s">postgres</span> --tail <span className="n">100</span>{'\n'}
                <span className="fn">gr</span> stop <span className="s">studio</span>{'\n'}
                {'\n'}
                <span className="c"># or in code</span>{'\n'}
                <span className="k">await</span> gr.<span className="fn">ensure</span>(<span className="s">'jobs-server'</span>){'\n'}
                <span className="k">const</span> url = gr.<span className="fn">url</span>(<span className="s">'jobs-server'</span>) <span className="c">// http://localhost:7401</span>
              </React.Fragment>
            ) : (
              <React.Fragment>
                <span className="c"># breaks the moment a port shifts</span>{'\n'}
                lsof -ti:<span className="n">7400</span> | xargs kill -<span className="n">9</span>{'\n'}
                open http://localhost:<span className="n">8032</span>{'\n'}
                tail -f /tmp/postgres-<span className="n">5432</span>.log{'\n'}
                kill -<span className="n">9</span> $(lsof -ti:<span className="n">9000</span>){'\n'}
                {'\n'}
                <span className="c"># or in code</span>{'\n'}
                <span className="k">const</span> url = <span className="s">'http://localhost:7401'</span>{'\n'}
                <span className="c">// hope nothing else grabbed it first</span>
              </React.Fragment>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ── Group management demo ────────────────── */
function GroupSection() {
  const [running, setRunning] = React.useState({ jobs: false, data: true, web: false });

  const toggle = (g) => setRunning(r => ({ ...r, [g]: !r[g] }));

  const Group = ({ id, label, color, services }) => (
    <div className={`group-card ${running[id] ? 'active' : ''}`}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <span style={{ width: 8, height: 8, borderRadius: 2, background: color }} />
          <span className="mono" style={{ fontSize: 13 }}>{label}</span>
          <span className="pill" style={{ marginLeft: 6 }}>{services.length}</span>
        </div>
        <button className={`btn ${running[id] ? '' : 'btn-primary'}`} style={{ padding: '5px 10px', fontSize: 12 }} onClick={() => toggle(id)}>
          {running[id] ? <><Icon name="stop" size={11} /> stop</> : <><Icon name="play" size={11} /> start</>}
        </button>
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 5, marginTop: 6 }}>
        {services.map((s, i) => (
          <div key={s.n} className={`group-row ${running[id] ? 'live' : ''}`} style={{ transitionDelay: running[id] ? `${i * 120}ms` : '0ms' }}>
            <span className={`pill ${running[id] ? 'run' : ''}`} style={{ minWidth: 74, justifyContent: 'center' }}>
              <span className="dot" />{running[id] ? 'running' : 'stopped'}
            </span>
            <span className="port">{s.p}</span>
            <span className="name">{s.n}</span>
          </div>
        ))}
      </div>
    </div>
  );

  return (
    <section className="section container">
      <div style={{ maxWidth: 680, marginBottom: 48 }}>
        <span className="eyebrow">Groups</span>
        <h2 style={{ marginTop: 14 }}>Boot a stack with one command.</h2>
        <p className="dim" style={{ marginTop: 18, fontSize: 16, lineHeight: 1.6 }}>
          Group your services in <span className="mono" style={{ color: 'var(--ink)' }}>gr.toml</span> and bring up an entire feature
          area in the right order, with health checks. Try the buttons →
        </p>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 14 }} className="responsive-3col">
        <Group id="jobs" label="@jobs" color="oklch(0.86 0.22 145)" services={[
          { n: 'jobs-board', p: 7400 },
          { n: 'jobs-server', p: 7401 },
          { n: 'jobs-worker', p: 7402 },
        ]} />
        <Group id="data" label="@data" color="oklch(0.78 0.16 220)" services={[
          { n: 'postgres', p: 5432 },
          { n: 'redis', p: 6379 },
          { n: 'mailpit', p: 1025 },
        ]} />
        <Group id="web" label="@web" color="oklch(0.8 0.15 60)" services={[
          { n: 'site', p: 6001 },
          { n: 'docs', p: 6000 },
          { n: 'storybook', p: 6006 },
        ]} />
      </div>
      <div className="mono dim" style={{ marginTop: 20, fontSize: 12.5 }}>$ gr group start @jobs · gr group up --all · gr group restart @data</div>
    </section>
  );
}

/* ── SDK tabs ─────────────────────────────── */
const SDK_SAMPLES = {
  npm: {
    label: '@slowdutch/gretl',
    body: (<>
      <span className="k">import</span> {'{'} gr {'}'} <span className="k">from</span> <span className="s">'@slowdutch/gretl'</span>{'\n'}
      {'\n'}
      <span className="c">// register once, address by name everywhere</span>{'\n'}
      <span className="k">await</span> gr.<span className="fn">register</span>({'{'}{'\n'}
      {'  '}name: <span className="s">'jobs-server'</span>,{'\n'}
      {'  '}port: <span className="n">7401</span>,{'\n'}
      {'  '}group: <span className="s">'@jobs'</span>,{'\n'}
      {'}'});{'\n'}
      {'\n'}
      <span className="k">const</span> url = gr.<span className="fn">url</span>(<span className="s">'jobs-server'</span>);{'\n'}
      <span className="k">await</span> gr.<span className="fn">waitFor</span>(<span className="s">'postgres'</span>);
    </>)
  },
  python: {
    label: 'gretl (PyPI)',
    body: (<>
      <span className="k">from</span> gretl <span className="k">import</span> gr{'\n'}
      {'\n'}
      gr.<span className="fn">register</span>({'\n'}
      {'    '}name=<span className="s">"jobs-server"</span>,{'\n'}
      {'    '}port=<span className="n">7401</span>,{'\n'}
      {'    '}group=<span className="s">"@jobs"</span>,{'\n'}
      ){'\n'}
      {'\n'}
      url = gr.<span className="fn">url</span>(<span className="s">"jobs-server"</span>){'\n'}
      gr.<span className="fn">wait_for</span>(<span className="s">"postgres"</span>, timeout=<span className="n">30</span>)
    </>)
  },
  go: {
    label: 'github.com/slowdutch/gretl-go',
    body: (<>
      <span className="k">import</span> <span className="s">"github.com/slowdutch/gretl-go/gr"</span>{'\n'}
      {'\n'}
      gr.<span className="fn">Register</span>(gr.Service{'{'}{'\n'}
      {'    '}Name:  <span className="s">"jobs-server"</span>,{'\n'}
      {'    '}Port:  <span className="n">7401</span>,{'\n'}
      {'    '}Group: <span className="s">"@jobs"</span>,{'\n'}
      {'}'}){'\n'}
      {'\n'}
      url, _ := gr.<span className="fn">URL</span>(<span className="s">"jobs-server"</span>){'\n'}
      gr.<span className="fn">WaitFor</span>(<span className="s">"postgres"</span>, <span className="n">30</span>*time.Second)
    </>)
  },
  ruby: {
    label: 'gretl (RubyGems)',
    body: (<>
      <span className="k">require</span> <span className="s">"gretl"</span>{'\n'}
      {'\n'}
      gr.<span className="fn">register</span>({'\n'}
      {'  '}name:  <span className="s">"jobs-server"</span>,{'\n'}
      {'  '}port:  <span className="n">7401</span>,{'\n'}
      {'  '}group: <span className="s">"@jobs"</span>{'\n'}
      ){'\n'}
      {'\n'}
      url = gr.<span className="fn">url</span>(<span className="s">"jobs-server"</span>){'\n'}
      gr.<span className="fn">wait_for</span>(<span className="s">"postgres"</span>, timeout: <span className="n">30</span>)
    </>)
  },
  rest: {
    label: 'REST API · http://127.0.0.1:11611',
    body: (<>
      <span className="c"># ensure a service is running</span>{'\n'}
      curl -X <span className="k">POST</span> <span className="s">http://127.0.0.1:11611/v1/services/jobs-server/start</span>{'\n'}
      {'\n'}
      <span className="c"># resolve a name to a URL</span>{'\n'}
      curl <span className="s">http://127.0.0.1:11611/v1/resolve/jobs-server</span>{'\n'}
      <span className="c"># {`{ "url": "http://localhost:7401", "pid": 38219 }`}</span>{'\n'}
      {'\n'}
      <span className="c"># stream status updates over SSE</span>{'\n'}
      curl -N <span className="s">http://127.0.0.1:11611/v1/events</span>
    </>)
  },
};

function SdkSection() {
  const [tab, setTab] = React.useState('npm');
  const sdk = SDK_SAMPLES[tab];
  return (
    <section className="section container">
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', gap: 32, flexWrap: 'wrap', marginBottom: 28 }}>
        <div style={{ maxWidth: 560 }}>
          <span className="eyebrow">SDKs</span>
          <h2 style={{ marginTop: 14 }}>One protocol. Every language you ship in.</h2>
          <p className="dim" style={{ marginTop: 16, fontSize: 16, lineHeight: 1.6 }}>
            Same names, same groups, same control surface across Node, Python, Go, Ruby — and a plain REST API for everything else.
          </p>
        </div>
        <div className="tabs">
          {Object.keys(SDK_SAMPLES).map(k => (
            <button key={k} className={`tab ${tab === k ? 'on' : ''}`} onClick={() => setTab(k)}>{k}</button>
          ))}
        </div>
      </div>
      <div className="panel">
        <div className="panel-hd">
          <Icon name="doc" size={13} />
          <span style={{ marginLeft: 2 }}>{sdk.label}</span>
        </div>
        <div className="code">{sdk.body}</div>
      </div>
    </section>
  );
}

/* ── Chrome extension showcase ───────────── */
function ExtensionSection() {
  const items = [
    { n: 'jobs-board', p: 7400, run: true },
    { n: 'admin', p: 8032, run: true },
    { n: 'postgres', p: 5432, run: true },
    { n: 'redis', p: 6379, run: true },
    { n: 'docs', p: 6000, run: false },
    { n: 'storybook', p: 6006, run: false },
  ];
  return (
    <section className="section container">
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'center' }} className="responsive-2col">
        <div className="ext-window" style={{ justifySelf: 'center' }}>
          <div className="ext-hd">
            <span style={{ display: 'flex', alignItems: 'center', gap: 8, color: 'var(--accent)' }}><Icon name="bolt" size={13} /><span>Gretl</span></span>
            <span className="dim mono" style={{ fontSize: 11 }}>4 / 6</span>
          </div>
          <div className="ext-list">
            {items.map(it => (
              <div className="ext-item" key={it.n}>
                <span className={`pill ${it.run ? 'run' : ''}`} style={{ minWidth: 60, justifyContent: 'center' }}>
                  <span className="dot" />{it.run ? 'live' : 'idle'}
                </span>
                <div style={{ display: 'flex', flexDirection: 'column' }}>
                  <span className="name">{it.n}</span>
                  <span className="sub">localhost:{it.p}</span>
                </div>
                <span className="ext-mini-btn">↗</span>
                {it.run
                  ? <span className="ext-mini-btn stop">stop</span>
                  : <span className="ext-mini-btn go">start</span>}
              </div>
            ))}
          </div>
        </div>
        <div>
          <span className="eyebrow"><Icon name="chrome" size={12} /> Chrome extension</span>
          <h2 style={{ marginTop: 14 }}>Every localhost tab, one click away.</h2>
          <p className="dim" style={{ marginTop: 18, fontSize: 16, lineHeight: 1.6 }}>
            See every named service from the toolbar. Open, restart, or kill any of them
            without leaving your browser. The extension talks to your local Gretl daemon —
            nothing leaves your machine.
          </p>
          <div style={{ marginTop: 24, display: 'flex', gap: 10, flexWrap: 'wrap' }}>
            <a className="btn"><Icon name="chrome" size={14} /> Add to Chrome</a>
            <a className="btn btn-ghost"><Icon name="ext" size={13} /> Firefox · Edge</a>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ── CLI cheatsheet ───────────────────────── */
function CliSection() {
  const rows = [
    ['gr start <name>', 'Start a service by name'],
    ['gr stop <name>', 'Stop it. PID handled for you'],
    ['gr restart <name>', 'Restart with the same args'],
    ['gr group start @x', 'Bring up a whole stack'],
    ['gr status', 'List everything PA knows about'],
    ['gr logs <name> -f', 'Tail logs for a service'],
    ['gr open <name>', 'Open the service URL in browser'],
    ['gr detect', 'Find unmanaged listeners'],
    ['gr add <name> :port', 'Register a service'],
    ['gr kill :port', 'Free a port by number'],
    ['gr env <name>', 'Print env vars for a service'],
    ['gr doctor', 'Diagnose port conflicts & PID drift'],
  ];
  return (
    <section className="section container">
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', gap: 32, flexWrap: 'wrap', marginBottom: 28 }}>
        <div style={{ maxWidth: 560 }}>
          <span className="eyebrow"><Icon name="kbd" size={12} /> CLI cheatsheet</span>
          <h2 style={{ marginTop: 14 }}>Twelve commands, the whole tool.</h2>
        </div>
        <a className="btn"><Icon name="doc" size={13} /> Full CLI reference <Icon name="arrow" size={13} /></a>
      </div>
      <div className="cheat">
        {rows.map(([c, d]) => {
          const parts = c.split(' ');
          return (
            <div className="cheat-row" key={c}>
              <span className="cmd"><span className="gr">{parts[0]}</span> {parts.slice(1).join(' ')}</span>
              <span className="desc">{d}</span>
            </div>
          );
        })}
      </div>
    </section>
  );
}

/* ── Feature grid ─────────────────────────── */
function FeatureSection() {
  const cells = [
    { ico: 'tag', h: 'Names, not numbers', p: 'Address services by readable names that travel between machines. The daemon owns ports, you own intent.' },
    { ico: 'group', h: 'Groups & dependencies', p: 'Define stacks in gr.toml. Boot the right services in the right order, with health checks.' },
    { ico: 'flow', h: 'Auto-detect', p: 'gr detect finds anything already listening — Vite, Postgres, that random Python script — and offers to adopt it.' },
    { ico: 'eye', h: 'Live status everywhere', p: 'Desktop app, Chrome extension, CLI and SDKs all read from the same SSE event stream. No stale UIs.' },
    { ico: 'plug', h: 'Cross-language SDKs', p: 'Node, Python, Go, Ruby — register, resolve, wait-for. Same primitives as the CLI, in your language of choice.' },
    { ico: 'shield', h: 'Local-first, always', p: 'Daemon runs on 127.0.0.1. Nothing phones home, no telemetry by default. Your localhost stays local.' },
  ];
  return (
    <section className="section container">
      <div style={{ maxWidth: 580, marginBottom: 32 }}>
        <span className="eyebrow">Why Gretl</span>
        <h2 style={{ marginTop: 14 }}>Built like the rest of your toolchain.</h2>
      </div>
      <div className="fgrid">
        {cells.map(c => (
          <div className="fcell" key={c.h}>
            <span className="ico"><Icon name={c.ico} size={16} /></span>
            <h3>{c.h}</h3>
            <p>{c.p}</p>
          </div>
        ))}
      </div>
    </section>
  );
}

/* ── Pricing ──────────────────────────────── */
function PricingSection() {
  return (
    <section className="section container">
      <div style={{ textAlign: 'center', marginBottom: 40 }}>
        <span className="eyebrow">Pricing</span>
        <h2 style={{ marginTop: 14 }}>Free for individuals. Honest for teams.</h2>
      </div>
      <div className="price">
        <div className="price-card">
          <div className="price-name">Solo</div>
          <div className="price-amt"><sup>$</sup>0</div>
          <p className="dim" style={{ fontSize: 13.5 }}>For your machine. Forever free.</p>
          <ul className="price-list">
            <li>Desktop app, all platforms</li>
            <li>CLI + every SDK</li>
            <li>Chrome extension</li>
            <li>Unlimited services & groups</li>
          </ul>
          <a className="btn" style={{ marginTop: 'auto' }}>Download</a>
        </div>
        <div className="price-card featured">
          <div className="price-name" style={{ color: 'var(--accent)' }}>Team</div>
          <div className="price-amt"><sup>$</sup>8<sub>/dev/mo</sub></div>
          <p className="dim" style={{ fontSize: 13.5 }}>Shared service catalogs across your org.</p>
          <ul className="price-list">
            <li>Everything in Solo</li>
            <li>Shared gr.toml in your repo</li>
            <li>Org-wide name registry</li>
            <li>SSO + audit logs</li>
            <li>Priority support</li>
          </ul>
          <a className="btn btn-primary" style={{ marginTop: 'auto' }}>Start a team</a>
        </div>
        <div className="price-card">
          <div className="price-name">Enterprise</div>
          <div className="price-amt" style={{ fontSize: 32 }}>Talk to us</div>
          <p className="dim" style={{ fontSize: 13.5 }}>For platform teams running this at scale.</p>
          <ul className="price-list">
            <li>Self-hosted control plane</li>
            <li>Custom SSO / SCIM</li>
            <li>Volume licensing</li>
            <li>Roadmap input</li>
          </ul>
          <a className="btn" style={{ marginTop: 'auto' }}>Contact sales</a>
        </div>
      </div>
    </section>
  );
}

/* ── Footer ───────────────────────────────── */
function Footer() {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-grid">
          <div>
            <div className="brand" style={{ marginBottom: 14 }}>
              <span className="brand-bolt"><Bolt size={18} /></span>
              <span>Gretl</span>
            </div>
            <p className="dim" style={{ maxWidth: 280, fontSize: 13.5, lineHeight: 1.55 }}>
              A control panel for your localhost. Made by Slowdutch.
            </p>
          </div>
          <div>
            <h4>Product</h4>
            <ul>
              <li><a>Desktop app</a></li>
              <li><a>Chrome extension</a></li>
              <li><a>CLI</a></li>
              <li><a>Changelog</a></li>
            </ul>
          </div>
          <div>
            <h4>SDKs</h4>
            <ul>
              <li><a>npm</a></li>
              <li><a>Python</a></li>
              <li><a>Go</a></li>
              <li><a>Ruby</a></li>
              <li><a>REST API</a></li>
            </ul>
          </div>
          <div>
            <h4>Docs</h4>
            <ul>
              <li><a href="docs.html">Getting Started</a></li>
              <li><a href="docs.html#cli">CLI reference</a></li>
              <li><a href="docs.html">SDK reference</a></li>
              <li><a href="docs.html">REST API</a></li>
            </ul>
          </div>
          <div>
            <h4>Company</h4>
            <ul>
              <li><a>About Slowdutch</a></li>
              <li><a>Pricing</a></li>
              <li><a>Contact</a></li>
              <li><a>GitHub</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-end">
          <span>© 2026 Slowdutch · gr v1.0.3</span>
          <span>127.0.0.1 ❤︎</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Hero, NameSection, GroupSection, SdkSection, ExtensionSection, CliSection, FeatureSection, PricingSection, Footer, AppShotSection });