function Nav({ route, setRoute }) {
  const [open, setOpen] = React.useState(false);
  const link = (id, label) => (
    <li><a href="#" onClick={(e) => { e.preventDefault(); setRoute(id); setOpen(false); }}
      style={{ color: route === id ? '#fff' : undefined }}>{label}</a></li>
  );
  return (
    <nav className={`nav${open ? ' nav-open' : ''}`}>
      <div className="container">
        <a href="#" className="nav-logo" onClick={(e) => { e.preventDefault(); setRoute('home'); }}>
          <img src="images/protect-me-logo.png" alt="Protect-Me" className="nav-logo-img" />
          Protect-<span style={{ marginLeft: '-14px' }}>Me</span>
        </a>
        <ul className="nav-links">
          {link('home', 'Home')}
          {link('about', 'About Us')}
          {link('faq', 'FAQ')}
        </ul>
        <button className="nav-hamburger" aria-label="Toggle menu" onClick={() => setOpen(o => !o)}>
          <span></span><span></span><span></span>
        </button>
      </div>
    </nav>
  );
}

function Footer() {
  return (
    <footer className="footer">
      <div className="container">
        <span className="footer-copy">© 2026 Protect-Me. All rights reserved.</span>
        <ul className="footer-links">
          <li><a href="#">About Us</a></li>
          <li><a href="#">FAQ</a></li>
        </ul>
      </div>
    </footer>
  );
}

Object.assign(window, { Nav, Footer });