/* Pertel — brand landing page.
 * Story-first counterpart to index.html (install) and theory.html (why).
 *
 * Flow:
 *   Hero       — huge bracket glyph + headline
 *   §01 Pain   — three failures Pertel solves
 *   §02 Shape  — inside-the-model vs outside-the-model
 *   §03 Action — a real session, abridged
 *   §04 Modes  — Dash · Sift · Full, three cards
 *   Install    — final CTA pointing to mcp.schedii.app
 */

function HostNavPertel() {
  return (
    <div className="topnav host-nav">
      <a href="pertel.html" style={{textDecoration:'none', display:'flex', alignItems:'center'}}>
        <img src={(typeof window!=='undefined' && window.__resources && window.__resources.pertelLogo) || 'assets/pertel-logo.png'} alt="Pertel"
             style={{height: 24, width: 'auto', display: 'block'}} />
      </a>
      <div className="topnav-spacer" />
      <a href="index.html" className="topnav-btn">
        <span className="sig">$</span>
        <span>Install</span>
      </a>
      <a href="theory.html" className="topnav-btn">
        <span className="sig">§</span>
        <span>Theory</span>
      </a>
      <a href="why.html" className="topnav-btn">
        <span className="sig">?</span>
        <span>Why</span>
      </a>
    </div>
  );
}

/* Big hero bracket — replaced with actual Pertel logo image. */
function HeroBracket() {
  return null;
}

const PAINS = [
  {
    n: '01',
    head: 'Tokens run out.',
    body: 'Context windows fill. Long sessions get truncated. The model forgets what you said at the top of the thread by the bottom of it.',
    metric: 'lost on overflow',
  },
  {
    n: '02',
    head: 'Models forget on swap.',
    body: 'Switch from Claude to GPT mid-thought and the slate wipes. You spend the first ten minutes of every new session re-explaining yourself.',
    metric: 'lost on switch',
  },
  {
    n: '03',
    head: 'Re-explaining costs time.',
    body: 'You\u2019ve already typed the brief, the constraints, the names. Each new session starts from zero unless you copy-paste the past in by hand.',
    metric: 'lost on repeat',
  },
];

const MODES = [
  {
    accent: 'cyan',
    icon: 'pertel',
    ns: '@sch -d',
    name: 'Pertel Dash',
    head: <>The <em>lite</em> one.</>,
    blurb: 'Memory, append-only markdown logs, doc handoff. The "don\u2019t blow my context" mode. Portable, one folder, no backend.',
    tools: ['begin', 'remember', 'recall', 'handoff', 'tail'],
    invoke: '@sch -d begin',
  },
  {
    accent: 'amber',
    icon: 'filter',
    ns: '@sch -f',
    name: 'Pertel Sift',
    head: <>The <em>filter.</em></>,
    blurb: 'Drop your idea, draft, plan, or code in. The Schedii Bible + AkrosInfra frameworks sift, kill the junk, re-separate the rest. Reasons attached.',
    tools: ['mm', 'ndv', 'ndvr', 'full', 'custom'],
    invoke: '@sch -f mm',
  },
  {
    accent: 'cyan',
    icon: 'pertel',
    ns: '@sch p',
    name: 'Pertel',
    head: <>The <em>full</em> stack.</>,
    blurb: 'Workbench + Dash + Sift + discovery, in one namespace. Everything Pertel does, in one mode. The serious one.',
    tools: ['workbench', 'memory', 'sift', 'discovery'],
    invoke: '@sch p open',
  },
];

const RM_AXES = [
  { label: 'visual',      weight: 0.30, note: 'palette · type · density' },
  { label: 'interaction', weight: 0.25, note: 'gestures · flow · timing' },
  { label: 'layout',      weight: 0.20, note: 'grids · zones · chrome' },
  { label: 'naming',      weight: 0.10, note: 'verbs · nouns · placeholders' },
  { label: 'motion',      weight: 0.10, note: 'curves · choreography' },
  { label: 'iconography', weight: 0.05, note: 'glyph family · weight' },
];

const RM_BANDS = [
  { range: '0–20%',   name: 'Distant',  tone: 'cool',    verdict: 'unrecognisable rival' },
  { range: '21–45%',  name: 'Healthy',  tone: 'target',  verdict: 'recognisable · distinct' },
  { range: '46–65%',  name: 'Echo',     tone: 'warn',    verdict: 'inspired-by · revise one axis' },
  { range: '66–85%',  name: 'Mirror',   tone: 'danger',  verdict: 'mandates a redo' },
  { range: '86–100%', name: 'Clone',    tone: 'block',   verdict: 'block · do not ship' },
];

const FRAMEWORKS = [
  /* Tier A — Core kernels */
  { code: 'F01', tier: 'A', name: 'AkronInfra PPo',         tagline: 'Proprietary Pop Order — name · contract · refusal · state · proof · handoff' },
  { code: 'F02', tier: 'A', name: 'Logic Legend',           tagline: 'Inline markers + conflict hierarchy. The reading system.' },
  { code: 'F09', tier: 'A', name: 'Akron Discipline',       tagline: 'Seven state files. Nine rules. One operating loop.' },
  { code: 'F11', tier: 'A', name: 'Verify Before Done',     tagline: 'Six evidence forms. No diff/log/test/proof — no done.' },
  { code: 'F12', tier: 'A', name: 'Safe-Write Engine',      tagline: 'Propose → preview → apply. Archive over delete. Diff before disk.' },
  { code: 'F13', tier: 'A', name: 'Discipline as MCP',      tagline: 'Resources read. Prompts run. Tools act. The doc becomes the interface.' },
  { code: 'F14', tier: 'A', name: 'Identity Continuity',    tagline: 'Rock / Sand / Dust / Gem. Build for recognition before novelty.' },
  { code: 'F15', tier: 'A', name: 'Memory Pipeline',        tagline: 'HOT · WARM · COOL · COLD. Promotion is a graph; nothing is deleted.' },
  { code: 'F16', tier: 'A', name: 'Cognitive Operator Graph', tagline: 'Twelve operators · one chaosIndex · seven-step convergent audit.' },
  { code: 'F19', tier: 'A', name: 'Security Doctrine',      tagline: 'Fifteen rules. Backend is the boundary. Frontend is hostile.' },
  /* Tier B — Support patterns */
  { code: 'F03', tier: 'B', name: 'Reminiscence Meter',     tagline: 'Six-axis similarity score. Target band 21–45%. ≥66% mandates a redo.', featured: true },
  { code: 'F04', tier: 'B', name: 'Triage Queue',           tagline: 'Every notification is a 2–3-button decision. Median triage time, not read rate.' },
  { code: 'F05', tier: 'B', name: 'Daemon Services',        tagline: 'Background work as observable services. Name · job · toggle · scope · findings.' },
  { code: 'F06', tier: 'B', name: 'Persona Boot',           tagline: 'Login lands at a workspace. Boot lands at a mode. Never permissions.' },
  { code: 'F07', tier: 'B', name: 'Intent Drive',           tagline: 'Folders are intents (verbs you’re doing), not mime types.' },
  { code: 'F08', tier: 'B', name: 'Verb Bar',               tagline: 'One input · three modes: text→search · /verb→command · ?→AI.' },
  { code: 'F10', tier: 'B', name: 'Stable-ID Worklist',     tagline: 'T · H · S · U · R. IDs are permanent. The legend is a contract.' },
];

const SESSION = [
  { who: 'you',    text: '@sch -d begin "Q4 launch debrief"' },
  { who: 'dash',   text: 'session opened \u00b7 pertel/2026-05-22/q4-launch.md' },
  { who: 'you',    text: '@sch -d remember Rob owns ig + tt, Mia owns paid.' },
  { who: 'dash',   text: 'logged \u00b7 2 facts pinned \u00b7 context safe across model swap' },
  { who: 'you',    text: '@sch -f full \u2014 sift the launch plan against the bible' },
  { who: 'sift',   text: '7 kept \u00b7 3 killed \u00b7 2 re-separated \u00b7 reasons attached' },
  { who: 'you',    text: '@sch -d handoff to claude' },
  { who: 'dash',   text: 'transcript + facts exported \u00b7 1 file \u00b7 8.2 kb \u00b7 ready' },
];

function tokenize(text) {
  return 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>
  );
}

function PertelApp() {
  return (
    <div
      className="pertel-page"
      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}}>
        <HostNavPertel />

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

            {/* HERO */}
            <section className="pertel-hero">
              <div className="pertel-hero-aura">
                <span className="ring r1" />
                <span className="ring r2" />
                <span className="ring r3" />
                <img src={(typeof window!=='undefined' && window.__resources && window.__resources.pertelFullLogo) || 'assets/pertel-full-logo.png'}
                     alt="Pertel · Intelligence by Schedii"
                     className="pertel-hero-logo" />
              </div>
              <h1>Your context, <em>kept.</em></h1>
              <p className="sub">
                <b>Pertel</b> is the intelligence layer for Claude, GPT, and Manus.
                Append-only markdown logs, memory that survives a model swap, no
                token-burn. The conversation lives outside the model so the work
                lives with you.
              </p>
              <div className="ctas">
                <a href="index.html" className="pertel-cta-primary">
                  Install Pertel
                  <McpGlyph kind="arrow" size={14} />
                </a>
                <a href="theory.html" className="pertel-cta-ghost">
                  <span style={{color:'#06b6d4'}}>§</span> Read theory
                </a>
              </div>
            </section>

            {/* §01 — Pain */}
            <section className="psec">
              <div className="psec-h">
                <h2>Context is the <em>bottleneck.</em></h2>
                <span className="sub">three ways it fails</span>
                <span className="right">pain · documented</span>
              </div>
              <div className="pains">
                {PAINS.map(p => (
                  <div className="pain" key={p.n}>
                    <span className="pain-num">{p.n} · fault</span>
                    <h3>{p.head}</h3>
                    <p>{p.body}</p>
                    <div className="pain-visual">
                      <span className="x">✕</span>
                      <span>context {p.metric}</span>
                    </div>
                  </div>
                ))}
              </div>
            </section>

            {/* §02 — Shape */}
            <section className="psec">
              <div className="psec-h">
                <h2>Memory belongs <em>outside</em> the model.</h2>
                <span className="sub">the shape of the fix</span>
                <span className="right">where pertel sits</span>
              </div>
              <div className="shape">
                <div className="shape-side" data-side="inside">
                  <span className="lbl">inside the model</span>
                  <h3>Borrowed memory<em>.</em></h3>
                  <p>
                    Lives in the context window. Truncates on overflow. Wipes on
                    model swap. Re-explained every session.
                  </p>
                  <div className="feats">
                    <span className="feat">truncated</span>
                    <span className="feat">model-local</span>
                    <span className="feat">re-paste</span>
                  </div>
                </div>
                <div className="shape-bridge" aria-hidden="true" />
                <div className="shape-side" data-side="outside">
                  <span className="lbl">outside the model</span>
                  <h3>Pertel-kept<em>.</em></h3>
                  <p>
                    Lives in <code style={{color:'#67e8f9', fontFamily:'ui-monospace, Menlo, monospace'}}>.pertel/</code> as
                    append-only markdown. Survives overflow. Survives the swap.
                    Loadable from any model.
                  </p>
                  <div className="feats">
                    <span className="feat">append-only</span>
                    <span className="feat">grepable</span>
                    <span className="feat">portable</span>
                  </div>
                </div>
              </div>
            </section>

            {/* §03 — In action */}
            <section className="psec">
              <div className="psec-h">
                <h2>A session, <em>abridged.</em></h2>
                <span className="sub">what using pertel looks like</span>
                <span className="right">live-style transcript</span>
              </div>
              <div className="in-action">
                <div className="in-action-head">
                  <span className="lights"><span/><span/><span/></span>
                  <span>~/.pertel/2026-05-22/q4-launch.md</span>
                  <span style={{marginLeft:'auto', color:'#06b6d4'}}>● live</span>
                </div>
                <div className="in-action-body">
                  {SESSION.map((l, i) => (
                    <div className="in-action-line" key={i}>
                      <div className="in-action-who" data-who={l.who}>{l.who}</div>
                      <div className="in-action-text">
                        {tokenize(l.text)}
                        {i === SESSION.length - 1 && <span className="live-cursor" />}
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            </section>

            {/* §04 — Modes */}
            <section className="psec">
              <div className="psec-h">
                <h2>Three <em>modes.</em></h2>
                <span className="sub">one binary, switched by flag</span>
                <span className="right">@sch -d · @sch -f · @sch p</span>
              </div>
              <div className="modes-grid-3">
                {MODES.map(m => (
                  <div className="mode-card" data-accent={m.accent} key={m.ns}>
                    <div className="mode-card-head">
                      <div className="glyph"><McpGlyph kind={m.icon} size={26} /></div>
                      <div className="ns">{m.ns}</div>
                    </div>
                    <h3>{m.head}</h3>
                    <div style={{
                      fontFamily:'"Iowan Old Style", Georgia, serif',
                      fontStyle:'italic',
                      fontSize:14,
                      color: m.accent === 'amber' ? '#fbbf24' : '#06b6d4',
                      opacity: 0.85,
                      marginTop: -4,
                    }}>{m.name}</div>
                    <p className="blurb">{m.blurb}</p>
                    <div className="meta">
                      <div className="tools">
                        {m.tools.map(t => <b key={t}>{t}</b>)}
                      </div>
                      <div className="invoke-hint">{m.invoke}</div>
                    </div>
                  </div>
                ))}
              </div>
            </section>

            {/* §05 — The three lenses of Pertel F */}
            <section className="psec">
              <div className="psec-h">
                <h2>The filter’s <em>three minds.</em></h2>
                <span className="sub">how pertel f thinks</span>
                <span className="right">@sch -f · mm · ndv · ndvr</span>
              </div>
              <div className="modes-grid-3">
                <div className="mode-card" data-accent="amber">
                  <div className="mode-card-head">
                    <div className="glyph">
                      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
                        <circle cx="12" cy="5"  r="2" />
                        <circle cx="5"  cy="15" r="2" />
                        <circle cx="19" cy="15" r="2" />
                        <circle cx="12" cy="20" r="2" />
                        <path d="M12 7v6M7 15l4-3M17 15l-4-3M12 13v5" />
                      </svg>
                    </div>
                    <div className="ns">@sch -f mm</div>
                  </div>
                  <h3>MmM</h3>
                  <div style={{
                    fontFamily:'"Iowan Old Style", Georgia, serif',
                    fontStyle:'italic',
                    fontSize:14,
                    color:'#b45309',
                    opacity:0.85,
                    marginTop:-4,
                  }}>Metered Mind Map</div>
                  <p className="blurb">
                    A graph-based filter. Concepts become nodes; relations become
                    edges. Salience is measured. The filter follows the strongest
                    paths and reports the weakest joints.
                  </p>
                  <div className="meta">
                    <div className="tools">
                      <b>nodes</b><b>edges</b><b>salience</b><b>paths</b>
                    </div>
                    <div className="invoke-hint">graph · metered</div>
                  </div>
                </div>

                <div className="mode-card" data-accent="amber">
                  <div className="mode-card-head">
                    <div className="glyph">
                      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
                        <circle cx="12" cy="12" r="3" />
                        <path d="M12 5V3M12 21v-2M5 12H3M21 12h-2M6.34 6.34l1.41 1.41M16.24 16.24l1.42 1.42M6.34 17.66l1.41-1.41M16.24 7.76l1.42-1.42" opacity="0.7"/>
                      </svg>
                    </div>
                    <div className="ns">@sch -f ndv</div>
                  </div>
                  <h3>Neurodivii</h3>
                  <div style={{
                    fontFamily:'"Iowan Old Style", Georgia, serif',
                    fontStyle:'italic',
                    fontSize:14,
                    color:'#b45309',
                    opacity:0.85,
                    marginTop:-4,
                  }}>Neurodivergent lens</div>
                  <p className="blurb">
                    Re-weights signal so unusual angles survive the standard
                    cut. The &ldquo;what if?&rdquo; that a canonical pass would have
                    killed gets a second look.
                  </p>
                  <div className="meta">
                    <div className="tools">
                      <b>re-weight</b><b>preserve</b><b>angle</b>
                    </div>
                    <div className="invoke-hint">second-look</div>
                  </div>
                </div>

                <div className="mode-card" data-accent="amber">
                  <div className="mode-card-head">
                    <div className="glyph">
                      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
                        <circle cx="12" cy="12" r="3" />
                        <path d="M12 5V3M12 21v-2M5 12H3M21 12h-2" opacity="0.7"/>
                        <path d="M16 9h3l-1.5 2 1.5 2h-3M16 9v6" />
                      </svg>
                    </div>
                    <div className="ns">@sch -f ndvr</div>
                  </div>
                  <h3>Neurodivii + <em>Reason</em></h3>
                  <div style={{
                    fontFamily:'"Iowan Old Style", Georgia, serif',
                    fontStyle:'italic',
                    fontSize:14,
                    color:'#b45309',
                    opacity:0.85,
                    marginTop:-4,
                  }}>ND lens · with reasoning trace</div>
                  <p className="blurb">
                    Same lens, plus the why. Every keep, kill, and re-separation
                    comes back with its reasoning attached. The filter that
                    explains itself.
                  </p>
                  <div className="meta">
                    <div className="tools">
                      <b>reasoned</b><b>traced</b><b>auditable</b>
                    </div>
                    <div className="invoke-hint">filter + why</div>
                  </div>
                </div>
              </div>
            </section>

            {/* §06 — AkrosInfra discipline */}
            <section className="psec">
              <div className="psec-h">
                <h2>Built on <em>AkrosInfra.</em></h2>
                <span className="sub">discipline · seventeen frameworks</span>
                <span className="right">akros · infra · unified</span>
              </div>

              {/* Featured: Reminiscence Meter */}
              <div className="rm-card">
                <div className="rm-card-head">
                  <div className="rm-eyebrow">
                    <span className="rm-code">F03</span>
                    <span>tier B · quality gate</span>
                  </div>
                  <h3>The Reminiscence Meter<em>.</em></h3>
                  <p className="rm-lede">
                    Quality-gate every surface against its closest rival. Six weighted axes.
                    Five bands. One target zone — and a hard refusal at the top end.
                  </p>
                </div>

                <div className="rm-card-body">
                  {/* Left: axis breakdown */}
                  <div className="rm-axes">
                    <div className="rm-section-label">six weighted axes</div>
                    {RM_AXES.map(a => (
                      <div className="rm-axis" key={a.label}>
                        <div className="rm-axis-row">
                          <span className="rm-axis-name">{a.label}</span>
                          <span className="rm-axis-weight">{Math.round(a.weight * 100)}%</span>
                        </div>
                        <div className="rm-axis-bar">
                          <span style={{ width: `${a.weight * 100}%` }} />
                        </div>
                        <div className="rm-axis-note">{a.note}</div>
                      </div>
                    ))}
                    <div className="rm-formula">
                      <code>score = 0.30·visual + 0.20·layout + 0.25·interaction + 0.10·naming + 0.10·motion + 0.05·iconography</code>
                    </div>
                  </div>

                  {/* Right: five bands */}
                  <div className="rm-bands">
                    <div className="rm-section-label">five bands · one target</div>
                    {RM_BANDS.map(b => (
                      <div className="rm-band" data-tone={b.tone} key={b.range}>
                        <div className="rm-band-range">{b.range}</div>
                        <div className="rm-band-body">
                          <div className="rm-band-name">
                            {b.name}
                            {b.tone === 'target' && <span className="rm-band-pin">target</span>}
                          </div>
                          <div className="rm-band-verdict">{b.verdict}</div>
                        </div>
                      </div>
                    ))}
                    <div className="rm-closing-rule">
                      <span className="rm-closing-label">closing rule</span>
                      <span>You cannot land in the healthy band by accident. It is a design choice.</span>
                    </div>
                  </div>
                </div>
              </div>

              {/* Framework capsule grid */}
              <div className="fw-grid-head">
                <span>seventeen frameworks · one composition</span>
                <span className="fw-tier-key">
                  <span><b className="fw-tier-dot fw-tier-a" />Tier A · core kernels</span>
                  <span><b className="fw-tier-dot fw-tier-b" />Tier B · support patterns</span>
                </span>
              </div>
              <div className="fw-grid">
                {FRAMEWORKS.map(f => (
                  <div className={`fw-capsule${f.featured ? ' featured' : ''}`} data-tier={f.tier} key={f.code}>
                    <div className="fw-capsule-head">
                      <span className="fw-code">{f.code}</span>
                      <span className="fw-tier">tier {f.tier}</span>
                    </div>
                    <div className="fw-name">{f.name}</div>
                    <div className="fw-tagline">{f.tagline}</div>
                  </div>
                ))}
              </div>
            </section>

            {/* Install CTA */}
            <div className="pertel-install">
              <div>
                <h2>Install once. <em>Recall efficiently.</em></h2>
                <p>
                  One binary. One key. Drop the JSON into Claude, Cursor, ChatGPT,
                  or anywhere MCP works.
                </p>
              </div>
              <div className="ctas">
                <a href="index.html" className="pertel-cta-primary">
                  Get the config
                  <McpGlyph kind="arrow" size={14} />
                </a>
                <a href="theory.html" className="pertel-cta-ghost">
                  <span style={{color:'#06b6d4'}}>§</span> Why this exists
                </a>
              </div>
            </div>

            {/* Footer */}
            <div className="foot" style={{marginTop: 32}}>
              <span><b>pertel</b> · intelligence by schedii</span>
              <span>v0.4.1-alpha</span>
              <span>framework · <a href="docs/AkrosInfra_Unified_Framework.md" style={{color:'#0e7490', textDecoration:'none'}}>AkrosInfra unified</a></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(<PertelApp />);