/* Variation B — Technical / Architecture-forward
   The product IS a network proxy. Lead with the proxy diagram as the hero.
   Lighter, paper-toned, more system-y. Reads like a developer infrastructure
   page (Stripe, Vercel, Resend) — but in the Registrum palette.
*/

const VariationBBrand = () => (
  <a href="#" className="brand-lockup">
    <span className="brand-mark">
      R<span className="bm-s">/</span><span className="bm-n">001</span>
    </span>
    <span className="brand-divider"></span>
    <span className="brand-wordmark">Registrum<span className="wm-ai">AI</span></span>
  </a>
);

const VariationBNav = () => (
  <nav className="nav vb-nav">
    <div className="container">
      <VariationBBrand />
      <div className="nav-links">
        <a href="#">Product</a>
        <a href="#">Architecture</a>
        <a href="#">Policy</a>
        <a href="#">Docs</a>
        <a href="#">Pricing</a>
      </div>
      <div className="nav-cta">
        <a href="#" className="btn btn-outline-dark">Read the docs</a>
        <a href="#" className="btn btn-primary">Join launch list</a>
      </div>
    </div>
  </nav>
);

const ArchDiagram = () => (
  <div className="vb-arch">
    <div className="vb-arch-grid">
      {/* Agents column */}
      <div className="vb-arch-col">
        <div className="vb-arch-col-label">Your agent fleet</div>
        <div className="vb-arch-stack">
          <div className="vb-node agent"><span className="vb-node-dot"></span>billing-reconciler</div>
          <div className="vb-node agent"><span className="vb-node-dot"></span>support-triage</div>
          <div className="vb-node agent"><span className="vb-node-dot"></span>code-reviewer</div>
          <div className="vb-node agent shadow"><span className="vb-node-dot warn"></span>unknown-agent-04</div>
        </div>
      </div>

      {/* Proxy center */}
      <div className="vb-arch-col vb-arch-center-col">
        <div className="vb-arch-col-label muted">Network-layer proxy</div>
        <div className="vb-center">
          <div className="vb-center-head">
            <span className="brand-mark">
              R<span className="bm-s">/</span><span className="bm-n">001</span>
            </span>
            <span className="vb-center-name">Registrum<span className="vb-ai">AI</span></span>
          </div>
          <ul className="vb-center-list">
            <li><span className="vb-tick"></span>Identify</li>
            <li><span className="vb-tick"></span>Meter</li>
            <li><span className="vb-tick"></span>Govern</li>
            <li><span className="vb-tick"></span>Audit</li>
          </ul>
          <div className="vb-center-foot">
            <span><strong>&lt;5ms</strong> overhead</span>
            <span><strong>OpenAI-</strong> compatible</span>
          </div>
        </div>
      </div>

      {/* Providers column */}
      <div className="vb-arch-col">
        <div className="vb-arch-col-label">Every LLM provider</div>
        <div className="vb-arch-stack">
          <div className="vb-node provider">OpenAI</div>
          <div className="vb-node provider">Anthropic</div>
          <div className="vb-node provider">Google · Gemini</div>
          <div className="vb-node provider">Groq</div>
          <div className="vb-node provider">Mistral</div>
        </div>
      </div>
    </div>
  </div>
);

const VariationBHero = () => (
  <section className="vb-hero">
    <div className="container">
      <div className="vb-hero-grid">
        <div className="vb-hero-body">
          <span className="eyebrow">Enterprise AI agent governance</span>
          <h1 className="vb-h1">
            One endpoint.<br/>
            Every agent.<br/>
            Every provider.
          </h1>
          <p className="vb-sub">
            A drop-in OpenAI-compatible proxy that meters, governs, and audits every LLM call across OpenAI, Anthropic, Google, Groq, and Mistral. <span className="vb-emphasis">Network-layer.</span> Zero instrumentation. The agent code doesn't change.
          </p>
          <div className="vb-actions">
            <a href="#" className="btn btn-primary btn-arrow">Read the docs</a>
            <a href="#" className="btn btn-outline-dark">Join launch list</a>
          </div>
          <dl className="vb-stats">
            <div>
              <dt>&lt; 5ms</dt>
              <dd>Proxy overhead</dd>
            </div>
            <div>
              <dt>0</dt>
              <dd>SDK changes</dd>
            </div>
            <div>
              <dt>5+</dt>
              <dd>Providers covered</dd>
            </div>
            <div>
              <dt>100%</dt>
              <dd>Of LLM traffic captured</dd>
            </div>
          </dl>
        </div>
        <ArchDiagram />
      </div>
    </div>
  </section>
);

const VariationBProblem = () => (
  <section className="vb-problem">
    <div className="container">
      <div className="vb-problem-grid">
        <div>
          <span className="eyebrow">The problem</span>
          <h2 className="vb-h2">
            Enterprises are deploying AI agents faster than they can govern them.
          </h2>
        </div>
        <div className="vb-problem-body">
          <p className="vb-problem-lede">
            Engineering teams, vendor integrations, contractors, and shadow IT are all spinning up agents that call expensive, powerful AI APIs — without procurement approval, cost visibility, security review, or audit trail.
          </p>
          <p>
            CASB tools can block <code>api.openai.com</code> entirely, but can't allow <code>gpt-4o-mini</code> while denying <code>gpt-4o</code>. Hyperscaler cost dashboards see only their own provider. Developer SDKs only capture what someone remembered to instrument.
          </p>
          <p className="vb-problem-conclusion">
            Registrum<span style={{color:'var(--green)'}}>AI</span> is purpose-built for the gap — at the network layer, where every call is visible whether the developer cooperated or not.
          </p>
        </div>
      </div>
    </div>
  </section>
);

const VariationBHow = () => (
  <section className="vb-how">
    <div className="container">
      <div className="vb-how-head">
        <span className="eyebrow">How it works</span>
        <h2 className="vb-h2">Three steps. One afternoon.</h2>
      </div>
      <ol className="vb-how-steps">
        <li>
          <div className="vb-step-num">01</div>
          <h3>Point your agents at the proxy.</h3>
          <p>Change one base URL in your LLM SDK. No code modifications, no library install, no developer mobilization. Any OpenAI-compatible client works on day one.</p>
          <pre className="vb-step-code">{`base_url="https://gw.registrum.ai/v1"`}</pre>
        </li>
        <li>
          <div className="vb-step-num">02</div>
          <h3>Define identity, policy, and pricing.</h3>
          <p>Agents are fingerprinted from their API key. Apply model allowlists, data residency rules, DLP, and budget caps. Load your contracted rates into the pricing catalog.</p>
          <pre className="vb-step-code">{`policy: { models: ["gpt-4o-mini"], regions: ["us-east"] }`}</pre>
        </li>
        <li>
          <div className="vb-step-num">03</div>
          <h3>Watch the ledger fill in real time.</h3>
          <p>Every call: agent, model, tokens, cost, disposition. Stream to your SIEM. Export evidence packs for SOC 2, ISO 27001, HIPAA, and the EU AI Act. Hand the report to your auditor.</p>
          <pre className="vb-step-code">{`GET /v1/audit?since=24h → 1,284,011 records`}</pre>
        </li>
      </ol>
    </div>
  </section>
);

const VariationBFeatures = () => {
  const rows = [
    {
      tag: 'Discovery & inventory',
      t: 'See every agent the moment it makes its first call.',
      bullets: [
        'API-key fingerprinting names agents without tagging',
        'Shadow AI flagged from first request — no quarterly audit',
        'Lifecycle: provision · monitor · suspend · deprovision',
        'Inventory exports auditors and regulators ask for',
      ],
    },
    {
      tag: 'Cost metering & budgets',
      t: 'Real-time spend, attributed to a cost center, at your contracted rates.',
      bullets: [
        'Customer-owned pricing catalog (your negotiated rates)',
        'Per-agent and per-department budget caps, enforced at proxy',
        'Forecasting and anomaly detection on consumption patterns',
        'Chargeback reports in Finance-compatible CSV',
      ],
    },
    {
      tag: 'Policy engine',
      t: 'Enforcement, not observation. Decisions before the call leaves.',
      bullets: [
        'Model allow/blocklists per agent or department',
        'Data residency routing — EU stays EU, HIPAA stays BAA',
        'DLP for PII, secrets, source code, prompt injection',
        'Rate limits, time-of-day controls, approval workflows',
      ],
    },
    {
      tag: 'Audit & compliance',
      t: 'A tamper-evident ledger of every call your fleet has ever made.',
      bullets: [
        'Hash-chained, append-only audit trail',
        'Optional full prompt / response capture with PII masking',
        'Evidence packs: SOC 2, ISO 27001, HIPAA, GDPR, EU AI Act',
        'SIEM-native export (CEF/LEEF, Splunk, Sentinel, Datadog)',
      ],
    },
  ];
  return (
    <section className="vb-features">
      <div className="container">
        <div className="vb-features-head">
          <span className="eyebrow">What it does</span>
          <h2 className="vb-h2">Four control surfaces, one proxy.</h2>
        </div>
        <div className="vb-feat-grid">
          {rows.map((r, i) => (
            <article className="vb-feat" key={i}>
              <div className="vb-feat-tag">{r.tag}</div>
              <h3>{r.t}</h3>
              <ul>
                {r.bullets.map((b, j) => <li key={j}>{b}</li>)}
              </ul>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
};

const VariationBFooter = () => (
  <footer className="vb-footer">
    <div className="container">
      <div className="vb-footer-grid">
        <div>
          <VariationBBrand />
          <p className="vb-footer-tag">The network-layer control plane for enterprise AI agents.</p>
        </div>
        <div className="vb-footer-cols">
          <div>
            <h4>Product</h4>
            <ul><li>Architecture</li><li>Policy engine</li><li>Audit & compliance</li><li>Pricing catalog</li></ul>
          </div>
          <div>
            <h4>Developers</h4>
            <ul><li>Docs</li><li>API reference</li><li>Terraform provider</li><li>Status</li></ul>
          </div>
          <div>
            <h4>Company</h4>
            <ul><li>Trust center</li><li>Security</li><li>Contact</li><li>Careers</li></ul>
          </div>
        </div>
      </div>
      <div className="vb-footer-meta">
        <span>© 2026 Registrum, Inc.</span>
        <span className="vb-family">
          <span className="bc-mark">R<span className="s">/</span><span className="n">001</span></span>
          <span className="bc-sep">·</span>
          The registrar
          <span className="bc-status">live</span>
        </span>
        <span className="mono">v0.4.1-beta · gw.registrum.ai</span>
      </div>
    </div>
  </footer>
);

function VariationB() {
  return (
    <div className="lp variation-b">
      <VariationBNav />
      <VariationBHero />
      <VariationBProblem />
      <VariationBHow />
      <VariationBFeatures />
      <VariationBFooter />
    </div>
  );
}

window.VariationB = VariationB;
window.ArchDiagram = ArchDiagram;