/* Theory — why Pertel as an MCP is worth it.
 * Long-form essay in the same tall-card + spine + bridge chrome
 * as the install page, so it reads as a continuation.
 */

const THEOREMS = [
  {
    n: '§00',
    title: <>The bottleneck<em>.</em></>,
    tagline: 'context is the bottleneck.',
    lead: <>Models forget. Tokens run out. Switching from Claude to GPT to Manus mid-thought means re-explaining yourself every time.</>,
    body: [
      <>Pertel sits <b>outside</b> the model&rsquo;s window. The conversation lives in a folder of markdown files the AI client references on demand. The work survives the model swap because the work was never inside the model.</>,
      <>The fix isn&rsquo;t a bigger context window. The fix is putting memory where it belongs: in files you can read.</>,
    ],
    aside: { lbl: 'rule', rule: <>Memory belongs <b>outside</b> the model. Otherwise it&rsquo;s borrowed.</> },
  },
  {
    n: '§01',
    title: <>The framework, <em>three surfaces.</em></>,
    tagline: 'discipline as MCP.',
    lead: <>A framework written for humans can be re-expressed for AI clients along three axes: things to <em>read</em>, workflows to <em>run</em>, and actions to <em>take</em>.</>,
    body: [
      <>Model Context Protocol gives you three surfaces: <b>Resources</b> (the docs the AI reads on demand), <b>Prompts</b> (the rituals you trigger by name), and <b>Tools</b> (the schemas the AI calls to change state).</>,
      <>The same framework, three surfaces. The methodology stops being something you paste in and becomes something the client calls. Pertel is that conversion, applied to the Schedii workbench.</>,
    ],
    aside: { lbl: 'principle', rule: <>The doc is the contract. The MCP surface is the <b>interface</b>.</> },
  },
  {
    n: '§02',
    title: <>Files, not <em>databases.</em></>,
    tagline: 'grep beats SQL for a trail you read.',
    lead: <>A <code>.pertel/</code> folder of append-only markdown is human-readable, diff-friendly, grepable, portable, and survives the whole stack going down.</>,
    body: [
      <>Schema-less. No migrations. No remote dependency. The session log is a file you can open in any editor; the facts are lines you can search with <code>grep</code>; the handoff is a bundle you can email.</>,
      <>The workbench gets a database. The conversation gets a folder. Two surfaces, two storage models, one binary.</>,
    ],
    aside: { lbl: 'rule', rule: <>If a piece of content is read every session, it&rsquo;s a <b>resource</b>. If it&rsquo;s run, it&rsquo;s a <b>prompt</b>. If it changes state, it&rsquo;s a <b>tool</b>.</> },
  },
  {
    n: '§03',
    title: <>The filter, <em>with reasons.</em></>,
    tagline: 'refusals get a return type.',
    lead: <>Most reviews are vibes. Pertel&rsquo;s Sift is a function: drop work in, get reasons out.</>,
    body: [
      <>The Schedii Bible + AkrosInfra frameworks (Reminiscence Meter, Verify Before Done, Safe-Write Engine, Stable-ID Worklist) become a scoring pass. <code>@sch -f full</code> sifts your draft, kills the junk, re-separates what survives, and attaches the reasons inline.</>,
      <>It&rsquo;s not a guarantee. It&rsquo;s a pass against a contract. The contract is the part that didn&rsquo;t exist before.</>,
    ],
    aside: { lbl: 'shape', rule: <><b>Tools</b> have input + output schemas. The model sees the schema. The user sees the result.</> },
  },
  {
    n: '§04',
    title: <>One binary, <em>many modes.</em></>,
    tagline: 'a flag is cheaper than an install.',
    lead: <>Pertel ships as one binary, switched by flag. <code>-d</code> for Dash. <code>-f</code> for Sift. <code>p</code> for the full stack.</>,
    body: [
      <>One install. One key. One configuration. Switch modes when the work demands it. The user&rsquo;s mental model is a single thing with knobs, not four MCPs to wire up.</>,
      <>Modes scale. Namespace pollution doesn&rsquo;t.</>,
    ],
    aside: { lbl: 'shape', rule: <>One <b>npx</b>. One <b>key</b>. Many modes.</> },
  },
  {
    n: '§05',
    title: <>Boundary as <em>architecture.</em></>,
    tagline: 'the contract is the product.',
    lead: <>What touches the backend routes through it. What handles the conversation stays local. Every mutation has a dry-run and returns evidence. Errors surface loudly.</>,
    body: [
      <>The Rock/Sand contract isn&rsquo;t a policy document — it&rsquo;s the architecture. The backend is the boundary; the boundary is what the MCP refuses to bypass. No direct DB. No silent provider fallback. No free-text-only tool output.</>,
      <>The discipline is the product. The MCP is the interface.</>,
    ],
    aside: { lbl: 'rocks', rule: <>Every mutation has a <b>dry-run</b>. Every mutation returns <b>evidence</b>. Errors surface <b>loudly</b>.</> },
  },
];

function HostNavTheory() {
  return (
    <div className="topnav host-nav">
      <a href="pertel.html" style={{display:'flex', alignItems:'center'}}>
        <img src="assets/pertel-logo.png" alt="Pertel · Intelligence by Schedii"
             style={{height: 40, width: 'auto', display: 'block'}} />
      </a>
      <div className="topnav-spacer" />
      <a href="pertel.html" className="topnav-btn">
        <span className="sig">[</span>
        <span>Pertel</span>
      </a>
      <a href="index.html" className="topnav-btn">
        <span className="sig">$</span>
        <span>Install</span>
      </a>
      <a href="why.html" className="topnav-btn">
        <span className="sig">?</span>
        <span>Why</span>
      </a>
    </div>
  );
}

function TheoryApp() {
  return (
    <div
      data-theme="light"
      data-palette="cyan"
      style={{
        minHeight: '100vh',
        background: 'var(--color-background)',
        color: 'var(--color-foreground)',
        position: 'relative',
        overflowX: 'hidden',
      }}
    >
      <div className="orb-bg"><span /></div>

      <div style={{position:'relative', zIndex: 1}}>
        <HostNavTheory />

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

            {/* Hero — the title */}
            <section className="hero-top">
              <div className="eyebrow">
                <span className="dot" />
                <span>theory · why pertel exists</span>
              </div>
              <h1>Why this <em>exists.</em></h1>
              <p className="sub">
                Six theorems behind <b>Pertel</b> as an MCP. The conversation lives outside
                the model. The framework has three surfaces. The filter returns reasons.
                One binary, switched by flag. The contract is the product.
              </p>
            </section>

            {/* Tall card */}
            <div className="tall-card theory-card">
              <div className="manifest">
                <div className="manifest-spine" />

                {THEOREMS.map((t, i) => (
                  <React.Fragment key={t.n}>
                    <section className="manifest-section">
                      <div className="manifest-node">{t.n}</div>
                      <div className="manifest-section-h">
                        <h2>{t.title}</h2>
                        <span className="sub">{t.tagline}</span>
                      </div>
                      <div className="theorem">
                        <div className="theorem-body">
                          <p className="theorem-lead">{t.lead}</p>
                          {t.body.map((b, j) => <p key={j}>{b}</p>)}
                        </div>
                        <div className="theorem-aside">
                          <div className="lbl">{t.aside.lbl}</div>
                          <p className="rule">{t.aside.rule}</p>
                        </div>
                      </div>
                    </section>

                    {i < THEOREMS.length - 1 && (
                      <div className="bridge">
                        <span className="bridge-tick left" />
                        <span className="bridge-label">{THEOREMS[i].n} &rarr; {THEOREMS[i+1].n}</span>
                        <span className="bridge-tick right" />
                      </div>
                    )}
                  </React.Fragment>
                ))}

                <div className="theory-closing">
                  <div className="theory-closing-lbl">closing rule</div>
                  <div className="theory-closing-quote">
                    The doc is the contract. The MCP surface is the <b>interface</b>.
                    {' '}The tools are the rituals, <b>executable</b>.
                  </div>
                </div>
              </div>
            </div>

            {/* Footer */}
            <div className="foot" style={{marginTop: 40}}>
              <span><b>mcp.schedii.app</b></span>
              <span>theory · v0.1</span>
              <span className="right">snapshot · 2026-05-22</span>
              <span>akros · infra</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<TheoryApp />);