/* Site chrome — header nav + footer. Multi-page: real <a href> links.
   Active nav derives from window.FR_PAGE set by each page. */
function SiteHeader() {
  const [open, setOpen] = React.useState(false);
  const current = window.FR_PAGE || 'home';
  const nav = window.FR.nav.filter((n) => !n.flag || window.FR.flags[n.flag]);
  return (
    <header className="site-header">
      <div className="wrap nav-inner">
        <a href="index.html" className="nav-logo" aria-label="Face Rock Tribal Health home">
          <img src="assets/logos/FR_Logo_dark.png" alt="Face Rock Tribal Health" />
        </a>
        <button className="nav-toggle" aria-label="Menu" onClick={() => setOpen((o) => !o)}>
          <span></span><span></span><span></span>
        </button>
        <nav className={'nav-links' + (open ? ' open' : '')}>
          {nav.map((n) => (
            <a key={n.key} href={n.href}
               className={'nav-link' + (current === n.key ? ' active' : '')}>{n.label}</a>
          ))}
          <a href="contact.html" className="btn btn-primary nav-cta">Talk to Face Rock</a>
        </nav>
      </div>
    </header>
  );
}

function SiteFooter() {
  return (
    <footer className="site-footer">
      <div className="footer-top"></div>
      <div className="wrap">
        <div className="footer-grid">
          <div className="footer-logo">
            <img src="assets/logos/FR_Logo_white.png" alt="Face Rock Tribal Health" />
            <p className="footer-tagline">Operational depth for complex programs in Tribal health.</p>
          </div>
          <div className="footer-col footer-services">
            <h5>Services</h5>
            <div className="footer-links-2">
              {window.FR.services.map((s) => (
                <a key={s.slug} href={window.FR.serviceUrl(s.slug)}>{s.name}</a>
              ))}
            </div>
          </div>
          <div className="footer-col">
            <h5>Company</h5>
            <a href="about.html">About</a>
            {window.FR.flags.stories && <a href="client-stories.html">Client Stories</a>}
            <a href="resources.html">Resources</a>
            <a href="contact.html">Contact</a>
          </div>
        </div>
        <div className="footer-bottom">
          <span>&copy; 2026 Face Rock Tribal Health &middot; 503-799-6824 &middot; info@facerockinc.com</span>
          {window.FR.flags.privacy && <a href="privacy.html" className="footer-legal">Privacy Policy</a>}
        </div>
      </div>
    </footer>
  );
}

window.SiteHeader = SiteHeader;
window.SiteFooter = SiteFooter;