/* Install/download landing — v5
 * Unified long vertical chart structure:
 *   Hero (big H1 + copy) above the manifest
 *   Manifest with one spine and 5 numbered nodes:
 *     §00  install        — install panel + facts
 *     §01  family         — 4 MCPs as chart rows (Pertel-style lockups)
 *     §02  @sch -f modes — sift modes as chart rows
 *     §03  four things    — 4 pillars as chart rows
 *     §04  @sch -d vs @sch p — comparison chart
 *   Transcript + footer below.
 */

function JsonBlockB({ text }) {
  const html = text
    .replace(/(\/\/[^\n]*)/g, '<span class="com">$1</span>')
    .replace(/("(?:[^"\\]|\\.)*")(\s*:)/g, '<span class="key">$1</span>$2')
    .replace(/:\s*("(?:[^"\\]|\\.)*")/g, ': <span class="str">$1</span>')
    .replace(/([{}\[\],])/g, '<span class="pun">$1</span>');
  return <pre dangerouslySetInnerHTML={{ __html: html }} />;
}
function PlainBlockB({ text }) {
  const html = text.replace(/(#[^\n]*)/g, '<span class="com">$1</span>');
  return <pre dangerouslySetInnerHTML={{ __html: html }} />;
}

/* MCP tagline + by host — applied page-wide in Pertel-style lockup format */
const MCP_META = {
  workbench: { tagline: 'workbench',     by: 'by Schedii' },
  dash:      { tagline: 'dash',          by: 'by Schedii' },
  sift:      { tagline: 'sift',          by: 'by AkrosInfra' },
  full:      { tagline: 'full',          by: 'by Schedii' },
};

/* @sch -d (Pertel Dash) vs @sch p (Pertel Full) — comparison rows */
const VS_ROWS = [
  {
    axis: 'role',
    left:  <>lite intelligence layer<br/><span className="muted">memory · logs · handoff · context-keep</span></>,
    right: <>full Pertel<br/><span className="muted">workbench + dash + sift + discovery</span></>,
  },
  {
    axis: 'size',
    left:  <><em>lite.</em> Portable. One folder.</>,
    right: <><em>full.</em> The whole stack.</>,
  },
  {
    axis: 'touches',
    left:  <><span className="mono">.pertel/*.md</span><br/><span className="muted">local folder · lite reads of @sch</span></>,
    right: <><span className="mono">.pertel/ + schedii backend</span><br/><span className="muted">workspace-scoped · full read+write</span></>,
  },
  {
    axis: 'side effects',
    left:  <><em>almost none.</em> Reads + writes markdown.</>,
    right: <><em>mutates.</em> Always proposes first; confirm to apply.</>,
  },
  {
    axis: 'first call',
    left:  <><span className="mono">@sch -d begin</span></>,
    right: <><span className="mono">@sch p open</span></>,
  },
  {
    axis: 'you ask',
    left:  <>&ldquo;what did we say?&rdquo;<br/>&ldquo;don&rsquo;t blow my context.&rdquo;</>,
    right: <>&ldquo;where are we?&rdquo;<br/>&ldquo;ship this.&rdquo;</>,
  },
  {
    axis: 'works with',
    left:  <><span className="mono">claude · gpt · manus</span></>,
    right: <><span className="mono">claude · gpt · manus</span></>,
  },
  {
    axis: 'covers',
    left:  <><span className="mono">memory + logs + handoff</span></>,
    right: <><span className="mono">@sch + -d + -f + discovery</span></>,
  },
];

/* Loud pillars — chart-row format */
const LOUD = [
  {
    n: '01',
    icon: (
      <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
        <rect x="4" y="6" width="16" height="14" rx="2" />
        <path d="M8 6V4M16 6V4M4 11h16" />
        <circle cx="9" cy="15" r="0.8" fill="currentColor" stroke="none" />
        <circle cx="13" cy="15" r="0.8" fill="currentColor" stroke="none" />
        <circle cx="17" cy="15" r="0.8" fill="currentColor" stroke="none" />
      </svg>
    ),
    accent: 'cyan',
    head: <>Memory that <em>stays.</em></>,
    body: 'Every turn pinned to a session. Recall by fact, by date, by tag. Forgets only when you say so. Survives a model swap.',
    tags: ['memory', 'append-only', '.pertel/'],
    ns: '@sch -d remember · @sch -d recall',
  },
  {
    n: '02',
    icon: (
      <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
        <circle cx="12" cy="12" r="8" />
        <path d="M12 4v8l5 3" />
        <path d="M3 12h1.5" /><path d="M19.5 12H21" />
      </svg>
    ),
    accent: 'cyan',
    head: <>Token max-out, <em>solved.</em></>,
    body: 'Pertel keeps your conversation outside the model\u2019s context window. Hand off mid-thread, drop into Claude, GPT, or Manus, keep going \u2014 no re-explaining.',
    tags: ['claude', 'gpt', 'manus'],
    ns: '@sch -d handoff · @sch -d recall',
  },
  {
    n: '03',
    icon: (
      <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
        <path d="M6 4h9l4 4v12a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1z" />
        <path d="M14 4v5h5" />
        <path d="M8 13h8M8 17h5" />
      </svg>
    ),
    accent: 'cyan',
    head: <>Logs you can <em>grep.</em></>,
    body: 'Append-only markdown per session. Human-readable, diff-friendly, grepable from day one. No DB, no schema migrations, no surprise.',
    tags: ['markdown', 'diff', 'grep'],
    ns: '@sch -d tail · @sch -d log',
  },
  {
    n: '04',
    icon: (
      <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
        <path d="M4 5h16l-6 7.5V19l-4 1.5v-8L4 5z" />
      </svg>
    ),
    accent: 'amber',
    head: <>A filter that <em>refuses.</em></>,
    body: 'Drop your idea, draft, plan, or code into @sch -f. The Schedii Bible + AkrosInfra frameworks (Reminiscence Meter, Verify Before Done, Safe-Write, Stable-ID Worklist, Discipline-as-MCP) sift, kill the junk, re-separate the rest.',
    tags: ['full', 'ndv', 'ndvr', 'custom'],
    ns: '@sch -f full · @sch -f ndvr',
  },
];

function DirectionB() {
  const [tab, setTab] = React.useState('claude');
  const [copied, setCopied] = React.useState(false);
  const isJson = tab === 'claude' || tab === 'cursor';

  const handleCopy = () => {
    try {
      navigator.clipboard.writeText(INSTALL_SNIPPETS[tab] || '');
      setCopied(true);
      setTimeout(() => setCopied(false), 1400);
    } catch (e) {}
  };

  return (
    <div className="dirB">
      <div className="frame">

        {/* HERO — copy above the manifest */}
        <section className="hero-top">
          <div className="eyebrow">
            <span className="dot" />
            <span>mcp.schedii.app · v0.4.1-alpha</span>
          </div>
          <h1>Install once. <em>Recall Efficiently.</em></h1>
          <p className="sub">
            <b>Pertel</b> is the Schedii MCP for conversational memory, append-only
            markdown logs, and doc handoff between sessions. Most importantly, the
            contained logic prevents token / session max-out like problems. It also
            helps you find your stasis with knowledge retention.{' '}
            <em style={{color:'#06b6d4', fontStyle:'italic'}}>In development.</em>
          </p>
          <p className="sub" style={{marginTop: 14, fontSize: '0.94em', opacity: 0.85}}>
            <b>@sch HomeRunner</b> ships the workbench to you in a way that is
            closer than ever. Adapt us into your workflow &mdash; you won&rsquo;t regret it.
          </p>
        </section>

        {/* THE MANIFEST — unified vertical chart inside ONE tall card */}
        <div className="tall-card">
        <div className="manifest">
          <div className="manifest-spine" />

          {/* §00 — Install */}
          <section className="manifest-section">
            <div className="manifest-node">§00</div>
            <div className="manifest-section-h">
              <h2>Install<em>.</em></h2>
              <span className="sub">drop the JSON in</span>
              <span className="right">claude · cursor · chatgpt · cli</span>
            </div>

            <div className="hero-v3-install">
              <div className="install-mega">
                <div className="install-mega-head">
                  <span className="lights"><span/><span/><span/></span>
                  <span>mcp config · paste into your client</span>
                  <span style={{marginLeft:'auto', color: copied ? 'var(--color-success)' : '#06b6d4'}}>
                    {copied ? '● copied' : '● ready'}
                  </span>
                </div>
                <div className="install-mega-tabs">
                  {[
                    ['claude','Claude Desktop'],
                    ['cursor','Cursor'],
                    ['chatgpt','ChatGPT'],
                    ['cli','CLI / npx'],
                  ].map(([k,label]) => (
                    <button key={k} data-active={tab === k} onClick={()=>setTab(k)}>{label}</button>
                  ))}
                </div>
                {isJson
                  ? <JsonBlockB text={INSTALL_SNIPPETS[tab]} />
                  : <PlainBlockB text={INSTALL_SNIPPETS[tab]} />}
                <div className="install-mega-foot">
                  <span>
                    <b>~/.config/{tab === 'cursor' ? 'cursor/mcp.json' : tab === 'claude' ? 'Claude/claude_desktop_config.json' : tab === 'chatgpt' ? 'chatgpt/connectors' : 'shell'}</b>
                  </span>
                  <span>·</span>
                  <span>requires <b style={{color:'#06b6d4'}}>SCHEDII_API_TOKEN</b></span>
                  <button className="copy" onClick={handleCopy}>
                    {copied ? 'Copied' : 'Copy snippet'}
                  </button>
                </div>
              </div>

              <aside className="hero-side">
                <h3>quick facts</h3>
                <dl>
                  <dt>package</dt>
                  <dd><span className="cy">@schedii/mcp</span></dd>
                  <dt>version</dt>
                  <dd>v0.4.1-alpha</dd>
                  <dt>auth</dt>
                  <dd>schedii api key · workspace-scoped</dd>
                  <dt>transport</dt>
                  <dd>stdio · sse · http</dd>
                  <dt>storage</dt>
                  <dd>local <span className="cy">.pertel/</span></dd>
                  <dt>boundary</dt>
                  <dd><span className="ok">●</span> backend-only</dd>
                </dl>
                <hr />
                <h3>namespaces</h3>
                <div className="chip-row">
                  <span className="chip-ns">@sch</span>
                  <span className="chip-ns">@sch -d</span>
                  <span className="chip-ns">@sch -f</span>
                  <span className="chip-ns">@sch p</span>
                </div>
                <hr />
                <h3>works with</h3>
                <div className="chip-row">
                  {['Claude', 'GPT', 'Manus', 'Cursor', 'Cline'].map(c => (
                    <span key={c} className="chip-ns" style={{color:'var(--color-foreground)',background:'var(--color-overlay-light)',borderColor:'var(--color-separator-light)'}}>{c}</span>
                  ))}
                </div>
              </aside>
            </div>
          </section>

          {/* bridge §00 → §01 */}
          <div className="bridge">
            <span className="bridge-tick left" />
            <span className="bridge-label">install → family</span>
            <span className="bridge-tick right" />
          </div>

          {/* §01 — The family */}
          <section className="manifest-section">
            <div className="manifest-node">§01</div>
            <div className="manifest-section-h">
              <h2>The <em>family.</em></h2>
              <span className="sub">four namespaces</span>
              <span className="right">4 mcps · 1 binary · 1 key</span>
            </div>

            <div className="chart chart-family">
              {MCPS.map(m => {
                const s = STATUS_LABEL[m.status];
                const meta = MCP_META[m.id] || {};
                return (
                  <div className="chart-row" data-accent={m.accent} key={m.id}>
                    <div className="chart-axis">
                      {m.namespace}
                      <small>{m.id}</small>
                    </div>
                    <div>
                      <div className="chart-glyph">
                        <McpGlyph kind={m.icon} size={22} />
                      </div>
                    </div>
                    <div className="chart-name">
                      <div className="nm-row">
                        <span className="nm">{m.name}</span>
                        <span className="tg">{meta.tagline}</span>
                        <span className="by">{meta.by}</span>
                      </div>
                      <div className="br">{m.blurb}</div>
                    </div>
                    <div className="chart-tools">
                      {m.tools.slice(0, 4).map(t => <b key={t}>{t}</b>)}
                    </div>
                    <div className="chart-status" style={{color: s.color}}>
                      <span className="d" style={{background: s.color, boxShadow: `0 0 6px ${s.color}80`}} />
                      {s.text}
                    </div>
                  </div>
                );
              })}
              <div className="chart-foot">
                <span><b>1 binary</b> · @schedii/mcp</span>
                <span><b>1 key</b> · SCHEDII_API_TOKEN</span>
                <span><b>1 env</b> · SCHEDII_MCPS=scp,sch,scpf,scpo</span>
                <span className="right">enable any subset · per-workspace</span>
              </div>
            </div>
          </section>

          {/* bridge §01 → §02 */}
          <div className="bridge">
            <span className="bridge-tick left" />
            <span className="bridge-label">family → sift modes</span>
            <span className="bridge-tick right" />
          </div>

          {/* §02 — @sch -f modes */}
          <section className="manifest-section">
            <div className="manifest-node">§02</div>
            <div className="manifest-section-h">
              <h2>
                <span style={{fontFamily:'ui-monospace, Menlo, monospace', color:'#fbbf24'}}>@sch -f</span>
                {' '}<em>modes.</em>
              </h2>
              <span className="sub">filter, graded</span>
              <span className="right">pre · mid · post any work</span>
            </div>

            <div className="chart chart-modes">
              {SCPF_MODES.map(m => (
                <div className="chart-row" key={m.cmd}>
                  <div className="chart-axis">
                    {m.cmd}
                    <small>{m.name.toLowerCase()}</small>
                  </div>
                  <div className="chart-name">{m.name}</div>
                  <div className="chart-desc">{m.desc}</div>
                  <div className="chart-hint">
                    {m.cmd === '@sch -f full'   && 'heaviest sift'}
                    {m.cmd === '@sch -f ndv'    && '+ neurodivergent lens'}
                    {m.cmd === '@sch -f ndvr'   && '+ reasoning trace'}
                    {m.cmd === '@sch -f custom' && 'tunable, multi-question'}
                  </div>
                </div>
              ))}
              <div className="chart-foot">
                <span><b>not a guarantee</b> · worth the pass</span>
                <span>·</span>
                <span>use like: <b style={{color:'#fbbf24'}}>@sch -f full</b> &mdash; sift this against the bible</span>
                <span className="right" style={{color:'#fbbf24'}}>
                  reminiscence meter · verify before done · safe-write · stable-id worklist · discipline-as-mcp
                </span>
              </div>
            </div>
          </section>

          {/* bridge §02 → §03 */}
          <div className="bridge">
            <span className="bridge-tick left" />
            <span className="bridge-label">sift → four things</span>
            <span className="bridge-tick right" />
          </div>

          {/* §03 — Four things, well */}
          <section className="manifest-section">
            <div className="manifest-node">§03</div>
            <div className="manifest-section-h">
              <h2>Four things, <em>well.</em></h2>
              <span className="sub">memory · context · log · filter</span>
            </div>

            <div className="chart chart-pillars">
              {LOUD.map((p) => (
                <div className="chart-row" data-accent={p.accent} key={p.n}>
                  <div className="chart-axis">{p.n}</div>
                  <div>
                    <div className="chart-glyph">{p.icon}</div>
                  </div>
                  <div className="chart-headline">
                    <h3>{p.head}</h3>
                    <p>{p.body}</p>
                  </div>
                  <div className="chart-meta">
                    <div className="tags">
                      {p.tags.map((t, i) => <b key={i}>{t}</b>)}
                    </div>
                    <span className="ns">{p.ns}</span>
                  </div>
                </div>
              ))}
            </div>
          </section>

          {/* bridge §03 → §04 */}
          <div className="bridge">
            <span className="bridge-tick left" />
            <span className="bridge-label">four things → dash vs full</span>
            <span className="bridge-tick right" />
          </div>

          {/* §04 — @sch -d vs @sch p */}
          <section className="manifest-section">
            <div className="manifest-node">§04</div>
            <div className="manifest-section-h">
              <h2>
                <span style={{fontFamily:'ui-monospace, Menlo, monospace', color:'#06b6d4'}}>@sch -d</span>
                {' '}vs{' '}
                <span style={{fontFamily:'ui-monospace, Menlo, monospace', color:'#22d3ee'}}>@sch p</span>
                <em>.</em>
              </h2>
              <span className="sub">dash vs full</span>
              <span className="right">one namespace · two modes · same key</span>
            </div>

            <div className="vs-card">
              <div className="vs-seam-flow">
                <span className="vs-dot" />
                <span className="vs-dot" />
                <span className="vs-dot" />
              </div>

              <div className="vs-head">
                <div className="vs-side vs-left">
                  <div className="glyph"><McpGlyph kind="pertel" size={28} /></div>
                  <div className="ns">@sch -d</div>
                  <div className="ns-name">Pertel Dash</div>
                  <div className="ns-sub">
                    <span style={{fontFamily:'"Iowan Old Style", Georgia, serif', fontStyle:'italic', color:'#06b6d4'}}>dash</span>
                    {' '}· lite · context-keep
                  </div>
                  <div className="vs-feats">
                    <span className="vs-feat">memory</span>
                    <span className="vs-feat">logs</span>
                    <span className="vs-feat">handoff</span>
                    <span className="vs-feat">no-token-burn</span>
                  </div>
                </div>
                <div className="vs-seam-head">
                  <div className="vs-axis">vs</div>
                </div>
                <div className="vs-side vs-right">
                  <div className="glyph"><McpGlyph kind="pertel" size={28} /></div>
                  <div className="ns">@sch p</div>
                  <div className="ns-name">Pertel</div>
                  <div className="ns-sub">
                    <span style={{fontFamily:'"Iowan Old Style", Georgia, serif', fontStyle:'italic', color:'#22d3ee'}}>full</span>
                    {' '}· all capability
                  </div>
                  <div className="vs-feats">
                    <span className="vs-feat">workbench</span>
                    <span className="vs-feat">memory</span>
                    <span className="vs-feat">sift</span>
                    <span className="vs-feat">discovery</span>
                  </div>
                </div>
              </div>

              <div className="vs-rows">
                {VS_ROWS.map((r, i) => (
                  <div className="vs-row" key={i}>
                    <div className="vs-cell vs-cell-left">{r.left}</div>
                    <div className="vs-cell vs-cell-axis">{r.axis}</div>
                    <div className="vs-cell vs-cell-right">{r.right}</div>
                  </div>
                ))}
              </div>

              <div className="vs-foot">
                <span><b>one binary</b> · @schedii/mcp</span>
                <span><b>one key</b> · SCHEDII_API_TOKEN</span>
                <span className="right">
                  <span style={{color:'#06b6d4'}}>@sch -d</span> when you need memory ·
                  {' '}<span style={{color:'#22d3ee'}}>@sch p</span> when you need everything
                </span>
              </div>
            </div>
          </section>
        </div>
        </div>

        {/* Once installed — transcript */}
        <section className="sect">
          <div className="sect-h">
            <h2>Once <em>installed.</em></h2>
            <span className="right">a real session, abridged</span>
          </div>

          <div className="install-row" style={{gridTemplateColumns: '1fr'}}>
            <div className="install-box">
              <div className="invoke">
                {INVOKE_LINES.map((l, i) => (
                  <div className="invoke-line" key={i}>
                    <div className="invoke-who" data-who={l.who}>{l.who}</div>
                    <div className="invoke-text">
                      {l.text.split(/(@sch\s+-d|@sch\s+-f|@sch\s+-o|@sch\s+p|@sch)/g).map((p, j) =>
                        (p && p.startsWith('@sch'))
                          ? <span className="at" key={j}>{p}</span>
                          : <span key={j}>{p}</span>
                      )}
                      {i === INVOKE_LINES.length - 1 && <span className="live-cursor" />}
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </section>

        <div className="foot">
          <span><b>mcp.schedii.app</b></span>
          <span>@schedii/mcp · v0.4.1-alpha</span>
          <span>homerunner · v1.2.0-beta</span>
          <span className="right">snapshot · 2026-05-22</span>
          <span>akros · infra</span>
        </div>
      </div>
    </div>
  );
}

window.DirectionB = DirectionB;
