/* Header, mobile menu, footer for the Sweep site. */
const { Button } = window.SweepGeophysicalDesignSystem_5187bc;

const NAV = [
  { id: 'home', label: 'Home' },
  { id: 'services', label: 'Services' },
  { id: 'faq', label: 'FAQ' },
  { id: 'contact', label: 'Contact' },
];

function Brand({ navigate }) {
  return (
    <div className="brand" onClick={() => navigate('home')}>
      <img src="./assets/logo-mark.svg" alt="Sweep Geophysical" />
      <span className="brand__name">Sweep<small>Geophysical</small></span>
    </div>
  );
}

function Header({ route, navigate, scrolled, mobileOpen, setMobileOpen }) {
  const I = window.Icons;
  return (
    <header className={'hdr' + (scrolled || route !== 'home' ? ' hdr--scrolled' : '')}>
      <div className="wrap wrap--wide hdr__inner">
        <Brand navigate={navigate} />
        <nav className="nav">
          {NAV.map((n) => (
            <span key={n.id}
              className={'nav__link' + (route === n.id ? ' nav__link--active' : '')}
              onClick={() => navigate(n.id)}>{n.label}</span>
          ))}
        </nav>
        <div className="hdr__cta">
          <Button size="sm" variant="primary" onClick={() => navigate('contact')}>Request Quote</Button>
          <button className="hdr__burger" aria-label="Menu" onClick={() => setMobileOpen(!mobileOpen)}>
            {mobileOpen ? <I.close size={22} /> : <I.menu size={22} />}
          </button>
        </div>
      </div>
    </header>
  );
}

function MobileMenu({ route, navigate, close }) {
  return (
    <div className="mmenu">
      {NAV.map((n) => (
        <span key={n.id}
          className={'mmenu__link' + (route === n.id ? ' mmenu__link--active' : '')}
          onClick={() => { navigate(n.id); close(); }}>{n.label}</span>
      ))}
      <div style={{ marginTop: 'var(--space-6)' }}>
        <Button variant="primary" fullWidth onClick={() => { navigate('contact'); close(); }}>Request Quote</Button>
      </div>
    </div>
  );
}

function Footer({ navigate }) {
  const I = window.Icons;
  const Social = ({ d }) => (
    <a><svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor">{d}</svg></a>
  );
  return (
    <footer className="footer">
      <div className="wrap wrap--wide">
        <div className="footer__top">
          <div className="footer__col">
            <div className="brand" onClick={() => navigate('home')} style={{ marginBottom: 0 }}>
              <img src="./assets/logo-mark.svg" alt="" style={{ width: 40, height: 40 }} />
              <span className="brand__name">Sweep<small>Geophysical</small></span>
            </div>
            <p className="footer__about">Precision geophysical surveys and subsurface investigation for engineering, environmental and energy teams.</p>
            <div className="footer__social">
              <a aria-label="LinkedIn"><svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor"><path d="M4.98 3.5A2.5 2.5 0 1 0 5 8.5a2.5 2.5 0 0 0-.02-5ZM3 9h4v12H3V9Zm6 0h3.8v1.7h.05c.53-.95 1.83-1.95 3.77-1.95C20.4 8.75 22 10.6 22 14v7h-4v-6.2c0-1.48-.03-3.4-2.07-3.4-2.07 0-2.39 1.62-2.39 3.3V21H9V9Z"/></svg></a>
              <a aria-label="X"><svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor"><path d="M18.9 2H22l-7 8 8.2 12h-6.4l-5-7.3L6 22H2.9l7.5-8.6L2.5 2H9l4.5 6.7L18.9 2Zm-1.1 18h1.7L7.3 3.8H5.5L17.8 20Z"/></svg></a>
              <a aria-label="Email" onClick={() => navigate('contact')}><I.mail size={18} /></a>
            </div>
          </div>
          <div className="footer__col">
            <h4>Company</h4>
            <a onClick={() => navigate('home')}>Home</a>
            <a onClick={() => navigate('services')}>Services</a>
            <a onClick={() => navigate('faq')}>FAQ</a>
            <a onClick={() => navigate('contact')}>Contact</a>
          </div>
          <div className="footer__col">
            <h4>Services</h4>
            <a onClick={() => navigate('services')}>Ground Penetrating Radar</a>
            <a onClick={() => navigate('services')}>Utility Mapping</a>
            <a onClick={() => navigate('services')}>Subsurface Investigation</a>
            <a onClick={() => navigate('services')}>Environmental Analysis</a>
          </div>
          <div className="footer__col">
            <h4>Contact</h4>
            <p>1400 Survey Park Dr,<br />Suite 220, Denver, CO</p>
            <p>hello@sweepgeophysical.com</p>
            <p>(555) 480-2200</p>
          </div>
        </div>
        <div className="footer__bottom">
          <span>© {new Date().getFullYear()} Sweep Geophysical. All rights reserved.</span>
          <span>Privacy · Terms · Safety</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Header, MobileMenu, Footer, NAV });