// Primust proof-first marketing pages.

const CLAIM_BOUNDARY =
  'Primust proves the governed record: what was authorized, which controls ran, what evidence was observed, what gaps remained, and what outcome the chain was bound to. It does not certify that the AI output is true, safe, lawful, compliant, fit for purpose, or causally explained.';

const ASSESSMENT_MAILTO =
  'mailto:hello@primust.com?subject=14-day%20Agent%20Control%20Coverage%20Assessment';

function SiteHref(href) {
  if (!href || href === '#' || href.startsWith('#') || /^(https?:|mailto:)/.test(href)) return href || '#';
  if (href === '/') return '/';
  const localStatic = typeof window !== 'undefined'
    && (window.location.protocol === 'file:'
      || ['localhost', '127.0.0.1', '0.0.0.0'].includes(window.location.hostname));
  if (!localStatic) return href;
  const [path, hash] = href.split('#');
  if (/\.[a-z0-9]+$/i.test(path)) return href;
  return `${path}.html${hash ? `#${hash}` : ''}`;
}

function PageShell({ children }) {
  return (
    <div>
      <Nav />
      {children}
      <ProofFooter />
    </div>
  );
}

function PageHero({ eyebrow, title, subhead, support, primaryCta, primaryHref, secondaryCta, secondaryHref, visual }) {
  const { C, F } = window.PT;
  const narrow = typeof window !== 'undefined' && window.innerWidth < 760;
  return (
    <section style={{ padding: narrow ? '26px 20px 34px' : '36px 48px', borderBottom: `1px solid ${C.line}` }}>
      <div style={{
        maxWidth: 1280,
        margin: '0 auto',
        display: 'grid',
        gridTemplateColumns: narrow ? 'minmax(0, 1fr)' : 'minmax(0, 0.95fr) minmax(320px, 1.05fr)',
        gap: narrow ? 28 : 42,
        alignItems: 'center',
      }}>
        <div style={{ minWidth: 0 }}>
          <Eyebrow color={C.accent}>{eyebrow}</Eyebrow>
          <h1 style={{
            fontFamily: F.serif,
            fontSize: narrow ? 'clamp(36px, 11vw, 48px)' : 'clamp(40px, 5.2vw, 72px)',
            lineHeight: 1.02,
            letterSpacing: 0,
            fontWeight: 400,
            margin: '18px 0 18px',
            color: C.ink,
            maxWidth: 920,
          }}>{title}</h1>
          <p style={{
            fontFamily: F.sans,
            fontSize: narrow ? 17 : 19,
            lineHeight: 1.55,
            color: C.inkSoft,
            margin: 0,
            maxWidth: 760,
          }}>{subhead}</p>
          {support && (
            <p style={{
              fontFamily: F.mono,
              fontSize: 13,
              lineHeight: 1.6,
              color: C.accentDeep,
              margin: '18px 0 0',
              maxWidth: 720,
            }}>{support}</p>
          )}
          <CTAGroup
            primaryCta={primaryCta}
            primaryHref={primaryHref}
            secondaryCta={secondaryCta}
            secondaryHref={secondaryHref}
          />
        </div>
        <div style={{ minWidth: 0 }}>{visual}</div>
      </div>
    </section>
  );
}

function CTAGroup({ primaryCta, primaryHref, secondaryCta, secondaryHref }) {
  return (
    <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', marginTop: 30 }}>
      {primaryCta && <ProofButton href={primaryHref}>{primaryCta}</ProofButton>}
      {secondaryCta && <ProofButton href={secondaryHref} variant="secondary">{secondaryCta}</ProofButton>}
    </div>
  );
}

function ProofButton({ href, children, variant = 'primary' }) {
  const { C, F } = window.PT;
  const narrow = typeof window !== 'undefined' && window.innerWidth < 760;
  const primary = variant === 'primary';
  const ext = /^(https?:|mailto:)/.test(href || '');
  return (
    <a
      href={SiteHref(href)}
      {...(ext ? { target: '_blank', rel: 'noopener' } : {})}
      style={{
        display: 'inline-flex',
        alignItems: 'center',
        justifyContent: 'center',
        flex: narrow ? '1 1 100%' : '0 1 auto',
        minHeight: 42,
        padding: '10px 16px',
        borderRadius: 6,
        border: `1px solid ${primary ? C.ink : C.lineStrong}`,
        background: primary ? C.ink : 'transparent',
        color: primary ? C.bg : C.ink,
        textDecoration: 'none',
        fontFamily: F.sans,
        fontSize: 14,
        fontWeight: 600,
        letterSpacing: 0,
        whiteSpace: 'normal',
      }}
    >
      {children}
    </a>
  );
}

function ProofSection({ eyebrow, title, children, visual, bg, id }) {
  const { C, F } = window.PT;
  const narrow = typeof window !== 'undefined' && window.innerWidth < 760;
  return (
    <section id={id} style={{ padding: narrow ? '56px 20px' : '84px 48px', background: bg || 'transparent', borderBottom: `1px solid ${C.line}` }}>
      <div style={{
        maxWidth: 1280,
        margin: '0 auto',
        display: 'grid',
        gridTemplateColumns: narrow || !visual ? 'minmax(0, 1fr)' : 'minmax(0, 0.92fr) minmax(320px, 1.08fr)',
        gap: narrow ? 28 : 42,
        alignItems: 'start',
      }}>
        <div style={{ minWidth: 0 }}>
          {eyebrow && <div style={{ marginBottom: 16 }}><Eyebrow color={C.dim}>{eyebrow}</Eyebrow></div>}
          <h2 style={{
            margin: 0,
            fontFamily: F.serif,
            fontSize: narrow ? 'clamp(30px, 10vw, 42px)' : 'clamp(30px, 4.4vw, 54px)',
            lineHeight: 1.07,
            letterSpacing: 0,
            fontWeight: 400,
            color: C.ink,
            maxWidth: 880,
          }}>{title}</h2>
          <div style={{ marginTop: 22 }}>{children}</div>
        </div>
        {visual && <div style={{ minWidth: 0 }}>{visual}</div>}
      </div>
    </section>
  );
}

function Paragraph({ children }) {
  const { C, F } = window.PT;
  const narrow = typeof window !== 'undefined' && window.innerWidth < 760;
  return (
    <p style={{
      fontFamily: F.sans,
      fontSize: narrow ? 15.5 : 16,
      lineHeight: 1.65,
      color: C.inkSoft,
      margin: '0 0 16px',
      maxWidth: 780,
    }}>{children}</p>
  );
}

function BulletList({ items }) {
  const { C, F } = window.PT;
  return (
    <ul style={{ listStyle: 'none', padding: 0, margin: '18px 0 0', display: 'grid', gap: 8, maxWidth: 820 }}>
      {items.map(item => (
        <li key={item} style={{
          display: 'grid',
          gridTemplateColumns: '18px 1fr',
          gap: 10,
          fontFamily: F.sans,
          fontSize: 15.5,
          lineHeight: 1.5,
          color: C.inkSoft,
        }}>
          <span style={{ color: C.accent, fontFamily: F.mono }}>+</span>
          <span>{item}</span>
        </li>
      ))}
    </ul>
  );
}

function FrameworkChips({ items }) {
  const { C, F } = window.PT;
  return (
    <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginTop: 14 }}>
      {items.map(item => (
        <span key={item} style={{
          display: 'inline-flex',
          border: `1px solid ${C.line}`,
          background: '#FBFAF6',
          borderRadius: 999,
          padding: '6px 10px',
          fontFamily: F.mono,
          fontSize: 10.5,
          color: C.inkSoft,
          lineHeight: 1,
        }}>
          {item}
        </span>
      ))}
    </div>
  );
}

function OrderedBlocks({ items }) {
  const { C, F } = window.PT;
  return (
    <div style={{ display: 'grid', gap: 12, marginTop: 20, maxWidth: 860 }}>
      {items.map(([title, body], i) => (
        <div key={title} style={{
          display: 'grid',
          gridTemplateColumns: '32px 1fr',
          gap: 14,
          padding: '16px 0',
          borderBottom: `1px solid ${C.lineSoft}`,
        }}>
          <div style={{ fontFamily: F.mono, fontSize: 12, color: C.dim }}>{i + 1}.</div>
          <div>
            <div style={{ fontFamily: F.serif, fontSize: 21, color: C.ink, marginBottom: 5 }}>{title}</div>
            <div style={{ fontFamily: F.sans, fontSize: 15.5, lineHeight: 1.55, color: C.inkSoft }}>{body}</div>
          </div>
        </div>
      ))}
    </div>
  );
}

function InfoCards({ cards }) {
  const { C, F } = window.PT;
  const narrow = typeof window !== 'undefined' && window.innerWidth < 760;
  return (
    <div style={{
      display: 'grid',
      gridTemplateColumns: `repeat(auto-fit, minmax(${narrow ? 180 : 220}px, 1fr))`,
      gap: 14,
      marginTop: 28,
    }}>
      {cards.map(([title, body]) => (
        <div key={title} style={{
          border: `1px solid ${C.line}`,
          borderRadius: 8,
          background: C.paper,
          padding: 18,
        }}>
          <div style={{ fontFamily: F.serif, fontSize: 21, color: C.ink, marginBottom: 8 }}>{title}</div>
          <div style={{ fontFamily: F.sans, fontSize: 14.5, lineHeight: 1.55, color: C.inkSoft }}>{body}</div>
        </div>
      ))}
    </div>
  );
}

function ClaimBoundary({ title = 'Evidence boundary', body = CLAIM_BOUNDARY }) {
  const { C, F } = window.PT;
  return (
    <div style={{
      border: `1px solid ${C.lineStrong}`,
      borderRadius: 8,
      padding: 20,
      background: C.paper,
      maxWidth: 900,
      marginTop: 8,
    }}>
      <div style={{ fontFamily: F.mono, fontSize: 11, color: C.dim, textTransform: 'uppercase', marginBottom: 10 }}>
        {title}
      </div>
      <div style={{ fontFamily: F.sans, fontSize: 15.5, lineHeight: 1.6, color: C.inkSoft }}>
        {body}
      </div>
    </div>
  );
}

function FinalCTA({ title, body, primaryCta, primaryHref, secondaryCta, secondaryHref }) {
  const { C, F } = window.PT;
  const narrow = typeof window !== 'undefined' && window.innerWidth < 760;
  return (
    <section style={{ padding: narrow ? '56px 20px' : '84px 48px', background: C.ink, color: C.darkInk }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <h2 style={{
          margin: 0,
          fontFamily: F.serif,
          fontSize: 'clamp(34px, 5vw, 64px)',
          lineHeight: 1.05,
          letterSpacing: 0,
          fontWeight: 400,
          color: C.darkInk,
          maxWidth: 860,
        }}>{title}</h2>
        {body && (
          <p style={{
            margin: '18px 0 0',
            fontFamily: F.sans,
            fontSize: 17,
            lineHeight: 1.6,
            color: C.darkDim,
            maxWidth: 780,
          }}>{body}</p>
        )}
        <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', marginTop: 28 }}>
          <a href={SiteHref(primaryHref)} style={{
            padding: '11px 16px',
            borderRadius: 6,
            background: C.darkInk,
            color: C.ink,
            textDecoration: 'none',
            fontFamily: F.sans,
            fontWeight: 650,
            fontSize: 14,
          }}>{primaryCta}</a>
          {secondaryCta && (
            <a href={SiteHref(secondaryHref)} style={{
              padding: '11px 16px',
              borderRadius: 6,
              border: `1px solid ${C.darkInk}`,
              color: C.darkInk,
              textDecoration: 'none',
              fontFamily: F.sans,
              fontWeight: 650,
              fontSize: 14,
            }}>{secondaryCta}</a>
          )}
        </div>
      </div>
    </section>
  );
}

function HomeHeroVisual() {
  const { C, F } = window.PT;
  return (
    <div style={{ display: 'grid', gap: 14 }}>
      <GovernedCredentialCard result="PASS" gaps="0" tone="good" />
      <div style={{ fontFamily: F.mono, fontSize: 10.5, lineHeight: 1.45, color: C.dim, textTransform: 'uppercase' }}>
        Agent surfaces and frameworks Primust can bind evidence around
      </div>
      <FrameworkChips items={[
        'OpenAI Agents SDK',
        'LangGraph',
        'CrewAI',
        'LlamaIndex',
        'Microsoft Agent Framework',
        'Google ADK',
        'AWS Strands',
        'Pydantic AI',
        'Claude Code',
        'Cursor',
      ]} />
    </div>
  );
}

function HomeChainSection() {
  const { C, F } = window.PT;
  const narrow = typeof window !== 'undefined' && window.innerWidth < 760;
  const cards = [
    ['Scope Authorization', 'What work was allowed: a ticket, issue, approval, work order, policy scope, or delegated agent task.'],
    ['Control Receipts', 'Which controls ran, what version they used, what they observed, and what result they produced.'],
    ['Runtime Evidence', 'Model identity, tool use, shell commands, file edits, scanner results, detector health, policy gaps, and other governed evidence.'],
    ['Outcome Binding', 'The PR, commit, claim decision, ticket update, record write, or business action the chain produced.'],
    ['Governed-Execution Credential', 'A signed, timestamped, offline-verifiable credential binding the evidence chain.'],
    ['Evidence Pack', 'A portable artifact for deployers, AI vendors, auditors, carriers, regulators, customers, and counterparties.'],
    ['Offline Verifier', 'A deterministic verifier another party can run without calling Primust.'],
  ];

  return (
    <section style={{ padding: narrow ? '56px 20px' : '84px 48px', background: C.bgAlt, borderBottom: `1px solid ${C.line}` }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div style={{
          display: 'grid',
          gridTemplateColumns: narrow ? 'minmax(0, 1fr)' : 'minmax(0, 0.86fr) minmax(420px, 1.14fr)',
          gap: narrow ? 28 : 42,
          alignItems: 'start',
        }}>
          <div style={{ minWidth: 0 }}>
            <div style={{ marginBottom: 16 }}><Eyebrow color={C.dim}>THE CHAIN</Eyebrow></div>
            <h2 style={{
              margin: 0,
              fontFamily: F.serif,
              fontSize: narrow ? 'clamp(30px, 10vw, 42px)' : 'clamp(30px, 4.4vw, 54px)',
              lineHeight: 1.07,
              letterSpacing: 0,
              fontWeight: 400,
              color: C.ink,
              maxWidth: 820,
            }}>
              From authorized work to verifier-readable proof.
            </h2>
            <div style={{ marginTop: 22 }}>
              <Paragraph>AI agents write code, call tools, retrieve documents, update records, trigger workflows, and make consequential recommendations across systems your existing controls only partially see.</Paragraph>
              <Paragraph>Primust binds the evidence path: what work was authorized, which controls ran, what they observed, what gaps remained, what outcome resulted, and whether the chain held.</Paragraph>
            </div>
          </div>
          <div style={{ minWidth: 0 }}>
            <HeroProofChainVisual />
          </div>
        </div>
        <div style={{ marginTop: narrow ? 28 : 34 }}>
          <InfoCards cards={cards} />
        </div>
        <CTAGroup primaryCta="See AI agent evidence" primaryHref="/agents" />
      </div>
    </section>
  );
}

function HomePage() {
  const { C } = window.PT;
  return (
    <PageShell>
      <PageHero
        eyebrow="OFFLINE-VERIFIABLE EVIDENCE FOR AI WORK"
        title="When someone asks what your AI actually did, hand them proof."
        subhead="Primust proves governed AI work from authorization to outcome, then sends verifier-readable evidence wherever your team already works: the app, APIs, SIEM, PR gates, CI/CD, GRC workflows, audit portals, data lakes, or offline Evidence Packs."
        support="Your controls decide. Primust proves the chain."
        primaryCta="See the coding-agent proof chain"
        primaryHref="/coding-agents"
        secondaryCta="Verify a sample Evidence Pack"
        secondaryHref="/evidence-packs"
        visual={<HomeHeroVisual />}
      />
      <HomeChainSection />
      <ProofSection
        eyebrow="SURFACES"
        title="The app, API, exports, and verifier all read the same chain."
        visual={<IntegrationsHubVisual />}
      >
        <Paragraph>Use Primust in the command-center app, embed verifier results in your own tools, or run headless behind existing workflows. The evidence layer stays the same.</Paragraph>
        <InfoCards cards={[
          ['Command center', 'Investigate chains, gaps, controls, outcomes, Proof Mix, exports, and Evidence Packs.'],
          ['APIs and hooks', 'Capture agent runtime metadata, control results, outcome bindings, and verifier results through SDKs, APIs, hooks, and webhooks.'],
          ['Enterprise outputs', 'Send results to SIEM, PR gates, CI/CD, GRC workflows, audit portals, data lakes, and evidence stores.'],
          ['Offline verifier', 'Hand over Evidence Packs that another party can verify without calling Primust.'],
        ]} />
      </ProofSection>
      <ProofSection
        eyebrow="TRUST BOUNDARY"
        title="Content stays with you. Proof travels."
        bg={C.bgAlt}
        visual={<ThreePlaneTrustVisual />}
      >
        <Paragraph>Primust does not need raw prompts, raw outputs, code contents, PHI, PII, secrets, or customer content to issue verifier-readable evidence. Your tools keep the raw events. Primust receives commitments, pointers, metadata, and verification results, then binds them into portable proof.</Paragraph>
        <Paragraph>That proof can travel to whoever needs to verify the governed work: the deploying customer reviewing an AI vendor, the auditor sampling controls, the carrier diligence team, the regulator reviewing an AI program, or the counterparty signing the contract.</Paragraph>
        <Paragraph>{CLAIM_BOUNDARY}</Paragraph>
      </ProofSection>
      <FinalCTA
        title="Ready to see the chain?"
        body="Start with one real AI-agent workflow, or verify a sample Evidence Pack first. The point is the same: show what was governed, what was missing, and what another party can verify."
        primaryCta="Run a 14-day assessment"
        primaryHref={ASSESSMENT_MAILTO}
        secondaryCta="Verify a sample Evidence Pack"
        secondaryHref="/evidence-packs"
      />
    </PageShell>
  );
}

function CodingAgentsPage() {
  const { C } = window.PT;
  return (
    <PageShell>
      <PageHero
        eyebrow="CODING AGENT GOVERNANCE"
        title="Prove AI-generated code changes were governed before merge."
        subhead="Bind every coding-agent run to a ticket, tool use, file edits, shell commands, scanner results, PR, CI outcome, and offline-verifiable credential."
        primaryCta="Run a 14-day Agent Control Coverage Assessment"
        primaryHref={ASSESSMENT_MAILTO}
        secondaryCta="See the proof chain"
        secondaryHref="/chain-verifier"
        visual={<CodingAgentPrCheckMock />}
      />
      <ProofSection title="The diff is not the review record. The session is.">
        <Paragraph>A pull request shows what changed. It does not show the full governed session that produced the change.</Paragraph>
        <Paragraph>For AI-generated code, reviewers also need to know what the agent was asked to do, which files it read, which commands it ran, which tools it called, which controls fired, what was blocked, which scanners passed, which gaps remained, and how the final PR was bound to the run.</Paragraph>
        <Paragraph>Primust turns the session into evidence.</Paragraph>
      </ProofSection>
      <ProofSection title="From ticket to PR outcome." bg={C.bgAlt}>
        <Paragraph>Primust binds the coding-agent chain end to end:</Paragraph>
        <OrderedBlocks items={[
          ['Scope Authorization', 'The approved issue, ticket, task, or work order.'],
          ['Agent session', 'The coding-agent run, model identity, tool use, and runtime observations.'],
          ['Control Receipts', 'Shell policy, file scope, scanner results, detector health, secrets checks, MCP/tool checks, network egress, and other controls.'],
          ['Outcome Binding', 'The PR, commit, CI result, review state, and merge policy.'],
          ['Governed-Execution Credential', 'A signed credential that binds the evidence chain.'],
          ['Evidence Pack', 'A portable export another party can verify offline.'],
        ]} />
      </ProofSection>
      <ProofSection title="What Primust observes.">
        <Paragraph>Primust can bind evidence from coding-agent work without shipping raw code contents to Primust.</Paragraph>
        <Paragraph>Observation examples:</Paragraph>
        <BulletList items={[
          'Scope Authorization: GitHub issue, Jira ticket, approval, or delegated task',
          'Model identity and agent runtime metadata',
          'Shell commands and command policy results',
          'File edits and workspace scope',
          'MCP and tool calls',
          'Network egress metadata',
          'Scanner and detector results',
          'Secrets and sensitive-data checks',
          'PR, commit, CI, and review binding',
          'Gaps and downgrade reasons',
        ]} />
      </ProofSection>
      <ProofSection title="PASS, PARTIAL, or FAIL in the PR." bg={C.bgAlt} visual={<CodingAgentPrCheckMock />}>
        <Paragraph>Primust can post a chain verification result where engineering already works. A PR check can show whether the governed evidence chain passed, partially passed with named gaps, or failed policy.</Paragraph>
        <Paragraph>A PARTIAL result is useful evidence with named gaps. Your policy decides whether it blocks, warns, or exports for review.</Paragraph>
      </ProofSection>
      <ProofSection title="Send the same result to SIEM, CI/CD, and Evidence Packs." visual={<SiemEventMock scenario="coding" />}>
        <Paragraph>The PR check is one output. The same chain verification result can also be emitted as an allowlisted SIEM event, a CI/CD gate, a webhook, a data-lake event, or an Evidence Pack.</Paragraph>
        <Paragraph>Your SIEM sees events. Primust proves which events formed a governed AI action chain.</Paragraph>
      </ProofSection>
      <ProofSection title="The 14-day Agent Control Coverage Assessment." bg={C.bgAlt}>
        <Paragraph>Start with one real coding-agent workflow. Primust instruments it for 14 days and produces an Agent Control Coverage Report showing what was governed, what was missing, and what evidence your team can verify offline.</Paragraph>
        <Paragraph>Deliverables:</Paragraph>
        <BulletList items={[
          'Agent inventory',
          'Control coverage map',
          'Scope Authorization Coverage',
          'PR / CI / outcome binding coverage',
          'Gap taxonomy',
          'Proof Mix by workflow',
          'Offline-verifiable sample credentials',
          'Recommended controls to add before broader rollout',
        ]} />
      </ProofSection>
      <ProofSection title="What the PR check proves.">
        <Paragraph>Primust proves the governed coding-agent session behind the PR: authorization, controls, runtime evidence, gaps, and PR/CI binding. It does not certify that the code is correct, secure, compliant, or safe to merge.</Paragraph>
      </ProofSection>
      <FinalCTA
        title="Let agents move without losing the evidence."
        primaryCta="Run a 14-day assessment"
        primaryHref={ASSESSMENT_MAILTO}
        secondaryCta="Verify a sample Evidence Pack"
        secondaryHref="/evidence-packs"
      />
    </PageShell>
  );
}

function AgentsPage() {
  const { C } = window.PT;
  return (
    <PageShell>
      <PageHero
        eyebrow="AI AGENT EVIDENCE"
        title="Prove what your AI agents did across tools, controls, and outcomes."
        subhead="Bind agent runs to authorization, model identity, tool calls, approvals, control results, runtime evidence, gaps, and final outcomes in one offline-verifiable evidence chain."
        primaryCta="See Chain Verifier"
        primaryHref="/chain-verifier"
        secondaryCta="See Integrations"
        secondaryHref="/integrations"
        visual={<ChainDetailMock />}
      />
      <ProofSection title="Agent work crosses systems. The proof has to cross them too.">
        <Paragraph>Modern AI agents do more than generate text. They call tools, retrieve documents, update records, trigger workflows, create tickets, recommend decisions, and hand work to other systems.</Paragraph>
        <Paragraph>Primust gives those runs a governed evidence chain: what was allowed, what ran, what was observed, what was missing, and what outcome resulted.</Paragraph>
      </ProofSection>
      <ProofSection title="What Primust binds." bg={C.bgAlt}>
        <BulletList items={[
          'Scope Authorization from tickets, approvals, policies, delegated tasks, or workflow scope',
          'Actor, agent, runtime, and model identity metadata',
          'Tool calls, MCP calls, shell commands, record writes, and system events where observed',
          'Control Receipts from policy engines, scanners, detectors, IAM decisions, and review steps',
          'Runtime Evidence, named gaps, and downgrade reasons',
          'Outcome Binding to a PR, ticket update, recommendation, record write, claim decision, or business action',
          'Evidence Packs and Offline Verifier results for third-party review',
        ]} />
      </ProofSection>
      <ProofSection title="Use the same proof wherever the work lands." visual={<IntegrationsHubVisual />}>
        <Paragraph>Use Primust in the app to investigate a chain, in your tools to receive verifier results, or headless behind the workflow. Verification results can flow to SIEM events, PR checks, CI/CD gates, webhooks, audit exports, data lake events, Evidence Packs, and the Offline Verifier.</Paragraph>
        <Paragraph>Your controls decide. Primust proves the chain.</Paragraph>
      </ProofSection>
      <ProofSection title="Coding agents are one high-signal workflow." bg={C.bgAlt}>
        <Paragraph>For engineering teams, coding agents are often the fastest place to start because the authorization, session, file edits, scanner results, PR, and CI outcome are concrete. The same evidence-chain model applies to other governed agent workflows.</Paragraph>
        <CTAGroup primaryCta="See Coding Agents" primaryHref="/coding-agents" />
      </ProofSection>
      <ProofSection title="What the evidence covers.">
        <Paragraph>{CLAIM_BOUNDARY}</Paragraph>
      </ProofSection>
      <FinalCTA
        title="Show the governed agent chain."
        primaryCta="See Chain Verifier"
        primaryHref="/chain-verifier"
        secondaryCta="See Integrations"
        secondaryHref="/integrations"
      />
    </PageShell>
  );
}

function ChainVerifierPage() {
  const { C } = window.PT;
  return (
    <PageShell>
      <PageHero
        eyebrow="CHAIN VERIFIER"
        title="Verify governed AI work from authorization to outcome."
        subhead="The Chain Verifier shows what was authorized, what controls ran, what evidence was observed, what outcome resulted, and where the proof chain failed or degraded."
        primaryCta="Verify a sample Evidence Pack"
        primaryHref="/evidence-packs"
        secondaryCta="See AI Agents"
        secondaryHref="/agents"
        visual={<ChainDetailMock />}
      />
      <ProofSection title="One chain. One verdict. Named gaps.">
        <Paragraph>Primust does not flatten AI work into a single green check. It shows the verifier result, the Proof Mix, and the gaps.</Paragraph>
        <InfoCards cards={[
          ['PASS', 'The declared evidence chain met the required policy gates.'],
          ['PARTIAL', 'The chain produced useful evidence, but one or more required observations, controls, bindings, or proof thresholds were missing or degraded.'],
          ['FAIL', 'The chain violated policy, missed required evidence, failed verification, or could not bind to the required outcome.'],
        ]} />
      </ProofSection>
      <ProofSection title="Proof Mix shows the strength of the evidence." bg={C.bgAlt}>
        <Paragraph>Proof Mix shows the distribution of evidence tiers achieved across the governed AI chain. It is not a claim that the AI output was correct.</Paragraph>
      </ProofSection>
      <ProofSection title="Gaps are first-class.">
        <Paragraph>Missing evidence should not disappear into a dashboard footnote. Primust surfaces gaps as named objects: missing controls, stale profiles, detector failures, unobserved network egress, incomplete outcome binding, policy mismatches, proof downgrades, and other verifier-visible reasons.</Paragraph>
        <Paragraph>The result is stronger when the gaps are visible.</Paragraph>
      </ProofSection>
      <ProofSection title="Verify online or offline." bg={C.bgAlt} visual={<EvidencePackCard />}>
        <Paragraph>Use the Primust app to inspect the chain. Export an Evidence Pack when another party needs the record. Run the Offline Verifier without calling Primust.</Paragraph>
        <Paragraph>Example: <code>primust verify pack.json --type pack --no-fetch-keys</code></Paragraph>
      </ProofSection>
      <ProofSection title="What the verifier proves.">
        <Paragraph>{CLAIM_BOUNDARY}</Paragraph>
      </ProofSection>
      <FinalCTA
        title="Show the chain, not just the log."
        primaryCta="Verify a sample Evidence Pack"
        primaryHref="/evidence-packs"
        secondaryCta="See Integrations"
        secondaryHref="/integrations"
      />
    </PageShell>
  );
}

function IntegrationsPage() {
  const { C } = window.PT;
  return (
    <PageShell>
      <PageHero
        eyebrow="INTEGRATIONS AND HEADLESS MODE"
        title="Use our UI, your UI, or no UI."
        subhead="Primust turns your existing controls, logs, scanners, IAM decisions, CI/CD results, approvals, and outcomes into verifier-readable evidence."
        primaryCta="See headless outputs"
        primaryHref="#outputs"
        secondaryCta="See Trust model"
        secondaryHref="/trust"
        visual={<IntegrationsHubVisual />}
      />
      <ProofSection title="Keep your stack. Make its AI work provable.">
        <Paragraph>Primust does not replace your SIEM, GRC, IAM, CI/CD, scanners, policy engines, logs, or human review. Your controls decide. Primust proves the chain.</Paragraph>
        <Paragraph>Use Primust where it helps:</Paragraph>
        <BulletList items={[
          'In the app to investigate chains',
          'In your tools to receive verification results',
          'Headless through hooks, SDKs, APIs, webhooks, PR checks, Evidence Packs, and the Offline Verifier',
        ]} />
      </ProofSection>
      <ProofSection title="Inputs to Primust." bg={C.bgAlt}>
        <Paragraph>Primust binds evidence from the systems you already use. It does not need raw governed content to do that.</Paragraph>
        <Paragraph>Inputs may include:</Paragraph>
        <BulletList items={[
          'Agent runtime event metadata',
          'Platform log pointers',
          'IAM decision metadata',
          'Scanner results',
          'CI/CD results',
          'Approval records',
          'Ticket, issue, or Scope Authorization references',
          'Business outcome references',
          'Existing logs by pointer, hash, or ID',
        ]} />
        <ClaimBoundary title="Content boundary" body="Your tools keep the raw events. Primust receives commitments, pointers, metadata, and verification results, then binds them into portable proof." />
      </ProofSection>
      <ProofSection id="outputs" title="Outputs from Primust.">
        <Paragraph>A Chain Verifier result can flow wherever your team already works.</Paragraph>
        <Paragraph>Outputs may include:</Paragraph>
        <BulletList items={[
          'SIEM event',
          'PR check',
          'CI/CD gate',
          'GRC evidence item',
          'Audit portal export',
          'Data lake event',
          'Evidence Pack',
          'Offline verifier result',
          'Webhook',
        ]} />
        <Paragraph>Where a destination is not connected directly, Primust can send verifier results via webhook, export, or Evidence Pack.</Paragraph>
      </ProofSection>
      <ProofSection title="SIEM and logs." bg={C.bgAlt} visual={<SiemEventMock />}>
        <Paragraph>Your SIEM sees events. Primust proves which events formed a governed AI action chain.</Paragraph>
        <Paragraph>A SIEM event should include verification metadata, not raw prompts, outputs, secrets, code contents, PHI, PII, or customer content.</Paragraph>
      </ProofSection>
      <ProofSection title="Workflow gates, PR gates, and CI/CD.">
        <Paragraph>For gateable workflows, Primust can publish a verifier result where the decision already happens: a PR check, CI/CD gate, approval workflow, webhook receiver, or audit export. The result shows PASS, PARTIAL, or FAIL, with Proof Mix and named gaps.</Paragraph>
        <Paragraph>The policy decision stays with your team. Primust provides the verifier-readable evidence.</Paragraph>
      </ProofSection>
      <ProofSection title="Headless mode." bg={C.bgAlt}>
        <Paragraph>Primust can run behind your existing workflow without requiring users to visit a Primust screen.</Paragraph>
        <Paragraph>Headless surfaces include:</Paragraph>
        <BulletList items={['Hooks', 'SDKs', 'APIs', 'Webhooks', 'PR checks', 'CI/CD gates', 'Evidence Packs', 'Offline Verifier']} />
      </ProofSection>
      <ProofSection title="Keep decisions where they belong.">
        <Paragraph>Primust does not authorize, enforce, scan, monitor, or review AI work for you. It binds the outputs from those systems into an evidence chain and shows whether that chain can be verified.</Paragraph>
      </ProofSection>
      <FinalCTA
        title="Send proof where your team already works."
        primaryCta="See a sample SIEM event"
        primaryHref="#outputs"
        secondaryCta="Verify an Evidence Pack"
        secondaryHref="/evidence-packs"
      />
    </PageShell>
  );
}

function EvidencePacksPage() {
  const { C } = window.PT;
  return (
    <PageShell>
      <PageHero
        eyebrow="EVIDENCE PACKS"
        title="Portable proof for auditors, customers, insurers, regulators, and counterparties."
        subhead="Export signed Evidence Packs that authorized reviewers can verify offline without calling Primust or accessing your raw content."
        primaryCta="Verify a sample Evidence Pack"
        primaryHref="#offline"
        secondaryCta="See Trust model"
        secondaryHref="/trust"
        visual={<EvidencePackCard />}
      />
      <ProofSection title="The thing you hand over.">
        <Paragraph>When someone asks what your AI actually did, you need more than a dashboard view. You need an artifact.</Paragraph>
        <Paragraph>An Evidence Pack packages signed credentials, verifier results, Proof Mix, gaps, trust roots, and scope disclosures into a portable record another party can verify offline.</Paragraph>
      </ProofSection>
      <ProofSection title="What is inside." bg={C.bgAlt}>
        <Paragraph>An Evidence Pack can include:</Paragraph>
        <BulletList items={[
          'Governed-Execution Credentials',
          'Chain verification results',
          'Scope Authorization references',
          'Control Receipts',
          'Runtime Evidence metadata',
          'Outcome Binding references',
          'Proof Mix',
          'Gaps and downgrade reasons',
          'Trust roots and signatures',
          'Offline verification instructions',
        ]} />
      </ProofSection>
      <ProofSection title="What is not inside.">
        <Paragraph>Evidence Packs should not include raw prompts, raw model outputs, code contents, secrets, PHI, PII, or customer content unless a customer explicitly chooses to disclose content in its own environment.</Paragraph>
        <Paragraph>By default, the pack carries commitments, pointers, metadata, signatures, and verifier-readable evidence.</Paragraph>
      </ProofSection>
      <ProofSection id="offline" title="Verify without calling Primust." bg={C.bgAlt}>
        <Paragraph>The Offline Verifier lets deployers, AI vendors, auditors, carriers, regulators, customers, counterparties, AppSec, and internal audit review the artifact without depending on the Primust app or API.</Paragraph>
        <Paragraph>Example: <code>primust verify pack.json --type pack --no-fetch-keys</code></Paragraph>
      </ProofSection>
      <ProofSection title="Use cases.">
        <Paragraph>Evidence Packs can support:</Paragraph>
        <BulletList items={[
          'Customer security reviews',
          'Regulated-enterprise procurement',
          'Internal audit samples',
          'AI governance reviews',
          'Coding-agent rollout approvals',
          'Carrier diligence',
          'Regulator response',
          'Board reporting',
        ]} />
      </ProofSection>
      <ProofSection title="What reviewers can rely on." bg={C.bgAlt}>
        <Paragraph>An Evidence Pack gives another party a signed, scoped, offline-verifiable record of the governed chain. It does not certify that the AI output was true, safe, lawful, compliant, or fit for purpose.</Paragraph>
      </ProofSection>
      <FinalCTA
        title="Give reviewers an artifact, not another screenshot."
        primaryCta="Verify a sample Evidence Pack"
        primaryHref="#offline"
        secondaryCta="See Chain Verifier"
        secondaryHref="/chain-verifier"
      />
    </PageShell>
  );
}

function TrustPage() {
  const { C } = window.PT;
  return (
    <PageShell>
      <PageHero
        eyebrow="TRUST AND DEPLOYMENT"
        title="Content stays with you. Proof travels."
        subhead="Primust can run cloud-hosted, headless, customer-storage-backed, or air-gapped. The verifier works the same either way."
        primaryCta="See the three-plane model"
        primaryHref="#three-plane"
        secondaryCta="See Integrations"
        secondaryHref="/integrations"
        visual={<ThreePlaneTrustVisual />}
      />
      <ProofSection id="three-plane" title="The three-plane model.">
        <Paragraph>Primust separates governed work from credential issuance and third-party reliance.</Paragraph>
        <InfoCards cards={[
          ['Execution Plane', 'Your environment. Your agents, tools, controls, logs, raw content, prompts, outputs, code, secrets, PHI, and PII stay here.'],
          ['Credential Plane', 'Primust receives commitments, pointers, metadata, and verification results. It signs and timestamps governed evidence without needing raw governed content.'],
          ['Reliance Plane', 'Auditors, customers, insurers, regulators, AppSec, and internal audit verify credentials and Evidence Packs offline.'],
        ]} />
      </ProofSection>
      <ProofSection title="The content boundary." bg={C.bgAlt}>
        <Paragraph>Primust does not need raw governed content to prove the chain. The default architecture sends commitments, pointers, metadata, and verification results, not prompt text, output text, code contents, secrets, PHI, PII, or customer content.</Paragraph>
      </ProofSection>
      <ProofSection title="Deployment modes.">
        <Paragraph>Primust can support multiple deployment shapes:</Paragraph>
        <InfoCards cards={[
          ['Primust Cloud', 'Use the app, APIs, hooks, SDKs, Evidence Packs, and Offline Verifier.'],
          ['Headless', 'Run Primust behind existing workflows through hooks, SDKs, APIs, webhooks, PR checks, and Evidence Packs.'],
          ['Customer-controlled storage', 'Keep evidence storage under customer control while issuing verifier-readable credentials.'],
          ['Air-gapped verification', 'Let a relying party verify Evidence Packs without network access to Primust.'],
        ]} />
      </ProofSection>
      <ProofSection title="Proof survives the dashboard." bg={C.bgAlt}>
        <Paragraph>The dashboard is a first-class investigation surface. It is not the only trust surface. Primust Evidence Packs can also be verified offline using pinned trust roots, signatures, timestamps, and deterministic verification.</Paragraph>
      </ProofSection>
      <ProofSection title="What the trust model proves.">
        <Paragraph>{CLAIM_BOUNDARY}</Paragraph>
      </ProofSection>
      <FinalCTA
        title="Use the dashboard. Keep the proof portable."
        primaryCta="Verify a sample Evidence Pack"
        primaryHref="/evidence-packs"
        secondaryCta="See Integrations"
        secondaryHref="/integrations"
      />
    </PageShell>
  );
}

function AppPage() {
  const { C } = window.PT;
  return (
    <PageShell>
      <PageHero
        eyebrow="THE PRIMUST APP"
        title="The command center for governed AI chains."
        subhead="Use the Primust app to investigate chains, review gaps, configure controls, export Evidence Packs, and see where verification results were sent. In production, Primust can run headless behind your existing tools."
        primaryCta="See Chain Verifier"
        primaryHref="/chain-verifier"
        secondaryCta="See Integrations"
        secondaryHref="/integrations"
        visual={<ChainDetailMock />}
      />
      <ProofSection title="The app is a first-class surface over the evidence layer.">
        <Paragraph>The Primust app helps teams see, investigate, configure, and explain governed AI chains. The same evidence layer also powers APIs, exports, Evidence Packs, and the Offline Verifier.</Paragraph>
        <Paragraph>Most teams use both headed and headless surfaces: the app for investigation and configuration, APIs and hooks for workflow integration, and Evidence Packs for third-party verification.</Paragraph>
      </ProofSection>
      <ProofSection title="Command Center." bg={C.bgAlt}>
        <Paragraph>See recent governed AI chains, PASS / PARTIAL / FAIL trends, Proof Mix, top gaps, high-risk systems, recent Evidence Packs, and export health.</Paragraph>
      </ProofSection>
      <ProofSection title="AI Agents.">
        <Paragraph>Review governed agent workflows across tools, approvals, model identity, runtime events, Control Receipts, outcome bindings, gaps, exports, and Evidence Packs.</Paragraph>
      </ProofSection>
      <ProofSection title="Chain Detail." visual={<ChainDetailMock />}>
        <Paragraph>Inspect one governed AI run from authorization to outcome. See Scope Authorization, actor and model identity, Control Receipts, Runtime Evidence, Outcome Binding, gaps, downgrade reasons, export destinations, and the offline verification command.</Paragraph>
      </ProofSection>
      <ProofSection title="Coding Agents." bg={C.bgAlt}>
        <Paragraph>Review coding-agent sessions, PR checks, shell commands, file scope, MCP/tool calls, scanner results, network egress, PR binding, CI binding, and merge-policy status.</Paragraph>
      </ProofSection>
      <ProofSection title="Controls.">
        <Paragraph>See which controls are connected, which ran, which failed, which produced verifier-readable evidence, and which only produced weak or missing evidence.</Paragraph>
      </ProofSection>
      <ProofSection title="Evidence Packs." bg={C.bgAlt}>
        <Paragraph>Generate, inspect, and export portable Evidence Packs for deployers, AI vendors, auditors, carriers, regulators, customers, counterparties, AppSec, and internal audit.</Paragraph>
      </ProofSection>
      <ProofSection title="Integrations.">
        <Paragraph>See where verification results were sent: SIEM, PR checks, CI/CD gates, webhooks, audit exports, data lakes, and Evidence Packs.</Paragraph>
      </ProofSection>
      <ProofSection title="Headed and headless by design." bg={C.bgAlt}>
        <Paragraph>The app, APIs, hooks, webhooks, PR checks, CI/CD gates, Evidence Packs, and Offline Verifier are all first-class surfaces over the same chain. Teams can use the app directly, embed results in their tools, or run Primust behind existing workflows.</Paragraph>
      </ProofSection>
      <ProofSection title="The app shows the record.">
        <Paragraph>The app does not decide whether work is allowed, whether code is correct, or whether a system is compliant. It shows the evidence chain, verifier result, Proof Mix, gaps, and export status. Your controls decide. Primust proves the chain.</Paragraph>
      </ProofSection>
      <FinalCTA
        title="See the chain from one screen."
        primaryCta="Open Chain Verifier"
        primaryHref="/chain-verifier"
        secondaryCta="See Headless Integrations"
        secondaryHref="/integrations"
      />
    </PageShell>
  );
}

function PricingPage() {
  const { C } = window.PT;
  return (
    <PageShell>
      <PageHero
        eyebrow="PRICING"
        title="Start with one governed workflow. Scale to every AI chain."
        subhead="Use per-credential pricing for self-serve and pilot usage. Use enterprise contracts for volume, deployment mode, support, BYOS, and audit/export requirements."
        primaryCta="Start with a 14-day assessment"
        primaryHref={ASSESSMENT_MAILTO}
        secondaryCta="Contact us"
        secondaryHref="mailto:hello@primust.com?subject=Primust%20pricing"
        visual={<EvidencePackCard />}
      />
      <ProofSection title="Self-serve and pilot usage.">
        <Paragraph>Start with one workflow and pay for the governed evidence you issue. Primust is designed around credentials, not seats, because the artifact matters more than the number of people who view it.</Paragraph>
        <Paragraph>For teams that want to start small, the first unit of value is the signed evidence issued for a real workflow.</Paragraph>
      </ProofSection>
      <ProofSection title="Enterprise contracts." bg={C.bgAlt}>
        <Paragraph>Enterprise contracts can cover volume, deployment mode, support, customer-controlled storage, air-gapped verification, audit exports, and Evidence Pack requirements.</Paragraph>
      </ProofSection>
      <ProofSection title="Common ways to start.">
        <Paragraph>Most teams start with one workflow, one verification surface, and one artifact they can hand to another party.</Paragraph>
        <InfoCards cards={[
          ['Agent Control Coverage Assessment', 'A 14-day assessment of one real AI-agent workflow, producing a coverage report and offline-verifiable Evidence Pack.'],
          ['AI Agent Evidence', 'Chain verification, SIEM events, workflow gates, audit exports, and Evidence Packs for governed agent workflows.'],
          ['Coding Agent Governance', 'PR checks, scanner evidence, CI/CD gates, SIEM events, and Evidence Packs for software teams using coding agents.'],
          ['Enterprise Chain Verifier', 'Cross-workflow chain verification for AI agents and consequential AI decisions.'],
          ['Evidence Pack / Audit Export', 'Portable proof for deployers, AI vendors, auditors, carriers, regulators, counterparties, and internal teams.'],
          ['Headless / BYOS / Air-Gapped', 'Deployment patterns for regulated environments and customer-controlled evidence storage.'],
        ]} />
      </ProofSection>
      <ProofSection title="Pricing follows evidence." bg={C.bgAlt}>
        <Paragraph>Primust pricing should map to evidence issued, workflows governed, deployment requirements, and support needs.</Paragraph>
      </ProofSection>
      <ProofSection title="Same proof, different scale.">
        <Paragraph>Pricing changes volume, support, deployment, storage, and export requirements. It does not change what Primust proves: the governed record from authorization to outcome.</Paragraph>
      </ProofSection>
      <FinalCTA
        title="Start small. Prove the chain."
        primaryCta="Run a 14-day assessment"
        primaryHref={ASSESSMENT_MAILTO}
        secondaryCta="Contact us"
        secondaryHref="mailto:hello@primust.com?subject=Primust%20pricing"
      />
    </PageShell>
  );
}

function CompliancePage() {
  const { C } = window.PT;
  return (
    <PageShell>
      <PageHero
        eyebrow="COMPLIANCE EVIDENCE"
        title="Map obligations to verifiable evidence."
        subhead="Primust binds governed AI work to the policies, controls, approvals, and obligation plans your team approved, then exports evidence a third party can verify."
        primaryCta="See Evidence Packs"
        primaryHref="/evidence-packs"
        secondaryCta="See Chain Verifier"
        secondaryHref="/chain-verifier"
        visual={<EvidencePackCard />}
      />
      <ProofSection title="Compliance needs evidence, not screenshots.">
        <Paragraph>Regulated AI programs are not judged only by written policies. They need evidence that controls ran, gaps were surfaced, outcomes were bound, and reviewers can verify the record.</Paragraph>
        <Paragraph>Primust turns governed AI work into verifier-readable evidence mapped to the controls and obligations your team approves.</Paragraph>
      </ProofSection>
      <ProofSection title="From obligation to evidence." bg={C.bgAlt}>
        <Paragraph>Primust can bind:</Paragraph>
        <BulletList items={[
          'Applicability and scope',
          'Approved controls',
          'Control Receipts',
          'Runtime Evidence',
          'Gaps and downgrade reasons',
          'Outcome Binding',
          'Governed-Execution Credentials',
          'Evidence Packs',
          'Offline verifier results',
        ]} />
      </ProofSection>
      <ProofSection title="For audit, risk, security, and governance teams.">
        <Paragraph>Primust helps teams answer:</Paragraph>
        <BulletList items={[
          'What AI work happened?',
          'Was it authorized?',
          'Which controls ran?',
          'What evidence was observed?',
          'What was missing?',
          'What outcome did the chain produce?',
          'Can another party verify it offline?',
        ]} />
      </ProofSection>
      <ProofSection title="Evidence for review, not a compliance stamp." bg={C.bgAlt}>
        <Paragraph>Primust does not guarantee compliance with any law, regulation, standard, contract, or internal policy. It provides signed, scoped evidence that can support governance, audit, customer assurance, insurance diligence, and regulatory review.</Paragraph>
      </ProofSection>
      <ProofSection title="What the evidence supports.">
        <Paragraph>Primust maps obligations to evidence. It does not certify the output, replace legal judgment, or guarantee the result.</Paragraph>
      </ProofSection>
      <FinalCTA
        title="Turn obligations into verifier-readable evidence."
        primaryCta="See Evidence Packs"
        primaryHref="/evidence-packs"
        secondaryCta="See Trust model"
        secondaryHref="/trust"
      />
    </PageShell>
  );
}

function ProofVsLogsPage() {
  const { C } = window.PT;
  return (
    <PageShell>
      <PageHero
        eyebrow="PROOF VS LOGS"
        title="Logs record events. Primust proves governed execution."
        subhead="Logs show events. Primust binds events, controls, gaps, outcomes, signatures, and verifier results into an evidence chain another party can verify offline."
        primaryCta="See Chain Verifier"
        primaryHref="/chain-verifier"
        secondaryCta="Verify a sample Evidence Pack"
        secondaryHref="/evidence-packs"
        visual={<IntegrationsHubVisual />}
      />
      <ProofSection title="What logs prove.">
        <Paragraph>Logs can show that an event was recorded by a system at a point in time. They are useful for operations, security monitoring, debugging, and investigations.</Paragraph>
        <Paragraph>Logs can help answer:</Paragraph>
        <BulletList items={[
          'What event was observed?',
          'Which system recorded it?',
          'When was it recorded?',
          'What metadata was attached?',
          'Which dashboard can display it?',
        ]} />
      </ProofSection>
      <ProofSection title="What logs do not prove." bg={C.bgAlt}>
        <Paragraph>Logs alone usually do not prove that a governed AI chain held from authorization to outcome.</Paragraph>
        <Paragraph>Logs may not show:</Paragraph>
        <BulletList items={[
          'Whether the work was authorized',
          'Which controls were expected',
          'Which controls actually ran',
          'Whether missing controls were noticed',
          'Whether the evidence was bound to the outcome',
          'Whether the record can be verified offline',
          'Whether another party can reproduce the verifier result',
          'Whether the record survives outside the dashboard',
        ]} />
      </ProofSection>
      <ProofSection title="What Primust adds.">
        <Paragraph>Primust binds governance-relevant evidence into a signed chain:</Paragraph>
        <BulletList items={[
          'Scope Authorization',
          'Control Receipts',
          'Runtime Evidence',
          'Outcome Binding',
          'Proof Mix',
          'Gaps and downgrade reasons',
          'Signatures and timestamps',
          'Evidence Packs',
          'Offline verification',
        ]} />
        <Paragraph>Your controls decide. Primust proves the chain.</Paragraph>
      </ProofSection>
      <ProofSection title="Logs still matter." bg={C.bgAlt}>
        <Paragraph>Primust does not replace logs. Logs remain essential for investigation, operations, security monitoring, and incident response.</Paragraph>
        <Paragraph>Primust makes the governed AI work those logs describe portable, scoped, signed, and verifier-readable.</Paragraph>
      </ProofSection>
      <ProofSection title="What proof still cannot answer.">
        <Paragraph>{CLAIM_BOUNDARY}</Paragraph>
      </ProofSection>
      <FinalCTA
        title="Do not just keep records. Produce proof."
        primaryCta="See Chain Verifier"
        primaryHref="/chain-verifier"
        secondaryCta="Verify a sample Evidence Pack"
        secondaryHref="/evidence-packs"
      />
    </PageShell>
  );
}

function ProofFooter() {
  const { C, F } = window.PT;
  const groups = [
    ['Product', [
      ['Coding Agents', '/coding-agents'],
      ['AI Agents', '/agents'],
      ['Chain Verifier', '/chain-verifier'],
      ['Integrations', '/integrations'],
      ['Evidence Packs', '/evidence-packs'],
      ['Trust', '/trust'],
      ['Pricing', '/pricing'],
    ]],
    ['More', [
      ['App', '/app'],
      ['Compliance', '/compliance'],
      ['Proof vs Logs', '/proof-vs-logs'],
      ['Docs', 'https://docs.primust.com/'],
      ['Contact', 'mailto:hello@primust.com'],
    ]],
    ['Company', [
      ['About', '/about'],
      ['Privacy', '/privacy'],
      ['Terms', '/terms'],
      ['GitHub', 'https://github.com/primust-dev'],
    ]],
  ];
  return (
    <footer style={{ background: C.darkBg, color: C.darkInk, padding: '56px 48px 34px' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(160px, 1fr))',
          gap: 30,
          paddingBottom: 34,
          borderBottom: `1px solid ${C.darkLine}`,
        }}>
          <div>
            <Logo size={26} variant="light" />
            <p style={{ margin: '18px 0 0', fontFamily: F.serif, fontSize: 18, lineHeight: 1.35, color: C.darkInk, maxWidth: 340 }}>
              When someone asks what your AI actually did, hand them proof.
            </p>
            <p style={{ margin: '14px 0 0', fontFamily: F.sans, fontSize: 13, lineHeight: 1.65, color: C.darkDim, maxWidth: 360 }}>
              Primust is the offline-verifiable evidence layer for governed AI work.
            </p>
          </div>
          {groups.map(([title, items]) => (
            <div key={title}>
              <div style={{ fontFamily: F.mono, fontSize: 11, color: C.darkDim, textTransform: 'uppercase', marginBottom: 12 }}>{title}</div>
              <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'grid', gap: 9 }}>
                {items.map(([label, href]) => {
                  const ext = /^(https?:|mailto:)/.test(href);
                  return (
                    <li key={label}>
                      <a href={SiteHref(href)} {...(ext ? { target: '_blank', rel: 'noopener' } : {})} style={{
                        fontFamily: F.sans,
                        fontSize: 13.5,
                        color: '#C9C1B3',
                        textDecoration: 'none',
                      }}>{label}</a>
                    </li>
                  );
                })}
              </ul>
            </div>
          ))}
        </div>
        <div style={{
          display: 'flex',
          justifyContent: 'space-between',
          flexWrap: 'wrap',
          gap: 12,
          paddingTop: 20,
          fontFamily: F.mono,
          fontSize: 11,
          color: C.darkDim,
        }}>
          <span>© 2026 Primust, Inc.</span>
          <span>Your controls decide. Primust proves the chain.</span>
          <a href="https://docs.primust.com/" target="_blank" rel="noopener" style={{ color: C.darkDim, textDecoration: 'none' }}>
            docs.primust.com
          </a>
        </div>
      </div>
    </footer>
  );
}

function ProofSitePage({ page }) {
  const pages = {
    home: HomePage,
    agents: AgentsPage,
    codingAgents: CodingAgentsPage,
    chainVerifier: ChainVerifierPage,
    integrations: IntegrationsPage,
    evidencePacks: EvidencePacksPage,
    trust: TrustPage,
    app: AppPage,
    pricing: PricingPage,
    compliance: CompliancePage,
    proofVsLogs: ProofVsLogsPage,
  };
  const Component = pages[page] || HomePage;
  return <Component />;
}

Object.assign(window, {
  ProofSitePage,
  HomePage,
  AgentsPage,
  CodingAgentsPage,
  ChainVerifierPage,
  IntegrationsPage,
  EvidencePacksPage,
  TrustPage,
  AppPage,
  PricingPage,
  CompliancePage,
  ProofVsLogsPage,
  ProofFooter,
});