// Shared nav + footer + shell for AI Platform Engineering site
// Usage: <script type="text/babel" src="shared/shell.jsx"></script>
// Then in your page: ReactDOM.createRoot(document.getElementById('app')).render(<Shell page="home"><YourPageContent/></Shell>);

const NAV_ITEMS = [
  { key: 'home',         label: 'Overview',     href: 'index.html' },
  { key: 'capabilities', label: 'Capabilities', href: 'capabilities.html' },
];

function SiteNav({ page }) {
  return (
    <nav className="site-nav">
      <div className="site-nav-inner">
        <a href="index.html" className="brand" aria-label="AI Platform Engineering home">
          <span className="brand-mark" aria-hidden="true" />
          <span className="brand-name">AI Platform Engineering</span>
        </a>
        <div className="nav-links">
          {NAV_ITEMS.map(item => (
            <a key={item.key} href={item.href} className={page === item.key ? 'active' : ''}>
              {item.label}
            </a>
          ))}
        </div>
        <a href="#contact" className="nav-cta">Book intro →</a>
      </div>
    </nav>
  );
}

function SiteFooter() {
  return (
    <footer className="site-footer">
      <div className="site-footer-inner">
        <div>
          <div className="brand" style={{ marginBottom: 20 }}>
            <span className="brand-mark" aria-hidden="true" />
            <span className="brand-name">AI Platform Engineering</span>
          </div>
          <p style={{ maxWidth: 320, color: 'var(--fg-3)', fontSize: 13, lineHeight: 1.6 }}>
            Platform engineering and cloud infrastructure for regulated enterprises. We build what your teams ship on.
          </p>
          <p className="mono" style={{ marginTop: 24, fontSize: 11, color: 'var(--fg-4)', textTransform: 'uppercase', letterSpacing: '0.1em' }}>
            New York · London · Singapore
          </p>
        </div>
        <div>
          <h5>Capabilities</h5>
          <ul>
            <li><a href="capabilities.html#clo">Cloud landing zones</a></li>
            <li><a href="capabilities.html#kub">Kubernetes platforms</a></li>
            <li><a href="capabilities.html#dev">Developer platforms</a></li>
            <li><a href="capabilities.html#obs">Observability & SRE</a></li>
            <li><a href="capabilities.html#fin">FinOps</a></li>
            <li><a href="capabilities.html#sec">Security automation</a></li>
          </ul>
        </div>
        <div>
          <h5>Practice</h5>
          <ul>
            <li style={{ color: 'var(--fg-4)' }}>Regulated industries</li>
            <li style={{ color: 'var(--fg-4)' }}>Public sector</li>
            <li style={{ color: 'var(--fg-4)' }}>Industrial</li>
          </ul>
        </div>
        <div>
          <h5>Offices</h5>
          <ul>
            <li style={{ color: 'var(--fg-4)' }}>New York</li>
            <li style={{ color: 'var(--fg-4)' }}>London</li>
            <li style={{ color: 'var(--fg-4)' }}>Singapore</li>
          </ul>
        </div>
      </div>
      <div className="site-footer-bottom">
        <div>© 2026 AI Platform Engineering · All rights reserved</div>
        <div>ISO 27001 · SOC 2 Type II</div>
      </div>
    </footer>
  );
}

function Shell({ page, children }) {
  return (
    <>
      <SiteNav page={page} />
      <main>{children}</main>
      <SiteFooter />
    </>
  );
}

Object.assign(window, { SiteNav, SiteFooter, Shell, NAV_ITEMS });