/* Titans desktop: top bar + page shell */
(() => {
const { C, WAButton, Logo, Skip, ThemeSwitch } = window.SiteKit;
const { Footer } = window.SiteSections;

function Nav({ current }) {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const s = document.getElementById('topo-sentinel');
    if (!s || !('IntersectionObserver' in window)) return;
    const o = new IntersectionObserver(([e]) => setScrolled(!e.isIntersecting));
    o.observe(s);
    return () => o.disconnect();
  }, []);
  const home = current === 'inicio';
  return (
    <React.Fragment>
      <div id="topo-sentinel" style={{ position: 'absolute', top: 0, left: 0, width: 1, height: 1 }}></div>
      <header className={'top' + (scrolled ? ' is-scrolled' : '')}>
        <div className="wrap top-in">
          <Logo href={home ? '#conteudo' : 'index.html'} />
          <nav aria-label="Principal">
            <ul>
              {C.nav.map(([label, href, key]) => (
                <li key={key}><a href={home && href.startsWith('index.html') ? href.replace('index.html', '') || '#conteudo' : href} aria-current={current === key ? 'page' : undefined}>{label}</a></li>
              ))}
            </ul>
          </nav>
          <div className="top-end">
            <ThemeSwitch />
            <WAButton small msg={C.msgs.menu} />
          </div>
        </div>
      </header>
    </React.Fragment>
  );
}

window.renderSite = function (page) {
  const Page = window.SitePages[page];
  function App() {
    return (
      <React.Fragment>
        <Skip />
        <Nav current={page} />
        <main id="conteudo"><Page /></main>
        <Footer />
      </React.Fragment>
    );
  }
  ReactDOM.createRoot(document.getElementById('app')).render(<App />);
};
})();