const DS = window.AURAXISDesignSystem_c09958;
const { TopBar, Button, Badge, Tag, Card, Icon, Metric, DistributionBar, Dialog, Input, Select, Checkbox, IconButton, Tabs, DataTable } = DS;
const { useState, useEffect, useRef, useCallback } = React;

const NAV = [
  { label: "Home", href: "/" },
  { label: "Engine", href: "/engine/" },
  { label: "Intelligence", href: "/intelligence/" },
  { label: "Consultancy", href: "/consultancy/" },
  { label: "About", href: "/about/" },
  { label: "Apply", href: "/apply/" },
];

/* Matches a media query and re-evaluates on resize/rotation. */
function useMedia(query) {
  const [m, setM] = useState(() => typeof matchMedia === "function" && matchMedia(query).matches);
  useEffect(() => {
    const mq = matchMedia(query);
    const on = e => setM(e.matches);
    setM(mq.matches);
    mq.addEventListener("change", on);
    return () => mq.removeEventListener("change", on);
  }, [query]);
  return m;
}
const useIsPhone = () => useMedia("(max-width:760px)");

function SiteHeader({ active }) {
  const [open, setOpen] = useState(false);
  useEffect(() => {
    document.body.style.overflow = open ? "hidden" : "";
    const onKey = e => { if (e.key === "Escape") setOpen(false); };
    if (open) addEventListener("keydown", onKey);
    return () => { removeEventListener("keydown", onKey); document.body.style.overflow = ""; };
  }, [open]);
  return (
    <>
      <TopBar className="ax-navbar" links={NAV} active={active}
        right={<>
          <a href="/apply/" className="ax-menu-hide"><Button size="sm">Request access</Button></a>
          <span className="ax-menu-btn"><IconButton label={open ? "Close menu" : "Open menu"} icon={open ? "x" : "menu"} variant="ghost" onClick={() => setOpen(!open)} /></span>
        </>} />
      {open ? <>
        <button type="button" className="ax-scrim-nav" aria-label="Close menu" onClick={() => setOpen(false)}></button>
        <nav className="ax-drawer" aria-label="Site">
          <div className="ax-drawer-i">NAVIGATION</div>
          {NAV.map(n => <a key={n.label} href={n.href} aria-current={n.label === active ? "page" : undefined}>{n.label}</a>)}
          <div className="ax-drawer-cta">
            <a href="/apply/#apply"><Button size="lg" iconRight="arrow-right">Request access</Button></a>
            <a className="ax-drawer-mail" href={"mailto:" + (window.AURAXIS_EMAIL || "")}>{window.AURAXIS_EMAIL || ""}</a>
          </div>
        </nav>
      </> : null}
    </>
  );
}

function Section({ eyebrow, title, lead, children, id, first, style }) {
  return (
    <section id={id} className={"ax-sec" + (first ? " ax-sec-first" : "")} style={style}>
      <div className="ax-wrap ax-sec-pad">
        {(eyebrow || title || lead) ? (
          <Reveal className="ax-head" style={{ marginBottom: children ? 48 : 0 }}>
            {eyebrow ? <div className="ax-eyebrow">{eyebrow}</div> : null}
            {title ? <h2 className="ax-h3">{title}</h2> : null}
            {lead ? <p className="ax-lead">{lead}</p> : null}
          </Reveal>
        ) : null}
        {children}
      </div>
    </section>
  );
}

function Reveal({ children, className = "", style, as = "div", delay = 0 }) {
  const r = useRef(null);
  useEffect(() => {
    const el = r.current; if (!el) return;
    const io = new IntersectionObserver(es => {
      if (es[0].isIntersecting) { el.style.transitionDelay = delay + "ms"; el.classList.add("is-in"); io.disconnect(); }
    }, { rootMargin: "-40px 0px -10% 0px" });
    io.observe(el); return () => io.disconnect();
  }, [delay]);
  return React.createElement(as, { ref: r, className: "ax-rev " + className, style }, children);
}

/* A labelled fact row set. Values the client has not yet verified render as a pending dash. */
function KV({ rows }) {
  return (
    <dl style={{ margin: 0 }}>
      {rows.map(([k, v]) => (
        <div className="ax-kv" key={k}>
          <dt>{k}</dt>
          <dd className={v === null ? "ax-pending" : undefined}>{v === null ? "—" : v}</dd>
        </div>
      ))}
    </dl>
  );
}

const AX_TEAL = "var(--ax-teal)";

const ALGOS = [
  { code: "AXIS-T", name: "Directional continuation", cond: "Directional persistence", regime: "Directional persistence",
    body: "Establishes the inter-day directional bias in force and holds participation in it for as long as the structural sequence remains intact.",
    risk: "Medium", reward: "Medium", riskN: 3, rewardN: 3, color: "var(--gold-400)" },
  { code: "AXIS-R", name: "Structural reversal", cond: "Structural exhaustion", regime: "Structural exhaustion", flagship: true,
    body: "The flagship model. Evaluates in excess of 330 structural reference points to locate the terminal extremes of the prevailing long-horizon move with high positional precision.",
    risk: "Low", reward: "High", riskN: 1, rewardN: 5, color: "var(--accent-400)" },
  { code: "AXIS-S", name: "Range compression", cond: "Range compression", regime: "Range compression",
    body: "Engineered for compressed, non-directional conditions, where continuation models carry the greatest adverse exposure. Narrow objectives under tight containment.",
    risk: "Low", reward: "Low", riskN: 1, rewardN: 1, color: AX_TEAL },
];

/* Five-step scale with its value written out — colour never carries the meaning alone. */
function Scale({ label, n, word, color = "var(--gold-400)" }) {
  return (
    <div className="ax-scale">
      <span className="ax-scale-l">{label}</span>
      <span className="ax-scale-b" aria-hidden="true">
        {[1, 2, 3, 4, 5].map(i => <i key={i} style={{ background: i <= n ? color : "var(--hairline-strong)" }}></i>)}
      </span>
      <span className="ax-scale-v">{word}</span>
    </div>
  );
}

function AlgoCard({ a, detail }) {
  return (
    <Card level={a.flagship ? 2 : 1} interactive edge={a.flagship}
      header={<>
        <span className="ax-mono" style={{ color: a.color, letterSpacing: ".06em" }}>{a.code}</span>
        {a.flagship ? <Badge tone="caution">Flagship</Badge> : <Badge>{a.cond.split(",")[0]}</Badge>}
      </>}>
      <div className="ax-title" style={{ marginBottom: 8 }}>{a.name}</div>
      <p className="ax-body-sm" style={{ color: "var(--ink-muted)" }}>{a.body}</p>
      <div style={{ marginTop: 20 }}>
        <KV rows={[["Market condition", a.cond], ["Risk profile", a.risk], ["Return profile", a.reward]].concat(detail ? [["Verified track record", null]] : [])} />
      </div>
    </Card>
  );
}

function CTABand({ title, lead, primary, secondary }) {
  return (
    <section className="ax-sec" style={{ background: "var(--surface-1)" }}>
      <div className="ax-wrap ax-ctarow">
        <Reveal>
          <h2 className="ax-h3">{title}</h2>
          {lead ? <p className="ax-lead" style={{ marginTop: 14 }}>{lead}</p> : null}
        </Reveal>
        <Reveal className="ax-ctas" style={{ marginTop: 0 }}>{primary}{secondary}</Reveal>
      </div>
    </section>
  );
}

function SiteFooter() {
  const cols = [
    ["System", [["AURAXIS Engine", "/engine/"], ["Intelligence", "/intelligence/"], ["Consultancy", "/consultancy/"]]],
    ["Company", [["About", "/about/"], ["Policies", "/about/#policies"], ["Contact", "/apply/"]]],
    ["Access", [["Request access", "/apply/#apply"], ["Book a consultation", "/consultancy/#book"]]],
  ];
  return (
    <footer style={{ borderTop: "1px solid var(--hairline)", background: "var(--canvas)" }}>
      <div className="ax-wrap ax-foot-top">
        <div>
          <div style={{ fontFamily: "var(--font-display)", fontSize: 14, fontWeight: 600, letterSpacing: ".2em", color: "var(--ink)" }}>AURAXIS</div>
          <p className="ax-caption" style={{ maxWidth: 260, marginTop: 12 }}>Algorithmic research and execution technology for a single market: Gold.</p>
          <div style={{ display: "flex", gap: 8, marginTop: 16, flexWrap: "wrap" }}>
            <Badge mono>AXIS-T</Badge><Badge mono>AXIS-R</Badge><Badge mono>AXIS-S</Badge>
          </div>
        </div>
        {cols.map(([h, items]) => (
          <div key={h}>
            <div className="ax-eyebrow" style={{ fontSize: 11, marginBottom: 12 }}>{h}</div>
            <div className="ax-foot-col">
              {items.map(([l, href]) => <a key={l} href={href}>{l}</a>)}
            </div>
          </div>
        ))}
      </div>
      <div style={{ borderTop: "1px solid var(--hairline)" }}>
        <div className="ax-wrap" style={{ padding: "var(--space-5) var(--gutter)" }}>
          <p className="ax-caption" style={{ maxWidth: "84ch", color: "var(--ink-faint)" }}>
            AURAXIS supplies research and analytics technology. We do not provide investment advice and we do not guarantee outcomes. Trading in Gold and leveraged instruments is highly volatile and carries substantial financial risk, including total loss of capital. <a href="/about/#policies">Read the full disclosure</a>.
          </p>
        </div>
      </div>
      <div style={{ borderTop: "1px solid var(--hairline)" }}>
        <div className="ax-wrap" style={{ padding: "14px var(--gutter)", display: "flex", justifyContent: "space-between", flexWrap: "wrap", gap: 12 }}>
          <span className="ax-mono-sm">© 2026 AURAXIS · THE AXIS OF EVERY GOLD MOVE</span>
          <span className="ax-mono-sm">APPLICATIONS REVIEWED WITHIN ONE BUSINESS DAY</span>
        </div>
      </div>
    </footer>
  );
}

function Ambient({ height = "100%", gap = 26, warm = 1 }) {
  const phone = useIsPhone();
  return <>
    <div className="ax-field" style={{ height }}><ax-field gap={phone ? 34 : gap} warm={warm}></ax-field></div>
    <div className="ax-field-mask"></div>
  </>;
}

Object.assign(window, { DS, NAV, ALGOS, AX_TEAL, Scale, SiteHeader, SiteFooter, Section, Reveal, KV, AlgoCard, CTABand, Ambient, useMedia, useIsPhone });