/* @jsx React.createElement */

/* SiteShell — wraps each sub-page with the marketing-site nav and footer.
   Same chrome as index.html so /careers, /docs, /status read as part of the
   same product surface, not separate microsites. */
function SiteShell({ active, children }) {
  return (
    <>
      <nav className="nav">
        <div className="wrap nav-inner">
          <a href="index.html" className="mark" style={{textDecoration:'none'}}>
            gtm<span className="am">/</span>os
          </a>
          <div className="links">
            <a href="index.html#product" className={active==='product' ? 'is-active' : ''}>product</a>
            <span className="sep">/</span>
            <a href="index.html#pricing" className={active==='pricing' ? 'is-active' : ''}>pricing</a>
            <span className="sep">/</span>
            <a href="docs.html" className={active==='docs' ? 'is-active' : ''}>docs</a>
            <span className="sep">/</span>
            <a href="status.html" className={active==='status' ? 'is-active' : ''}>status</a>
          </div>
          <div className="actions">
            <a href="docs.html" className="btn-ghost">read the spec <span className="am">&rarr;</span></a>
            <a href={window.DEPLOY_CTA_HREF} className="btn-primary">Get #gtmos in your Slack</a>
          </div>
        </div>
      </nav>

      {children}

      <footer className="foot">
        <div className="wrap foot-inner">
          <div className="mark">
            gtm<span className="am">/</span>os
            <span style={{margin:'0 8px',color:'#3a3a44'}}>·</span>
            v1.0 / april 2026
            <span style={{margin:'0 8px',color:'#3a3a44'}}>·</span>
            gtmos.run
          </div>
          <div className="links">
            <a href="docs.html" className={active==='docs' ? 'is-active' : ''}>spec</a>
            <a href="docs.html#enrichment">cascade</a>
            <a href="careers.html" className={active==='careers' ? 'is-active' : ''}>careers</a>
            <a href="status.html" className={active==='status' ? 'is-active' : ''}>status</a>
          </div>
        </div>
      </footer>
    </>
  );
}

window.SiteShell = SiteShell;