// Nav + Footer
const { useState: useStateCh, useEffect: useEffectCh } = React;

function Nav({ page, go }) {
  const [scrolled, setScrolled] = useStateCh(false);
  useEffectCh(() => {
    const onScroll = () => setScrolled(window.scrollY > 20);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const links = [
    ["home", "Main"],
    ["services", "Services"],
    ["work", "Work"],
    ["industries", "Industries"],
  ];

  return (
    <nav className="nav" style={scrolled ? { background: 'rgba(10,11,13,0.78)' } : undefined}>
      <div className="nav-brand" onClick={() => go("home")}>
        <BrandMark height={56}/>
      </div>
      <div className="nav-links">
        {links.map(([key, label]) => (
          <button key={key}
                  className={`nav-link ${page === key ? 'active' : ''}`}
                  onClick={() => go(key)}>{label}</button>
        ))}
        <button className={`nav-cta ${page === 'contact' ? 'active' : ''}`}
                onClick={() => go("contact")}>
          <span className="nav-cta-dot"/>
          Initiate inquiry
        </button>
      </div>
    </nav>
  );
}

function Footer({ go }) {
  return (
    <footer className="footer">
      <div className="footer-brand">
        <BrandMark height={120}/>
        <p className="footer-tagline" style={{marginTop: 0}}>Decoded signal.<br/>Reconstructed with rigor.</p>
        <span className="mono">Operating under mutual non-disclosure as standard practice.</span>
      </div>

      <div className="footer-col">
        <div className="footer-col-title">Capabilities</div>
        <ul>
          <li><a onClick={() => go("services")}>Flight Animation</a></li>
          <li><a onClick={() => go("services")}>Data Analysis</a></li>
          <li><a onClick={() => go("services")}>Litigation Support</a></li>
          <li><a onClick={() => go("services")}>Investigation</a></li>
          <li><a onClick={() => go("services")}>Media Graphics</a></li>
        </ul>
      </div>

      <div className="footer-col">
        <div className="footer-col-title">Sectors</div>
        <ul>
          <li><a onClick={() => go("industries")}>Legal & Litigation</a></li>
          <li><a onClick={() => go("industries")}>Investigation Authorities</a></li>
          <li><a onClick={() => go("industries")}>Airlines & Operators</a></li>
          <li><a onClick={() => go("industries")}>Media & Broadcast</a></li>
          <li><a onClick={() => go("industries")}>Insurers & Regulators</a></li>
        </ul>
      </div>

      <div className="footer-col">
        <div className="footer-col-title">Contact</div>
        <ul>
          <li><a onClick={() => go("contact")}>Inquiry form</a></li>
          <li><a>flightreconstructiongroup@gmail.com</a></li>
        </ul>
      </div>

      <div className="footer-bottom">
        <span>© 2026 · Flight Reconstruction Group</span>
        <span>All rights reserved</span>
      </div>
    </footer>
  );
}

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