/* Shared chrome: Navbar + Footer + page wrapper */
(function () {

  function Navbar({ current, onNavigate }) {
    const [scrolled, setScrolled] = React.useState(false);
    React.useEffect(() => {
      const onScroll = () => setScrolled(window.scrollY > 20);
      window.addEventListener('scroll', onScroll);
      return () => window.removeEventListener('scroll', onScroll);
    }, []);
    const services = [
      { id: 'tribe',      label: 'Tribe',      sub: 'Fractional IT Department' },
      { id: 'jane',       label: 'Jane',       sub: 'AI Employee' },
      { id: 'managed',    label: 'Managed',    sub: 'IT Services' },
      { id: 'consulting', label: 'Consulting', sub: 'AI / IT Services' },
      { id: 'itplanb',    label: 'ITplanB',    sub: 'Bad IT Manager', external: 'https://itplanb.com' },
    ];
    const serviceIds = new Set(services.map(s => s.id));
    const servicesActive = serviceIds.has(current);
    const [servicesOpen, setServicesOpen] = React.useState(false);
    const servicesRef = React.useRef(null);
    React.useEffect(() => {
      if (!servicesOpen) return;
      const close = (e) => { if (servicesRef.current && !servicesRef.current.contains(e.target)) setServicesOpen(false); };
      const esc = (e) => { if (e.key === 'Escape') setServicesOpen(false); };
      document.addEventListener('mousedown', close);
      document.addEventListener('keydown', esc);
      return () => { document.removeEventListener('mousedown', close); document.removeEventListener('keydown', esc); };
    }, [servicesOpen]);

    const links = [
      { id: 'home', label: 'Home' },
      { id: 'about', label: 'About' },
    ];

    return (
      <nav className={`nav ${scrolled ? 'scrolled' : ''}`}>
      <div className="nav-inner">
        <a className="nav-brand" href="#" onClick={(e) => {e.preventDefault();onNavigate('home');}}>
          <img src="public/iternative-lockup.png" alt="Powered by ITernative" />
        </a>
        <div className="nav-links">
          <a className={`nav-link ${current === 'home' ? 'active' : ''}`} href="#"
             onClick={(e) => {e.preventDefault();onNavigate('home');}}>Home</a>

          <div className={`nav-services ${servicesOpen ? 'open' : ''}`} ref={servicesRef}>
            <button
              type="button"
              className={`nav-link nav-services-btn ${servicesActive ? 'active' : ''}`}
              onClick={() => setServicesOpen(o => !o)}
              aria-expanded={servicesOpen}
              aria-haspopup="true">
              Services <span className="nav-services-caret" aria-hidden="true">▾</span>
            </button>
            <div className="nav-services-menu" role="menu">
              {services.map(s => s.external ? (
                <a key={s.id} role="menuitem"
                   className="nav-services-item"
                   href={s.external}
                   target="_blank" rel="noopener noreferrer"
                   onClick={() => setServicesOpen(false)}>
                  <span className="nav-services-item-name">{s.label} <span className="nav-services-item-ext" aria-hidden="true">↗</span></span>
                  <span className="nav-services-item-sub mono">{s.sub}</span>
                </a>
              ) : (
                <a key={s.id} role="menuitem"
                   className={`nav-services-item ${current === s.id ? 'active' : ''}`}
                   href="#"
                   onClick={(e) => { e.preventDefault(); setServicesOpen(false); onNavigate(s.id); }}>
                  <span className="nav-services-item-name">{s.label}</span>
                  <span className="nav-services-item-sub mono">{s.sub}</span>
                </a>
              ))}
            </div>
          </div>

          <a className={`nav-link ${current === 'about' ? 'active' : ''}`} href="#"
             onClick={(e) => {e.preventDefault();onNavigate('about');}}>About</a>

          <button className="btn btn-primary nav-cta" onClick={() => onNavigate('contact')}>
            Talk to us <span className="arrow">→</span>
          </button>
        </div>
      </div>
    </nav>);

  }

  function Footer({ onNavigate }) {
    return (
      <footer className="footer">
      <div className="container">
        <div className="footer-grid">
          <div className="footer-col">
            <a href="#" onClick={(e) => {e.preventDefault();onNavigate('home');}} style={{ display: 'inline-flex', alignItems: 'center', gap: 10, marginBottom: 18 }}>
              <img src="public/iternative-logo.png" alt="ITernative" style={{ height: 24 }} />
              <span className="mono" style={{ fontSize: 13 }}></span>
            </a>
            <p style={{ fontSize: 14, maxWidth: 360, color: 'var(--fg-soft)' }}>
              Your IT department, without building one. Operating since 2014 from Orlando, FL.
            </p>
          </div>
          <div className="footer-col">
            <h5>Services</h5>
            <ul>
              <li><a href="#" onClick={(e) => {e.preventDefault();onNavigate('tribe');}}>Tribe — Fractional IT</a></li>
              <li><a href="#" onClick={(e) => {e.preventDefault();onNavigate('jane');}}>Jane — AI Employee</a></li>
              <li><a href="#" onClick={(e) => {e.preventDefault();onNavigate('managed');}}>Managed IT</a></li>
              <li><a href="#" onClick={(e) => {e.preventDefault();onNavigate('consulting');}}>Consulting & AI</a></li>
              <li><a href="https://itplanb.com" target="_blank" rel="noopener noreferrer">ITplanB ↗</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h5>Company</h5>
            <ul>
              <li><a href="#" onClick={(e) => {e.preventDefault();onNavigate('home');}}>About</a></li>
              <li><a href="#" onClick={(e) => {e.preventDefault();onNavigate('contact');}}>Contact</a></li>
              <li><a href="#" onClick={(e) => e.preventDefault()}>Careers</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h5>Connect</h5>
            <ul>
              <li><a href="#" onClick={(e) => e.preventDefault()}>LinkedIn</a></li>
              <li><a href="mailto:hello@iternative.com">hello@iternative.com</a></li>
              <li><a href="#" onClick={(e) => e.preventDefault()}>Orlando, FL</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© {new Date().getFullYear()} ITERNATIVE — RESERVED</span>
          <span>v2.0 · Reimagined</span>
        </div>
      </div>
    </footer>);

  }

  window.Chrome = { Navbar, Footer };
})();