/* Variation A — v2 · Cost-control re-frame
   Same editorial/institutional system as v1, but the MESSAGE leads with
   spend control instead of audit. Audit is demoted to "the proof", not
   the pitch. Plain-language pass: heavy acronyms pushed down into the
   role briefs. New "dispatch" band under the hero carries the reported
   half-a-billion-dollar month + the on-record Microsoft/Uber corroboration.
*/

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 VABrand = ({ 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 VANav = () => {
  const style = useBodyAttr('navStyle', 'sticky');
  const [open, setOpen] = React.useState(false);

  React.useEffect(() => {
    if (!open) return;
    const onResize = () => { if (window.innerWidth > 1180) setOpen(false); };
    window.addEventListener('resize', onResize);
    return () => window.removeEventListener('resize', onResize);
  }, [open]);

  const links = [
    { href: '#governance', label: 'The Problem' },
    { href: '#how',        label: 'How it Works' },
    { href: '#product',    label: 'What it Does' },
    { href: '#compliance', label: 'Who Signs Off' },
  ];

  return (
    <nav className="nav dark" data-nav-style={style} data-menu-open={open ? 'true' : 'false'}>
      <div className="container">
        <VABrand 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 HERO_SUBS = {
  finance: <>Registrum<span style={{ color: 'var(--green-bright)' }}>AI</span> sits between your AI agents and every provider &mdash; metering every dollar as it&rsquo;s spent and enforcing hard budget ceilings <em>before</em> the money goes out the door. <strong>Forecast AI spend the way you already forecast cloud.</strong></>,
  security: <>Registrum<span style={{ color: 'var(--green-bright)' }}>AI</span> sits between your AI agents and every provider &mdash; recording every call in a tamper-evident log <em>your</em> team controls, with policy enforced at the boundary. <strong>Prove what every agent did, with evidence you own.</strong></>,
  procurement: <>Registrum<span style={{ color: 'var(--green-bright)' }}>AI</span> sits between your AI agents and every provider &mdash; giving you buyer-side numbers to reconcile against the vendor invoice, line by line. <strong>Walk into every renewal with your meter, not theirs.</strong></>,
};
const HERO_SEGMENTS = [
  { id: 'finance', label: 'Finance' },
  { id: 'security', label: 'Security' },
  { id: 'procurement', label: 'Procurement' },
];
const HERO_EYEBROW = {
  finance: 'Enterprise AI Spend Control',
  security: 'Enterprise AI Security Control',
  procurement: 'Enterprise AI Procurement Control',
};

const VAHero = () => {
  const headline = useBodyAttr('heroHeadline', 'spend-asleep');
  const heroMode = useBodyAttr('heroMode', 'segmented');
  const [seg, setSeg] = React.useState('finance');
  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>
            <span className="va-eyebrow-text" key={heroMode === 'segmented' ? seg : 'single'}>
              {heroMode === 'segmented' ? HERO_EYEBROW[seg] : 'Enterprise AI Spend Control'}
            </span>
          </div>
          <h1 className="va-h1" data-headline={headline}>
            {headline === 'meter-valve' ? <>The meter — and the<br /><span className="va-accent">shut-off valve</span><br />for enterprise AI.</> :
              headline === 'no-surprise' ? <>Never be surprised<br />by an AI bill<br /><span className="va-accent">again.</span></> :
              <>Your agents can spend<br />real money<br /><span className="va-accent">while you sleep.</span></>}
          </h1>
          {heroMode === 'segmented' ? (
            <div className="va-hero-seg">
              <span className="va-seg-lead">One meter &mdash; for the desk you sit at:</span>
              <div className="va-seg-control" role="tablist" aria-label="Tailor the message to your role">
                {HERO_SEGMENTS.map((s) => (
                  <button
                    key={s.id}
                    role="tab"
                    aria-selected={seg === s.id}
                    className={'va-seg-tab' + (seg === s.id ? ' is-active' : '')}
                    onClick={() => setSeg(s.id)}
                  >
                    {s.label}
                  </button>
                ))}
              </div>
            </div>
          ) : null}
          <p className="va-sub" key={heroMode === 'segmented' ? seg : 'single'}>
            {heroMode === 'segmented'
              ? HERO_SUBS[seg]
              : <>Registrum<span style={{ color: 'var(--green-bright)' }}>AI</span> sits between your AI agents and every provider — metering every dollar as it&rsquo;s spent and enforcing hard budget ceilings <em>before</em> the money goes out the door. One set of numbers your finance, security, and procurement teams all trust. No code changes. Live in an afternoon.</>}
          </p>
          <div className="va-actions">
            <a href="#compliance" className="btn btn-primary btn-arrow">See how it works</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 meter, 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">02 · 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 roadmap</span>
          <span><span className="check">✓</span> EU AI Act aligned</span>
        </div>
      </div>
    </div>
  </section>);
};


/* ── NEW · § 00 · The dispatch band ──────────────────────────────
   The emotional on-ramp the v1 page lacked. The reported $500M month,
   framed as reporting (not asserted fact), with the on-record
   Microsoft/Uber stories carrying the credibility. */
const VADispatch = () =>
<section className="va-dispatch" id="dispatch">
    <div className="container">
      <div className="va-dispatch-row">
        <div className="va-dispatch-figure">
          <div className="va-dispatch-tag">Dispatch · from the trade press, May–June 2026</div>
          <div className="va-dispatch-number">
            <span className="va-dispatch-cur">$</span>500<span className="va-dispatch-unit">,000,000</span>
          </div>
          <p className="va-dispatch-cap">
            Run up by a single enterprise on AI in <strong>one month</strong> — because
            no one set a usage limit. Reported by Axios; figure attributed to an
            unnamed consultant&rsquo;s client and not publicly confirmed.
          </p>
        </div>
        <div className="va-dispatch-body">
          <p className="va-dispatch-kicker">
            Agentic AI doesn&rsquo;t bill like software. It bills like the electric
            company — and most enterprises have no meter on the wall.
          </p>
          <ul className="va-dispatch-facts">
            <li>
              <span className="va-fact-k">On the record</span>
              <span className="va-fact-v"><strong>Microsoft</strong> is cutting internal AI-coding licenses as token costs climb.</span>
            </li>
            <li>
              <span className="va-fact-k">On the record</span>
              <span className="va-fact-v"><strong>Uber</strong> exhausted its full 2026 AI budget by April.</span>
            </li>
            <li>
              <span className="va-fact-k">The pattern</span>
              <span className="va-fact-v">An autonomous agent can run a chained loop overnight — and finance finds out at invoice time.</span>
            </li>
          </ul>
          <div className="va-dispatch-src">$500M figure: <strong>Axios</strong>, May 28 2026 (attributed to an unnamed consultant&rsquo;s client; unconfirmed) · Microsoft license cuts: <strong>The Verge</strong> · Uber budget: COO Andrew MacDonald, on the record</div>
        </div>
      </div>
    </div>
  </section>;


/* ── § 01 · recast as FINANCE's questions, cost-led ── */
const VAProblem = () =>
<section className="va-problem" id="governance">
    <div className="container">
      <div className="section-eyebrow-row">
        <span className="eyebrow">§ 01 · The control gap</span>
        <span className="rule"></span>
      </div>
      <h2 className="va-h2">Four questions finance can&rsquo;t answer<br />about what AI is spending.</h2>
      <p className="va-lede">AI agents are running code, processing invoices, and making decisions across your company — and each one is quietly spending money. When finance asks what it costs and who approved it, most teams go quiet.</p>
      <div className="va-q-grid">
        {[
      ['01', 'What will it cost this month?', 'Real-time metering of every agent and every call, in dollars — not a surprise invoice at month-end. Forecast AI spend the way you already forecast cloud.'],
      ['02', 'Who authorized this spend?', 'Every dollar attributed to a team, a workflow, and an owner. Spend maps to a budget someone approved — or it doesn\u2019t run at all.'],
      ['03', 'What\u2019s the ceiling — and what happens at it?', 'Hard budget caps enforced at the gateway. When an agent hits its limit, the call stops — not an email that lands after the money is already gone.'],
      ['04', 'Can you prove it after the fact?', 'A complete, tamper-evident record of every call for finance, audit, and the renewal conversation. The audit trail is the proof. Control is the point.']].
      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 VAHow = () =>
<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 meter<br />between your agents<br />and every provider.</h2>
          <ol className="va-steps">
            <li>
              <span className="step-n">01</span>
              <div>
                <h4>Point your agents at one address.</h4>
                <p>Change a single setting — a base URL. No new code, no libraries, no engineering project. Any agent that talks to OpenAI already talks to Registrum.</p>
              </div>
            </li>
            <li>
              <span className="step-n">02</span>
              <div>
                <h4>Price and check every call as it happens.</h4>
                <p>Registrum names the agent, prices the tokens at your real contracted rates, and checks the spend against your budget and policy — before the call ever leaves your network.</p>
              </div>
            </li>
            <li>
              <span className="step-n">03</span>
              <div>
                <h4>Reconcile every dollar.</h4>
                <p>An itemized, tamper-evident ledger of every call — agent, model, tokens, cost. Match it against the vendor&rsquo;s invoice and walk into the renewal with your own numbers.</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 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 metered.</span>
<span class="cmt"># Cost priced. Budget checked. Spend logged.</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> added per call</span>
            <span><strong>Zero</strong> code changes to the agent</span>
          </div>
        </aside>
      </div>
    </div>
  </section>;


const VAFeatures = () => {
  const features = [
  { tag: 'Metering', t: 'Real-time cost meter', d: 'Every token and every agent action, priced in dollars at your contracted rates as it happens — not a surprise at month-end.' },
  { tag: 'Budget control', t: 'Hard spending ceilings', d: 'Set a limit per team, workflow, or agent. When it\u2019s reached, the spend stops — enforcement, not an after-the-fact alert.' },
  { tag: 'Discovery', t: 'Find every agent', d: 'Every unapproved or forgotten agent on your network appears from its first call — including the ones quietly running up a bill.' },
  { tag: 'Policy', t: 'Rules before money moves', d: 'Approved-model lists, data-residency, rate limits, and content checks — applied at the gateway before a call, and a dollar, leaves your network.' },
  { tag: 'Reconciliation', t: 'Your numbers vs. theirs', d: 'Match every charge against the vendor invoice. Dispute the variance with evidence, and renew with your own meter on the table.' },
  { tag: 'Audit', t: 'Tamper-evident record', d: 'A complete, signed log of every call — ready for security, compliance, and the EU AI Act when they come asking.' }];

  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 meter. 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 VABuyers = () => {
  const buyers = [
  {
    role: 'CFO', mark: 'F', label: 'CFO / Finance',
    h: 'Forecast AI spend the way you forecast cloud.',
    p: 'Your own meter — not the vendor\u2019s invoice. Every token and every agent action, classified and checked against the budget you approved.',
    proofs: [
    'Per-call cost in real time, by team and workflow',
    'Hard budget ceilings that stop spend — not just alert',
    'Vendor-invoice reconciliation: variance, not vibes',
    'Forecasts finance can take to the board'],
    cta: 'Get the CFO brief', rid: 'brief_cfo',
    doc: 'briefs/cfo-brief.html'
  },
  {
    role: 'CISO', mark: 'S', label: 'CISO / Head of Security',
    h: 'Prove what every agent did — with evidence you own.',
    p: 'A tamper-evident record of every call, with the keys your team holds — not keys your AI vendor manages.',
    proofs: [
    'Your keys, your audit trail',
    'Policy enforced at the call boundary',
    'Tamper-evident logs you control',
    'Mapped to SOC 2, ISO 27001, and the EU AI Act'],
    cta: 'Get the CISO brief', rid: 'brief_ciso',
    doc: 'briefs/ciso-brief.html'
  },
  {
    role: 'PROC', mark: 'P', label: 'Procurement / Vendor Management',
    h: 'Walk into the renewal with your meter, not theirs.',
    p: 'Buyer-side evidence built for the renewal table — exportable, vendor-reconciled, with the contract language to match.',
    proofs: [
    'Renewal cost report, procurement-ready',
    'Vendor agent-licensing checklist',
    'Contract-clause library: meter, audit, dispute',
    'Leverage at renewal, not surprises'],
    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 needs sign-off from finance, security, and procurement. Each one gets the evidence they need to approve — and to stay approved at renewal. Cost leads; the rest follows.</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 VAFooter = () =>
<footer className="va-footer" id="docs">
    <div className="container">
      <div className="va-footer-row">
        <VABrand inv />
        <p className="va-footer-tag">The meter of record for enterprise AI spend.</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 VariationAV2() {
  return (
    <div className="lp variation-a">
      <VANav />
      <VAHero />
      <VADispatch />
      <VAProblem />
      <VAHow />
      <VAFeatures />
      <VABuyers />
      <VAFooter />
    </div>);
}

window.VariationAV2 = VariationAV2;