/* Site chrome: header (lockup + nav + CTA) + footer (badge, links, sign-off).
   Uses NavLink helper for hash routing with aria-current. */

function NavLink({ to, current, children, className }) {
  const isActive = current === to;
  const onClick = (e) => {
    e.preventDefault();
    window.location.hash = "#/" + to;
  };
  return (
    <a
      href={"#/" + to}
      onClick={onClick}
      aria-current={isActive ? "page" : undefined}
      className={className}
    >
      {children}
    </a>
  );
}

function SiteHeader({ route, lockupSize = 140 }) {
  return (
    <header className="site-header">
      <div className="header-inner" style={{ "--tw-header-lockup": lockupSize + "px" }}>
        <a
          href="#/"
          className="wordmark"
          onClick={(e) => { e.preventDefault(); window.location.hash = "#/"; }}
        >
          <img src="assets/logo/tw-lockup-color_2000.png" alt="Taproot Works" />
        </a>
        <nav className="primary">
          <NavLink to="what" current={route}>What we do</NavLink>
          <NavLink to="studio" current={route}>Studio</NavLink>
          <NavLink to="builds" current={route}>Builds</NavLink>
          <NavLink to="ops" current={route}>Ops</NavLink>
          <NavLink to="who" current={route}>Who we are</NavLink>
          <NavLink to="contact" current={route} className="cta">Start a conversation</NavLink>
        </nav>
      </div>
    </header>
  );
}

function SiteFooter({ route }) {
  return (
    <footer className="site-footer">
      <div className="footer-inner">
        <div className="footer-brand">
          <img src="assets/logo/tw-badge-color_800.png" alt="Taproot Works badge" />
        </div>

        <div className="footer-cols">
          <div className="footer-col">
            <h4>Practice</h4>
            <NavLink to="what" current={route}>What we do</NavLink>
            <NavLink to="studio" current={route}>Taproot Studio</NavLink>
            <NavLink to="builds" current={route}>Taproot Builds</NavLink>
            <NavLink to="ops" current={route}>Taproot Ops</NavLink>
            <NavLink to="who" current={route}>Who we are</NavLink>
          </div>
          <div className="footer-col">
            <h4>Contact</h4>
            <NavLink to="contact" current={route}>Start a conversation</NavLink>
            <a href="mailto:hello@taprootworks.ai">hello@taprootworks.ai</a>
          </div>
        </div>

        <div className="footer-signoff">
          <div className="tagline">Technologists who get it.</div>
          <div className="grow">We build roots. <em>You grow wings.</em></div>
          <div className="meta">
            Taproot Works<br />
            taprootworks.ai<br />
            © 2026
          </div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { SiteHeader, SiteFooter, NavLink });