/* aevion.ai — proof city map, claim firewall, footer */
const { useState: useStateC, useEffect: useEffectC } = React;
const AevDSC = window.AevionDesignSystem_a984fb;

function ProofCityMap() {
  const { StatusGlow, StatusDot } = AevDSC;
  const districts = window.AEV_DISTRICTS;
  const [sel, setSel] = useStateC(districts[0].id);
  const d = districts.find(x => x.id === sel);
  const stateWord = { 'NOMINAL': 'nominal', 'ADVISORY': 'advisory', 'OWNER HELD': 'pending', 'MONITORING': 'monitoring' };
  return (
    <section className="sec" id="city" data-ledger="PROOF_CITY" data-screen-label="Proof City">
      <div className="sec-head">
        <span className="aev-eyebrow">04 · PROOF CITY</span>
        <h2>One city. Every gate has an address.</h2>
        <p>The governed loop, drawn as districts. Click a district to see what it governs.</p>
      </div>
      <div className="city">
        <div className="city-map">
          <span className="city-sweep" aria-hidden="true"></span>
          {districts.map(x => (
            <button className={'district aui-c-' + x.color} data-sel={x.id === sel} key={x.id}
              style={{ gridColumn: x.span }} onClick={() => setSel(x.id)}>
              <span className="material-symbols-outlined" aria-hidden="true">{x.icon}</span>
              <span style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
                <StatusDot state={stateWord[x.status]} pulse={x.id === sel}></StatusDot>
                <span className="district-name">{x.name}</span>
              </span>
            </button>
          ))}
        </div>
        <aside className="city-info">
          <span className="aev-eyebrow">DISTRICT</span>
          <h3 style={{ fontSize: 'var(--aev-text-xl)' }}>{d.name}</h3>
          <StatusGlow state={stateWord[d.status]} label={d.status} pulse={false}></StatusGlow>
          <span className="aev-eyebrow" style={{ marginTop: '6px' }}>GOVERNS</span>
          <ul>
            {d.governs.map(g => <li key={g}>{g}</li>)}
          </ul>
        </aside>
      </div>
    </section>
  );
}

function ClaimFirewall() {
  const { StatusGlow } = AevDSC;
  const [phase, setPhase] = useStateC('idle'); // idle → run → done

  useEffectC(() => {
    if (phase === 'idle') {
      const t = setTimeout(() => setPhase('run'), 600);
      return () => clearTimeout(t);
    }
    if (phase === 'run') {
      const t = setTimeout(() => setPhase('done'), 1200);
      return () => clearTimeout(t);
    }
  }, [phase]);

  const running = phase !== 'idle';
  const done = phase === 'done';

  return (
    <section className="sec" id="firewall" data-ledger="CLAIM_FIREWALL" data-screen-label="Claim firewall">
      <div className="sec-head">
        <span className="aev-eyebrow">05 · PCAS · CLAIM FIREWALL</span>
        <h2>Claims have ceilings.</h2>
        <p>Every outbound claim is checked against what the evidence actually supports. Bounded claims pass. Unbounded claims stop here.</p>
      </div>
      <div className="fw">
        <article className="fw-card" data-kind="allowed">
          <StatusGlow state="verified" label="ALLOWED CLAIM" pulse={false}></StatusGlow>
          <div className="fw-lane">
            <span className="fw-bar" data-kind="allowed"></span>
            <span className="fw-claim" data-run={running}>
              “Aevion maintains an internal receipt-backed gate for defensive cyber work.”
            </span>
            <span className="fw-stamp aui-c-green" data-show={done}>PASS</span>
          </div>
          <span className="fw-meta">bounded · receipt rcpt-7b33-d210 · within claim ceiling</span>
        </article>
        <article className="fw-card" data-kind="blocked">
          <StatusGlow state="halted" label="BLOCKED CLAIM" pulse={false}></StatusGlow>
          <div className="fw-lane">
            <span className="fw-bar" data-kind="blocked"></span>
            <span className="fw-claim" data-run={running} data-result={done ? 'blocked' : null}>
              “Aevion is production cyber certified.”
            </span>
            <span className="fw-stamp aui-c-red" data-show={done}>BLOCK</span>
          </div>
          <span className="fw-meta">unbounded · no supporting receipt · public_claim_permitted: false</span>
        </article>
      </div>
      <div style={{ marginTop: '14px' }}>
        <button className="aui-btn aui-btn-ghost" onClick={() => setPhase('idle')}>REPLAY</button>
      </div>
    </section>
  );
}

function SiteFooter() {
  return (
    <footer className="footer" data-ledger="FOOTER_SEAL" data-screen-label="Footer">
      <div className="footer-inner">
        <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
          <span className="aev-eyebrow">DON'T TRUST US — VERIFY US</span>
          <h2><ScrambleText text="Proof is all you need."></ScrambleText></h2>
        </div>
        <div className="footer-status">
          <b>AEVION_SITE_V0_1</b>: DESIGN_PROTOTYPE<br />
          <b>LIVE_DATA</b>: false<br />
          <b>SECRET_ACCESS</b>: false<br />
          <b>PUBLIC_CLAIM</b>: bounded<br />
          <b>PURPOSE</b>: explain proof-governed AI in under 30 seconds
        </div>
      </div>
      <div className="footer-divisions">
        {window.AEV_DIVISIONS.map(d => d.startsWith('xgml')
          ? <a key={d} href="../xgml-org/index.html" style={{ textDecoration: 'none' }}><span style={{ color: 'var(--aev-cyan)' }}>{d} · PLAY PROOFCOMMONS FORGE →</span></a>
          : <span key={d}>{d}</span>)}
      </div>
    </footer>
  );
}

Object.assign(window, { ProofCityMap, ClaimFirewall, SiteFooter });