// Shared layout primitives + nav + footer
const { useState, useEffect, useRef } = React;

const LOGO = 'assets/logo-cropped.png';

const NAV_ITEMS = [
  { id: 'home', label: 'Home' },
  { id: 'services', label: 'Services' },
  { id: 'about', label: 'About' },
  { id: 'system', label: 'CatalystHR System' },
  { id: 'contact', label: 'Contact' },
];

function Arrow({ size = 14 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="arrow">
      <path d="M7 17L17 7M17 7H8M17 7V16" />
    </svg>
  );
}

function ArrowRight({ size = 14 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="arrow">
      <path d="M5 12h14M13 5l7 7-7 7" />
    </svg>
  );
}

function Nav({ page, setPage }) {
  const [menuOpen, setMenuOpen] = useState(false);

  // Lock body scroll when menu is open
  useEffect(() => {
    document.body.style.overflow = menuOpen ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [menuOpen]);

  const handleNav = (id) => {
    setPage(id);
    setMenuOpen(false);
  };

  return (
    <header className="nav">
      <div className="nav-inner">
        <div className="nav-logo" onClick={() => handleNav('home')}>
          <img src={LOGO} alt="CatalystHR Consulting" />
        </div>
        <nav className="nav-links">
          {NAV_ITEMS.slice(0, 4).map(item => (
            <div
              key={item.id}
              className={`nav-link ${page === item.id ? 'active' : ''}`}
              onClick={() => setPage(item.id)}
            >
              {item.label}
            </div>
          ))}
        </nav>
        <button className="nav-cta" onClick={() => setPage('contact')}>
          Book a discovery call <Arrow />
        </button>
        <button
          className={`nav-burger ${menuOpen ? 'is-open' : ''}`}
          onClick={() => setMenuOpen(!menuOpen)}
          aria-label={menuOpen ? 'Close menu' : 'Open menu'}
          aria-expanded={menuOpen}
        >
          <span></span>
          <span></span>
          <span></span>
        </button>
      </div>
      <div className={`nav-mobile-panel ${menuOpen ? 'is-open' : ''}`}>
        <div className="nav-mobile-inner">
          {NAV_ITEMS.map(item => (
            <div
              key={item.id}
              className={`nav-mobile-link ${page === item.id ? 'active' : ''}`}
              onClick={() => handleNav(item.id)}
            >
              {item.label}
            </div>
          ))}
          <button className="nav-mobile-cta" onClick={() => handleNav('contact')}>
            Book a discovery call <Arrow />
          </button>
          <div className="nav-mobile-foot">
            <a href="mailto:hello@catalysthr.co">hello@catalysthr.co</a>
            <a href="https://www.linkedin.com/company/catalyst-hr-consulting-canada" target="_blank" rel="noreferrer">LinkedIn ↗</a>
          </div>
        </div>
      </div>
    </header>
  );
}

function Footer({ setPage }) {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-grid">
          <div className="footer-brand">
            <img src={LOGO} alt="CatalystHR Consulting" />
            <p>A boutique human resources and leadership consulting practice helping Canadian small and mid-sized businesses build workplaces people stay in.</p>
          </div>
          <div>
            <h5>Services</h5>
            <ul className="footer-links">
              <li onClick={() => setPage('services')}>Fractional HR</li>
              <li onClick={() => setPage('services')}>On-demand HR</li>
              <li onClick={() => setPage('services')}>Labour Relations</li>
              <li onClick={() => setPage('services')}>Workplace Investigations</li>
            </ul>
          </div>
          <div>
            <h5>Company</h5>
            <ul className="footer-links">
              <li onClick={() => setPage('about')}>About</li>
              <li onClick={() => setPage('system')}>CatalystHR System</li>
              <li onClick={() => setPage('contact')}>Contact</li>
            </ul>
          </div>
          <div>
            <h5>Contact</h5>
            <ul className="footer-links">
              <li>hello@catalysthr.co</li>
              <li>Serving clients Canada-wide</li>
              <li><a href="https://www.linkedin.com/company/catalyst-hr-consulting-canada" target="_blank" rel="noreferrer">LinkedIn ↗</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <div>© 2026 Catalyst HR Consulting. All rights reserved.</div>
          <div>Made with care in Canada 🍁</div>
        </div>
      </div>
    </footer>
  );
}

// Reveal-on-scroll hook
function useReveal() {
  useEffect(() => {
    const els = document.querySelectorAll('.reveal');
    const io = new IntersectionObserver(entries => {
      entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('in'); });
    }, { threshold: 0.12 });
    els.forEach(el => io.observe(el));
    return () => io.disconnect();
  });
}

Object.assign(window, { Nav, Footer, Arrow, ArrowRight, useReveal, LOGO, NAV_ITEMS });