/* Variation A — Editorial / Institutional
   Inspired by FT / Bloomberg infra-vendor pages. Dark navy hero,
   restrained typography, left-aligned with side meta. The auditor
   reads this and feels like a serious counterparty.
*/

// Reads a body data-* attribute and re-renders when Tweaks change it.
// Falls back to `def` if unset. Used so the same components work both
// inside the Landing Page.html compare shell and the standalone single-page.
const useBodyAttr = (key, def) => {
  const read = () => typeof document !== 'undefined' && document.body.dataset[key] || def;
  const [v, setV] = React.useState(read);
  React.useEffect(() => {
    const sync = () => setV(read());
    sync();
    window.addEventListener('tweakchange', sync);
    return () => window.removeEventListener('tweakchange', sync);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [key, def]);
  return v;
};

const VariationABrand = ({ inv }) =>
<a href="#" className={"brand-lockup" + (inv ? " inv" : "")}>
    <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 VariationANav = () => {
  const style = useBodyAttr('navStyle', 'solid');
  const [open, setOpen] = React.useState(false);

  // Close the menu after navigating, and whenever the viewport grows back to desktop.
  React.useEffect(() => {
    if (!open) return;
    const onResize = () => { if (window.innerWidth > 760) setOpen(false); };
    window.addEventListener('resize', onResize);
    return () => window.removeEventListener('resize', onResize);
  }, [open]);

  const links = [
    { href: '#governance', label: 'The Gap' },
    { href: '#how',        label: 'How it Works' },
    { href: '#product',    label: 'What it Does' },
    { href: '#compliance', label: 'Learn More' },
  ];

  return (
    <nav className="nav dark" data-nav-style={style} data-menu-open={open ? 'true' : 'false'}>
      <div className="container">
        <VariationABrand inv />
        <div className="nav-links">
          {links.map((l) => <a key={l.href} href={l.href}>{l.label}</a>)}
        </div>
        <div className="nav-cta">
          <a href="#compliance" className="btn btn-outline-light" style={{ color: "rgb(255, 255, 255)" }}>Read the docs</a>
          <a href="mailto:sales@registrum.ai?subject=RegistrumAI%20launch%20list" className="btn btn-primary" style={{ color: "rgb(255, 255, 255)" }}>Join launch list</a>
        </div>
        <button
          className="nav-burger"
          aria-label={open ? 'Close menu' : 'Open menu'}
          aria-expanded={open}
          onClick={() => setOpen((v) => !v)}
        >
          <span></span><span></span><span></span>
        </button>
      </div>

      <div className="nav-mobile-panel" hidden={!open}>
        {links.map((l) => (
          <a key={l.href} href={l.href} onClick={() => setOpen(false)}>{l.label}</a>
        ))}
        <div className="nav-mobile-cta">
          <a href="#compliance" className="btn btn-outline-light" style={{ color: "#fff" }} onClick={() => setOpen(false)}>Read the docs</a>
          <a href="mailto:sales@registrum.ai?subject=RegistrumAI%20launch%20list" className="btn btn-primary" style={{ color: "#fff" }} onClick={() => setOpen(false)}>Join launch list</a>
        </div>
      </div>
    </nav>);
};


const VariationAHero = () => {
  const headline = useBodyAttr('heroHeadline', 'every-call');
  return (
    <section className="va-hero">
      <div className="container">
      <div className="va-hero-grid">
        <div className="va-hero-body">
          <div className="va-eyebrow">
            <span className="dot"></span>
            Enterprise AI Agent Governance
          </div>
          <h1 className="va-h1" data-headline={headline}>
            {headline === 'three-signatures' ? <>Three signatures,<br /><span className="va-accent">one ledger.</span></> :
              headline === 'govern-audit' ? <>Govern every agent.<br /><span className="va-accent">Audit every call.</span></> :
              <>Every agent.<br />Every call.<br /><span className="va-accent">On the record.</span></>}
          </h1>
          <p className="va-sub">
            Registrum<span style={{ color: 'var(--green-bright)' }}>AI</span> is the governance plane between your AI agents and every LLM provider — real-time policy enforcement, a cryptographic audit trail, and buyer-side cost controls, in one drop-in layer your CISO, CFO, and Procurement team can all approve.  No SDK. No instrumentation. Sub-5ms.
          </p>
          <div className="va-actions">
            <a href="#compliance" className="btn btn-primary btn-arrow">Read the docs</a>
            <a href="mailto:sales@registrum.ai?subject=RegistrumAI%20launch%20list" className="btn btn-outline-light">Join launch list</a>
          </div>
        </div>
        <div className="va-hero-figure variation-b">
          <div className="va-figure-label">The proxy, end to end</div>
          {window.ArchDiagram ? <window.ArchDiagram /> : null}
        </div>
      </div>
      <div className="va-hero-foot">
        <div className="va-foot-meta">
          <div className="va-foot-cell">
            <span className="va-foot-k">Issue</span>
            <span className="va-foot-v">01 · Q3 2026</span>
          </div>
          <div className="va-foot-cell">
            <span className="va-foot-k">Status</span>
            <span className="va-foot-v"><span className="dot"></span> Private beta</span>
          </div>
          <div className="va-foot-cell">
            <span className="va-foot-k">Coverage</span>
            <span className="va-foot-v">OpenAI · Anthropic · Google · Groq · Mistral</span>
          </div>
          <div className="va-foot-cell">
            <span className="va-foot-k">Deployment</span>
            <span className="va-foot-v">Self-hosted · SaaS</span>
          </div>
        </div>
        <div className="va-trust">
          <span><span className="check">✓</span> SOC 2 in progress</span>
          <span><span className="check">✓</span> ISO 27001 roadmap</span>
          <span><span className="check">✓</span> HIPAA-ready</span>
          <span><span className="check">✓</span> EU AI Act aligned</span>
        </div>
      </div>
    </div>
  </section>);

};


const VariationAProblem = () =>
<section className="va-problem" id="governance">
    <div className="container">
      <div className="section-eyebrow-row">
        <span className="eyebrow">§ 01 · The governance gap</span>
        <span className="rule"></span>
      </div>
      <h2 className="va-h2">Your auditors will ask four questions.<br />Most enterprises can't answer them.</h2>
      <p className="va-lede">AI agents are writing code, processing invoices, and routing customer decisions across your organization. Security, finance, and compliance are forming their questions now.</p>
      <div className="va-q-grid">
        {[
      ['01', 'What agents exist?', 'Discover and inventory every AI agent operating in your network — including the ones you don\'t know about. Shadow AI surfaces in minutes, not quarterly audits.'],
      ['02', 'What are they spending?', 'Real-time cost metering at the token level, attributed to a cost center. Chargeback reports use your contracted rates, not published rack pricing.'],
      ['03', 'Are they authorized?', 'Policies enforced at the proxy layer — model allowlists, data residency, DLP, rate limits. The auditor sees the policy and the log of every disposition.'],
      ['04', 'What did they do?', 'A tamper-evident, hash-chained audit trail of every call. Full prompt and response capture available with PII masking and retention controls.']].
      map(([n, t, b]) =>
      <article className="va-q" key={n}>
            <div className="va-q-num">Q.{n}</div>
            <h3>{t}</h3>
            <p>{b}</p>
          </article>
      )}
      </div>
    </div>
  </section>;


const VariationAHow = () =>
<section className="va-how" id="how">
    <div className="container">
      <div className="section-eyebrow-row">
        <span className="eyebrow">§ 02 · How it works</span>
        <span className="rule"></span>
      </div>
      <div className="va-how-grid">
        <div>
          <h2 className="va-h2">A drop-in proxy<br />between your agents<br />and every LLM.</h2>
          <ol className="va-steps">
            <li>
              <span className="step-n">01</span>
              <div>
                <h4>Point your agents at one endpoint.</h4>
                <p>Change a base URL. No SDK, no library, no code modifications. Any agent that speaks OpenAI speaks Registrum.</p>
              </div>
            </li>
            <li>
              <span className="step-n">02</span>
              <div>
                <h4>Identify, price, and govern every call.</h4>
                <p>API key fingerprinting names the agent. Your contracted rates price the tokens. Your policy decides whether to forward, block, or redact — before the call leaves your network.</p>
              </div>
            </li>
            <li>
              <span className="step-n">03</span>
              <div>
                <h4>Hand the auditor the ledger.</h4>
                <p>An immutable, hash-chained log of every call — agent, model, tokens, cost, disposition. Pre-built evidence packs for SOC 2, ISO 27001, HIPAA, and the EU AI Act.</p>
              </div>
            </li>
          </ol>
        </div>
        <aside className="va-code">
          <div className="va-code-head">
            <span className="dots"><i></i><i></i><i></i></span>
            <span className="va-code-title">agent.py · drop-in</span>
          </div>
          <pre className="va-code-body" dangerouslySetInnerHTML={{ __html: `<span class="cmt"># One-line drop-in. Your existing OpenAI code, unchanged.</span>
<span class="kw">from</span> openai <span class="kw">import</span> <span class="fn">OpenAI</span>
<span class="kw">import</span> os

client = <span class="fn">OpenAI</span>(
    <span class="mu">base_url</span>=<span class="str">"https://gateway.registrum.ai/v1"</span>,
    <span class="mu">api_key</span>=os.<span class="fn">environ</span>[<span class="str">"REGISTRUM_KEY"</span>],
)

<span class="cmt"># Every call is now governed.</span>
<span class="cmt"># Policy enforced. Audit signed. Cost metered.</span>
client.chat.completions.<span class="fn">create</span>(
    <span class="mu">model</span>=<span class="str">"gpt-4o"</span>,
    <span class="mu">messages</span>=[{<span class="str">"role"</span>: <span class="str">"user"</span>, <span class="str">"content"</span>: <span class="str">"…"</span>}],
)` }} />
          <div className="va-code-foot">
            <span><strong>Sub-5ms</strong> proxy overhead</span>
            <span><strong>Zero</strong> code changes to the agent</span>
          </div>
        </aside>
      </div>
    </div>
  </section>;


const VariationAFeatures = () => {
  const features = [
  { tag: 'Discovery', t: 'Shadow AI surfacing', d: 'Every unregistered agent on your network appears in the fleet view from its first call, with full history and attribution.' },
  { tag: 'Metering', t: 'Contracted-rate pricing', d: 'A customer-owned pricing catalog using your negotiated rates. Token-level cost attribution to agent, team, and cost center.' },
  { tag: 'Policy', t: 'Pre-execution enforcement', d: 'Model allowlists, data residency, DLP, rate limits, time-of-day controls — applied at the proxy before the call leaves the network.' },
  { tag: 'Audit', t: 'Hash-chained ledger', d: 'A tamper-evident record of every call. Optional full prompt/response capture with PII masking and retention policies.' },
  { tag: 'Security', t: 'DLP & secret detection', d: 'Outbound prompts inspected for PII, source code, credentials, and prompt-injection patterns. Block, redact, or alert per policy.' },
  { tag: 'Platform', t: 'GitOps-native', d: 'Terraform provider, REST API, CI/CD gates, SIEM and SOAR integrations. Agent governance ships in the same PR as the agent.' }];

  return (
    <section className="va-features" id="product">
      <div className="container">
        <div className="section-eyebrow-row">
          <span className="eyebrow">§ 03 · What it does</span>
          <span className="rule"></span>
        </div>
        <h2 className="va-h2" style={{ marginBottom: 56 }}>One control plane. Six surfaces.</h2>
        <div className="va-feat-grid">
          {features.map((f, i) =>
          <article className="va-feat" key={i}>
              <div className="va-feat-tag">{f.tag}</div>
              <h3>{f.t}</h3>
              <p>{f.d}</p>
            </article>
          )}
        </div>
      </div>
    </section>);

};

const VariationABuyers = () => {
  const buyers = [
  {
    role: 'CISO', mark: 'S', label: 'CISO / Head of Security',
    h: 'Prove to your auditor — not your vendor — what every agent did.',
    p: 'Tamper-evident audit evidence your security team can own, with keys you hold — not keys your LLM vendor manages.',
    proofs: [
    'BYOK: your keys, your audit chain',
    'OPA-enforced policy at the call boundary',
    'Tamper-evident HMAC manifests, buyer-side',
    'Pre-mapped to SOC 2, ISO 27001, EU AI Act'],

    cta: 'Get the CISO brief', rid: 'brief_ciso',
    doc: 'briefs/ciso-brief.html'
  },
  {
    role: 'CFO', mark: 'F', label: 'CFO / FinOps',
    h: 'Forecast agent spend the way you forecast cloud spend.',
    p: 'Your own meter — not the vendor\'s invoice. Every LLM token and outbound action, classified and reconciled against your approved budgets.',
    proofs: [
    'Per-call telemetry: LLM tokens and tool actions',
    'Vendor-meter reconciliation — variance, not vibes',
    'Cost envelopes by team, workflow, agent identity',
    'Hard budget ceilings with enforcement, not alerts'],

    cta: 'Get the CFO brief', rid: 'brief_cfo',
    doc: 'briefs/cfo-brief.html'
  },
  {
    role: 'PROC', mark: 'P', label: 'Procurement / Vendor Management',
    h: 'Walk into the renewal with your meter, not theirs.',
    p: 'Buyer-side evidence designed to sit on the table at the renewal meeting — exportable, vendor-reconciled, with a contract-clause library to match.',
    proofs: [
    'Renewal Cost-Envelope Report, procurement-ready',
    'Vendor Agent Licensing Audit Checklist',
    'Contract-clause library: meter, audit, dispute',
    'Complementary to vendor agents — leverage, not conflict'],

    cta: 'Get the Procurement brief', rid: 'brief_proc',
    doc: 'briefs/procurement-brief.html'
  }];

  return (
    <section className="va-buyers" id="compliance">
      <div className="container">
        <div className="section-eyebrow-row">
          <span className="eyebrow">§ 04 · Three signatures</span>
          <span className="rule"></span>
        </div>
        <h2 className="va-h2">Built for everyone who has to say yes.</h2>
        <p className="va-lede">Enterprise AI deployment requires sign-off from security, finance, and procurement. Each stakeholder gets the evidence they need to approve — and to stay approved at renewal.</p>
        <div className="va-buyer-grid">
          {buyers.map((b) =>
          <article className="va-buyer" key={b.role}>
              <header className="va-buyer-head">
                <span className="va-buyer-mark">{b.mark}</span>
                <div className="va-buyer-id">
                  <span className="va-buyer-role">{b.role}</span>
                  <span className="va-buyer-label">{b.label}</span>
                </div>
              </header>
              <h3 className="va-buyer-h">{b.h}</h3>
              <p className="va-buyer-p">{b.p}</p>
              <ul className="va-buyer-proofs">
                {b.proofs.map((pr, i) => <li key={i}><span className="va-buyer-check">✓</span>{pr}</li>)}
              </ul>
              <a href={(typeof window !== 'undefined' && window.__resources && window.__resources[b.rid]) || b.doc} target="_blank" rel="noopener" className="va-buyer-link">{b.cta} <span>→</span></a>
            </article>
          )}
        </div>
      </div>
    </section>);

};

const VariationAFooter = () =>
<footer className="va-footer" id="docs">
    <div className="container">
      <div className="va-footer-row">
        <VariationABrand inv />
        <p className="va-footer-tag">The registry of record for enterprise AI agents.</p>
      </div>
      <div className="va-footer-meta">
        <span>© 2026 Registrum, Inc.</span>
        <span>Privacy</span>
        <span>Security</span>
        <span>Trust</span>
      </div>
    </div>
  </footer>;


function VariationA() {
  return (
    <div className="lp variation-a">
      <VariationANav />
      <VariationAHero />
      <VariationAProblem />
      <VariationAHow />
      <VariationAFeatures />
      <VariationABuyers />
      <VariationAFooter />
    </div>);

}

window.VariationA = VariationA;