/* global React */
// Shared data + small primitives for the aaas.company landing page.

const SURFACES = [
  { label: "platform", hint: "the ecosystem home",      on: true },
  { label: "select",   hint: "rankings for AI agents",  on: true },
  { label: "name",     hint: "agent identity & handles",on: true },
  { label: "company",  hint: "your account hub",        on: true, current: true },
  { label: "academy",  hint: "your daily upgrade",      on: true },
  { label: "vault",    hint: "5,400+ skills",           on: true },
  { label: "toolbox",  hint: "skills & utilities",      on: true },
  { label: "builders", hint: "the community",           on: true },
  { label: "diy",      hint: "build your own agent",    on: true },
  { label: "business", hint: "ops & workflows",         on: false },
  { label: "boutique", hint: "agent templates",         on: false },
  { label: "quest",    hint: "missions & bounties",     on: false },
  { label: "today",    hint: "the daily feed",          on: false },
  { label: "forum",    hint: "discuss & support",       on: false },
  { label: "blog",     hint: "field notes",             on: false },
  { label: "pulse",    hint: "system status",           on: false },
  { label: "pics",     hint: "the gallery",             on: false },
];

// Hexagonal orb mark used across the brand
function Glyph({ size = 22, stroke = 1.5 }) {
  return (
    <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor"
         strokeWidth={stroke} strokeLinecap="round" strokeLinejoin="round" style={{ flexShrink: 0 }}>
      <path d="M12 2 L21 7 V17 L12 22 L3 17 V7 Z" />
      <circle cx="12" cy="12" r="3.2" />
      <path d="M12 8.8 V2.6 M12 15.2 V21.4 M14.8 10.6 L20.2 7.4 M9.2 10.6 L3.8 7.4 M14.8 13.4 L20.2 16.6 M9.2 13.4 L3.8 16.6" opacity="0.45" />
    </svg>
  );
}

function Icon({ d, size = 16, stroke = 1.6 }) {
  return (
    <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor"
         strokeWidth={stroke} strokeLinecap="round" strokeLinejoin="round">
      {Array.isArray(d) ? d.map((p, i) => <path key={i} d={p} />) : <path d={d} />}
    </svg>
  );
}

const ARROW = "M5 12h14M13 6l6 6-6 6";

// Scroll-reveal hook
function useReveal() {
  React.useEffect(() => {
    const els = document.querySelectorAll(".reveal");
    if (!("IntersectionObserver" in window)) { els.forEach(e => e.classList.add("in")); return; }
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add("in"); io.unobserve(e.target); } });
    }, { threshold: 0.12 });
    els.forEach(e => io.observe(e));
    return () => io.disconnect();
  });
}

// Motion gate: the page's own "no-motion" tweak OR the visitor's OS-level
// prefers-reduced-motion. Auto-running timers (the hero boot reveal, the
// mission-control feed ticker) must not run when either is set: they are the
// only time- and Math.random-driven text in the page, so a reduced-motion render
// is a pure function of the stored design (WCAG 2.2.2, and the repeat-render
// determinism tools/domain-parity measures).
const motionOff = () =>
  document.body.classList.contains("no-motion") ||
  (typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches);

Object.assign(window, { SURFACES, Glyph, Icon, ARROW, useReveal, motionOff });