/* App — nav (with theme toggle + search), footer, router, ⌘K. Exports window.SiteApp */
const DS_A = window.EquestrianismDesignSystem_6b57f9;

function SiteNav({ route, theme, onOpen, onToggleTheme, onOpenSearch }) {
  const { Wordmark, Button } = DS_A;
  const Ico = ({n}) => <window.EqIcon name={n} size={15} />;
  return (
    <header className="nav">
      <div className="nav__in">
        <button className="nav__brand" onClick={() => onOpen('home')} aria-label="Equestrianism home">
          <Wordmark size="sm" />
        </button>
        <nav className="nav__links">
          <button className={`nav__link ${route==='home'?'nav__link--active':''}`} onClick={() => onOpen('home')}>Suite</button>
          <button className={`nav__link ${route==='product'?'nav__link--active':''}`} onClick={() => onOpen('product','stirrup')}>stirrup</button>
          <button className={`nav__link ${route==='docs'?'nav__link--active':''}`} onClick={() => onOpen('docs')}>Docs</button>
          <button className="searchtrigger" style={{minWidth:170}} onClick={onOpenSearch}>
            <Ico n="search" /><span>Search</span><span className="searchtrigger__kbd">⌘K</span>
          </button>
          <button className="themebtn" onClick={onToggleTheme}
            aria-label={theme==='dark'?'Switch to light':'Switch to dark'}>
            <window.EqIcon name={theme==='dark'?'sun':'moon'} size={17} />
          </button>
          <Button variant="ghost" size="sm" as="a" href="https://github.com/rxbynerd" target="_blank" iconLeft={<Ico n="github" />}>GitHub</Button>
        </nav>
      </div>
    </header>
  );
}

function SiteFooter({ onOpen }) {
  const { Wordmark, Plate } = DS_A;
  return (
    <footer className="footer">
      <div className="wrap">
        <div className="footer__grid">
          <div>
            <Wordmark size="md" onDark />
            <p className="footer__blurb">A stable of small, sharp, single-binary tools
            for running LLMs in production. Open source, en-GB, Apache&nbsp;2.0.</p>
            <Plate variant="seal" size="sm" onDark caption="2026" style={{marginTop:'var(--space-6)'}} />
          </div>
          <div>
            <h5>Suite</h5>
            <a className="footer__link" onClick={() => onOpen('product','stirrup')} href="#">stirrup</a>
            <a className="footer__link" href="#">chiron</a>
            <a className="footer__link" href="#">dressage</a>
            <a className="footer__link" href="#">steeplechase</a>
          </div>
          <div>
            <h5>Docs</h5>
            <a className="footer__link" onClick={() => onOpen('docs')} href="#">Quick start</a>
            <a className="footer__link" onClick={() => onOpen('docs','architecture')} href="#">Architecture</a>
            <a className="footer__link" onClick={() => onOpen('docs','safety-rings')} href="#">Safety rings</a>
          </div>
          <div>
            <h5>Source</h5>
            <a className="footer__link" href="https://github.com/rxbynerd/stirrup" target="_blank">GitHub</a>
            <a className="footer__link" href="#">Philosophy</a>
            <a className="footer__link" href="#">Security</a>
          </div>
        </div>
        <div className="footer__base">
          <span>© 2026 Equestrianism · @rubynerd</span>
          <span>Apache 2.0</span>
        </div>
      </div>
    </footer>
  );
}

function applyTheme(t) {
  document.documentElement.setAttribute('data-theme', t);
  try { localStorage.setItem('eq-theme', t); } catch (e) {}
}

function SiteApp() {
  const [state, setState] = React.useState({ route:'home', arg:null });
  const [docTarget, setDocTarget] = React.useState(null);
  const [searchOpen, setSearchOpen] = React.useState(false);
  const [theme, setTheme] = React.useState(() => {
    try { return localStorage.getItem('eq-theme') || 'light'; } catch (e) { return 'light'; }
  });

  React.useEffect(() => { applyTheme(theme); }, [theme]);

  const onOpen = (route, arg=null) => {
    if (route === 'docs') setDocTarget({ pageId: arg || 'quick-start', sectionId: null, n: Date.now() });
    setState({ route, arg });
    window.scrollTo({ top:0 });
  };

  const onSelectResult = (r) => {
    setDocTarget({ pageId: r.pageId, sectionId: r.sectionId, n: Date.now() });
    setState({ route:'docs', arg:r.pageId });
  };

  // Global ⌘K / Ctrl-K
  React.useEffect(() => {
    const onKey = (e) => {
      if ((e.metaKey || e.ctrlKey) && (e.key === 'k' || e.key === 'K')) {
        e.preventDefault(); setSearchOpen(o => !o);
      }
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, []);

  let screen;
  if (state.route === 'product') screen = <window.Product id={state.arg||'stirrup'} onOpen={onOpen} />;
  else if (state.route === 'docs') screen = <window.Docs target={docTarget} onOpenSearch={() => setSearchOpen(true)} />;
  else screen = <window.Home onOpen={onOpen} />;

  return (
    <React.Fragment>
      <SiteNav route={state.route} theme={theme} onOpen={onOpen}
        onToggleTheme={() => setTheme(t => t==='dark'?'light':'dark')}
        onOpenSearch={() => setSearchOpen(true)} />
      {screen}
      <SiteFooter onOpen={onOpen} />
      <window.SearchPalette open={searchOpen} onClose={() => setSearchOpen(false)} onSelect={onSelectResult} />
    </React.Fragment>
  );
}
window.SiteApp = SiteApp;