/* @jsx React.createElement */
const { useEffect } = React;

/* SiteShell — wraps each sub-page with the marketing-site nav and footer.
   Same chrome as index.html so /docs, /status read as part of the
   same product surface, not separate microsites. */
function CtaSection() {
  return (
    <section className="cta-section" id="cta">
      <div className="wrap">
        <span className="cta-eyebrow">the next step</span>

        <h2 className="cta-headline">
          We&rsquo;ll write your blueprint.<br/>
          <span className="am">You keep it free.</span>
        </h2>

        <p className="cta-body">
          20 minutes. We sweep your market live on the call. You leave with a custom agent blueprint &mdash;
          delivered as an MD file &mdash; yours to implement free with your team. Or have us operate it.
        </p>

        <div className="cta-decay">
          Signal markets decay weekly &middot; the freshest read is now
        </div>

        <div className="cta-card">
          <div className="cta-rep">
            <div className="rep-avatar">
              <img src="assets/team/alex.avif" alt="Alex Kashtan" />
            </div>
            <div>
              <div className="rep-name">Alex Kashtan</div>
              <div className="rep-role">Head of Revenue &middot; GTM OS</div>
            </div>
            <span className="cta-pill"><span className="pill-free">FREE</span> 20 min</span>
          </div>

          <ul className="cta-agenda">
            <li><strong>Live market sweep</strong> &mdash; we scan your TAM and signals during the call</li>
            <li><strong>Custom agent blueprint</strong> &mdash; delivered as an MD file you keep</li>
            <li><strong>Implement it free</strong> &mdash; with your team. Or have us operate it.</li>
          </ul>

          <a href="#" className="btn-cta-big" id="footerDeployCta">Get my blueprint &middot; 20 min &rarr;</a>

          <div className="cta-reassure">
            No deck. No pitch. <strong>The blueprint is yours either way.</strong>
            <span className="cta-reassure-fine">Operated pricing only if you want us to build &amp; run it.</span>
          </div>
        </div>
      </div>
    </section>
  );
}

function SiteShell({ active, children }) {
  useEffect(() => {
    const href = window.DEPLOY_CTA_HREF;
    ['navDeployCta', 'footerDeployCta'].forEach((id) => {
      const el = document.getElementById(id);
      if (el) {
        el.href = href;
        el.target = '_blank';
        el.rel = 'noopener noreferrer';
      }
    });
  }, []);

  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="pricing.html" 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>
            <span className="sep">/</span>
            <a href="/insights" className={active==='insights' ? 'is-active' : ''}>insights</a>
          </div>
          <a href="#" className="nav-cta" id="navDeployCta">
            Get your market read <span className="arrow">&rarr;</span>
          </a>
        </div>
      </nav>

      {children}

      <CtaSection />

      <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="pricing.html" className={active==='pricing' ? 'is-active' : ''}>pricing</a>
            <a href="status.html" className={active==='status' ? 'is-active' : ''}>status</a>
            <a href="/insights" className={active==='insights' ? 'is-active' : ''}>insights</a>
            <a href="/tos" className={active==='tos' ? 'is-active' : ''}>terms</a>
            <a href="/privacy" className={active==='privacy' ? 'is-active' : ''}>privacy</a>
          </div>
        </div>
      </footer>
    </>
  );
}

window.SiteShell = SiteShell;