/* aevion.ai — nav, proof-packet hero, gate status cards */
const { useState, useEffect, useRef } = React;
const AevDS = window.AevionDesignSystem_a984fb;

function SiteNav() {
  const { StatusGlow } = AevDS;
  const [audio, setAudio] = useState(false);
  function toggleAudio() {
    const v = !audio;
    setAudio(v);
    window.AevSound.enabled = v;
    if (v) { window.AevSound.blip(880, 0.1); }
  }
  return (
    <nav className="site-nav">
      <span className="nav-brand">
        <img src="../../assets/logos/aevion-mark.png" alt="" />
        AEVION
      </span>
      <StatusGlow state="nominal" detail="0 variance halts · 24h" pulse={true}></StatusGlow>
      <div className="nav-links">
        <a href="#receipts">Receipts</a>
        <a href="#verify">Verify</a>
        <a href="#city">Proof City</a>
        <a href="#firewall">Claim Firewall</a>
        <button className="aui-btn aui-btn-ghost" style={{ padding: '7px 12px' }} onClick={toggleAudio} aria-pressed={audio}>AUDIO {audio ? 'ON' : 'OFF'}</button>
        <a className="aui-btn aui-btn-primary" href="#verify" style={{ padding: '8px 16px' }}>VERIFY A RECEIPT</a>
      </div>
    </nav>
  );
}

function ProofPacketHero() {
  const { StatusGlow } = AevDS;
  const scenarios = window.AEV_SCENARIOS;
  const stages = window.AEV_STAGES;
  const [scen, setScen] = useState(0);
  const [step, setStep] = useState(0);
  const sc = scenarios[scen];
  const done = step >= sc.outcomes.length;

  useEffect(() => {
    const t = setTimeout(() => {
      if (!done) { setStep(step + 1); }
      else { setScen((scen + 1) % scenarios.length); setStep(0); }
    }, done ? 3000 : 950);
    return () => clearTimeout(t);
  }, [step, scen, done]);

  const lastOutcome = sc.outcomes[Math.min(step, sc.outcomes.length - 1)];
  const packetState = done
    ? (sc.result.state === 'verified' ? 'green' : sc.result.state === 'pending' ? 'amber' : 'red')
    : (lastOutcome === 'block' ? 'red' : lastOutcome === 'warn' || lastOutcome === 'owner' ? 'amber' : 'green');
  const packetPos = Math.min(done ? sc.outcomes.length - 1 : step, stages.length - 1) / (stages.length - 1) * 100;

  return (
    <header className="revealed" data-ledger="HERO_PACKET" data-screen-label="Hero">
      <div className="hero">
        <div className="hero-copy">
          <span className="aev-eyebrow">AEVION · PROOF-GOVERNED AI CONTROL</span>
          <h1>Every action leaves a receipt.</h1>
          <p>Aevion is the control plane between AI agents and consequence. Tasks pass through policy, evidence, and human authority gates — and every important event leaves a replayable, cryptographically anchored receipt.</p>
          <div className="hero-ctas">
            <a className="aui-btn aui-btn-primary" href="#verify">VERIFY A RECEIPT</a>
            <a className="aui-btn aui-btn-ghost" href="#city">OPEN PROOF CITY</a>
          </div>
        </div>
        <aside className="hero-side">
          <span className="aev-eyebrow">LIVE PACKET · DEMO MODE</span>
          <div className="hero-side-row"><span>RUN</span><b className="aui-mono">{sc.run}</b></div>
          <div className="hero-side-row"><span>LANE</span><b className="aui-mono">{sc.lane}</b></div>
          <div className="hero-side-row"><span>STATE</span>
            <StatusGlow state={done ? sc.result.state : 'active'} label={done ? sc.result.label : 'IN TRANSIT'} pulse={!done}></StatusGlow>
          </div>
        </aside>
      </div>
      <div className="pipe-wrap">
        <div className="pipe-shell">
          <div className="pipe-top">
            <span className="aev-eyebrow">PROOF PACKET · {sc.run}</span>
            <span className="aui-meta">SYNTHETIC FIXTURES · NO LIVE DATA</span>
          </div>
          <div className="pipe-rail">
            <span className="pipe-packet" data-state={packetState} style={{ left: 'calc(' + packetPos + '% - 6px)' }}></span>
          </div>
          <ol className="pipe" style={{ listStyle: 'none', margin: 0, padding: 0 }}>
            {stages.map((label, i) => {
              const reached = i < step || done;
              const active = i === step && !done;
              const outcome = reached && i < sc.outcomes.length ? sc.outcomes[i] : null;
              const chip = outcome ? window.AEV_OUTCOME_CHIP[outcome] : null;
              const skipped = done && i >= sc.outcomes.length;
              return (
                <li className="pipe-node" data-on={active || (outcome != null)} key={label}>
                  <span className="pipe-node-label">{label}</span>
                  <span className={'pipe-chip ' + (chip ? chip.cls : 'aui-c-dim')}>
                    {chip ? chip.text : active ? '···' : skipped ? 'NOT REACHED' : ''}
                  </span>
                </li>
              );
            })}
          </ol>
          <div className="pipe-result">
            {done
              ? <StatusGlow state={sc.result.state} label={sc.result.label} detail={sc.result.detail} pulse={false}></StatusGlow>
              : <span>packet in transit — gate {Math.min(step + 1, stages.length)} of {stages.length}</span>}
          </div>
        </div>
      </div>
      <ReceiptTicker></ReceiptTicker>
    </header>
  );
}

const AEV_STATUS_CARDS = [
  { state: 'verified', label: 'PASS', copy: 'Action cleared with a receipt. AUTO_PASS_WITH_RECEIPT lane — autonomy inside a proven envelope.' },
  { state: 'advisory', label: 'WARN', copy: 'Advisory variance logged. The run continues under watch; the receipt records the drift.' },
  { state: 'pending', label: 'OWNER_REVIEW_QUEUE', copy: 'Held for human sign-off. Nothing ships without clearance from the owner gate.' },
  { state: 'halted', label: 'BLOCK', copy: 'Policy denied the action. A halt receipt is written — the denial is evidence too.' },
  { state: 'sealed', label: 'PUBLIC_RELEASE_HELD', copy: 'Claim ceiling enforced. public_claim_permitted: false until the gate clears.' }
];

function GateStatusCards() {
  const { StatusGlow } = AevDS;
  return (
    <section className="sec" data-ledger="GATE_OUTCOMES" data-screen-label="Gate outcomes">
      <div className="sec-head">
        <span className="aev-eyebrow">01 · GATE OUTCOMES</span>
        <h2>Five words the system speaks.</h2>
        <p>Aevion does not narrate. It states. Every action resolves to one of these — and each one leaves evidence.</p>
      </div>
      <div className="scards">
        {AEV_STATUS_CARDS.map(c => (
          <article className="scard" key={c.label}>
            <StatusGlow state={c.state} label={c.label} pulse={false}></StatusGlow>
            <p>{c.copy}</p>
          </article>
        ))}
      </div>
    </section>
  );
}

Object.assign(window, { SiteNav, ProofPacketHero, GateStatusCards });