/* global React */

// Shared nav/footer + the name→select→company orbit diagram,
// used by both the one-pager module and the standalone context page.

function SiteNav({ home = "aaas-name-onepager.html" }) {
  return (
    <nav className="wf-nav op-nav">
      <a href={home} className="wf-nav-logo" style={{textDecoration:'none', display:'flex', alignItems:'flex-end', gap:9}}>
        <img src={(window.__resources && window.__resources.aaasLogo) || "/assets/domains/name/assets/AaaS_Logo_White.png"} alt="AaaS" className="op-logo"/>
        <span style={{ fontFamily: "var(--font-jetbrains)", fontSize: 12, letterSpacing: "0.04em", color: "rgb(var(--circuit-glow))" }}>name</span>
      </a>
      <div className="wf-nav-links">
        <span>How it works</span>
        <span>Examples</span>
        <span>Pricing</span>
        <span>Docs</span>
      </div>
      <div className="wf-nav-cta">Try free</div>
    </nav>
  );
}

function SiteFooter() {
  return (
    <footer className="op-footer">
      <div className="wf-nav-logo" style={{display:'flex', alignItems:'flex-end', gap:9}}>
        <img src={(window.__resources && window.__resources.aaasLogo) || "/assets/domains/name/assets/AaaS_Logo_White.png"} alt="AaaS" className="op-logo"/>
        <span style={{ fontFamily: "var(--font-jetbrains)", fontSize: 12, letterSpacing: "0.04em", color: "rgb(var(--circuit-glow))" }}>name</span>
      </div>
      <div className="ovl">© 2026 · AGENT-AS-A-SERVICE · QUALITY OVER SPEED</div>
      <div className="ovl cyan">agent@aaas.name</div>
    </footer>
  );
}

// core = .name (you) · mid ring = .select (the agent that acts) ·
// outer ring = .company — carrying every teammate's .name
function ContextOrbit({ size = "sm", peers = 8 }) {
  const box = size === "lg" ? 320 : 220;
  const mid = size === "lg" ? 210 : 150;
  const core = size === "lg" ? 92 : 64;
  const midLabelTop = (box - mid) / 2 - 10;
  const r = box / 2;
  const dot = 10;

  return (
    <div className="ctx-orbit-wrap">
      <div className="ctx-orbit" style={{ width: box, height: box }}>
        <div className="ctx-ring-outer" style={{ position:"absolute", inset:0, borderRadius:"50%" }}></div>
        <div className="ctx-peers">
          {Array.from({ length: peers }).map((_, i) => {
            const a = (i / peers) * Math.PI * 2 - Math.PI / 2;
            return (
              <span
                key={i}
                className="ctx-peer"
                style={{
                  left: r + r * Math.cos(a) - dot / 2,
                  top:  r + r * Math.sin(a) - dot / 2,
                }}
              ></span>
            );
          })}
        </div>
        <div className="ctx-ring-mid" style={{ position:"absolute", width:mid, height:mid, left:"50%", top:"50%", transform:"translate(-50%,-50%)", borderRadius:"50%" }}></div>
        <div className="ctx-core" style={{ width:core, height:core, left:"50%", top:"50%", transform:"translate(-50%,-50%)" }}>
          <span className="corelabel">YOU</span>
          <span className="coreval">.name</span>
        </div>
        <div className="ctx-ring-label outer" style={{ top:-10 }}>.company</div>
        <div className="ctx-ring-label mid" style={{ top:midLabelTop }}>.select</div>
      </div>
      <div className="ctx-orbit-caption">many <b>.name</b> <i>→</i> one <b>.company</b></div>
    </div>
  );
}

Object.assign(window, { SiteNav, SiteFooter, ContextOrbit });