// Router + Header + Footer + ContactModal + shared UI primitives

// ------------ Router (hash-based) ------------
const ROUTES = {
  '/':               { title: 'Aurora Network Solutions — Secure. Connected. Hassle-Free.', label: 'Home' },
  '/services':       { title: 'Services — Aurora Network Solutions', label: 'Services' },
  '/services/networking':  { title: 'Network Consulting & Tune-ups — Aurora Network Solutions', label: 'Networking' },
  '/services/cameras':     { title: 'Camera System Support — Aurora Network Solutions', label: 'Cameras' },
  '/services/websites':    { title: 'Website Design — Aurora Network Solutions', label: 'Websites' },
  '/services/email':       { title: 'Business Email & IT — Aurora Network Solutions', label: 'Email' },
  '/about':          { title: 'About — Aurora Network Solutions', label: 'About' },
  '/portfolio':      { title: 'Portfolio — Aurora Network Solutions', label: 'Portfolio' },
  '/faq':            { title: 'FAQ — Aurora Network Solutions', label: 'FAQ' },
  '/contact':        { title: 'Contact — Aurora Network Solutions', label: 'Contact' },
};

function useRoute() {
  const [route, setRoute] = React.useState(() => parseRoute());
  React.useEffect(() => {
    const onHash = () => setRoute(parseRoute());
    window.addEventListener('hashchange', onHash);
    return () => window.removeEventListener('hashchange', onHash);
  }, []);
  // update title
  React.useEffect(() => {
    const meta = ROUTES[route.path] || ROUTES['/'];
    if (meta) document.title = meta.title;
    // scroll to top on route change
    window.scrollTo({ top: 0, left: 0, behavior: 'instant' in window ? 'instant' : 'auto' });
  }, [route.path, route.query]);
  return route;
}
function parseRoute() {
  const raw = (window.location.hash || '#/').replace(/^#/, '');
  const [pathPart, queryPart = ''] = raw.split('?');
  const path = pathPart || '/';
  const q = new URLSearchParams(queryPart);
  const query = Object.fromEntries(q.entries());
  return { path, query, raw };
}
function navigate(path, query = {}) {
  let q = '';
  const params = new URLSearchParams(query);
  if ([...params].length) q = '?' + params.toString();
  window.location.hash = '#' + path + q;
}
function Link({ to, query, className = '', children, onClick, ...props }) {
  const handle = (e) => {
    if (e.metaKey || e.ctrlKey) return;
    e.preventDefault();
    onClick && onClick(e);
    navigate(to, query);
  };
  let q = '';
  if (query) { const u = new URLSearchParams(query); if ([...u].length) q = '?' + u.toString(); }
  return <a href={'#' + to + q} className={className} onClick={handle} {...props}>{children}</a>;
}
window.useRoute = useRoute;
window.navigate = navigate;
window.Link = Link;
window.ROUTES = ROUTES;

// ------------ Brand mark ------------
function BrandMark({ withWordmark = true, size = 32 }) {
  return (
    <Link to="/" className="brand" aria-label="Aurora Network Solutions home">
      <img src="assets/logo-mark-128.png" alt="" width={size} height={size} />
      {withWordmark && (
        <span className="wordmark">
          AURORA
          <span className="sub">NETWORK SOLUTIONS</span>
        </span>
      )}
    </Link>
  );
}
window.BrandMark = BrandMark;

// ------------ Header ------------
const SERVICE_LINKS = [
  { path: '/services/websites',   label: 'Websites',        icon: 'browser', desc: 'Modern, hand-built websites for small business.' },
  { path: '/services/email',      label: 'Business Email & IT', icon: 'mail', desc: 'Google Workspace, Microsoft 365, and IT support.' },
  { path: '/services/networking', label: 'Network Consulting', icon: 'wifi', desc: 'Tune-ups, dead-zone fixes, and honest advice on UniFi®.' },
  { path: '/services/cameras',    label: 'Camera Support',  icon: 'camera', desc: 'Care for existing UniFi Protect® systems.' },
];

function Header({ onContact }) {
  const route = useRoute();
  const [mobileOpen, setMobileOpen] = React.useState(false);
  const [servicesOpen, setServicesOpen] = React.useState(false);

  React.useEffect(() => { setMobileOpen(false); setServicesOpen(false); }, [route.path]);

  return (
    <>
      <header className="site-header">
        <div className="container inner">
          <BrandMark />
          <nav className="nav-links" aria-label="Primary">
            <div
              className={`nav-dropdown ${servicesOpen ? 'is-open' : ''}`}
              onMouseLeave={() => setServicesOpen(false)}
            >
              <button
                className={`nav-link ${route.path.startsWith('/services') ? 'is-active' : ''}`}
                onMouseEnter={() => setServicesOpen(true)}
                onClick={() => setServicesOpen(s => !s)}
                aria-haspopup="true"
                aria-expanded={servicesOpen}
              >
                Services <Icon name="chevron-down" size={14} />
              </button>
              <div className="nav-dropdown-panel" role="menu">
                {SERVICE_LINKS.map(s => (
                  <Link to={s.path} key={s.path} className="nav-dd-item" role="menuitem">
                    <div className="icon-tile"><Icon name={s.icon} size={20} /></div>
                    <div>
                      <div className="title">{s.label}</div>
                      <div className="desc">{s.desc}</div>
                    </div>
                  </Link>
                ))}
                <Link to="/services" className="nav-dd-item" style={{gridColumn:'1 / -1', justifyContent:'space-between'}}>
                  <div>
                    <div className="title">All services</div>
                    <div className="desc">See the full offering side by side.</div>
                  </div>
                  <Icon name="arrow-right" size={18} />
                </Link>
              </div>
            </div>
            <Link to="/portfolio" className={`nav-link ${route.path==='/portfolio' ? 'is-active':''}`}>Portfolio</Link>
            <Link to="/about" className={`nav-link ${route.path==='/about' ? 'is-active':''}`}>About</Link>
            <Link to="/faq" className={`nav-link ${route.path==='/faq' ? 'is-active':''}`}>FAQ</Link>
            <Link to="/contact" className={`nav-link ${route.path==='/contact' ? 'is-active':''}`}>Contact</Link>
          </nav>
          <div className="nav-cta">
            <a href="tel:+19192101601" className="nav-link" style={{display:'inline-flex'}} aria-label="Call Aurora">
              <Icon name="phone" size={14} /> <span className="btn-cta-text">(919) 210-1601</span>
            </a>
            <button className="btn btn--primary btn--sm" onClick={onContact}>
              <span className="btn-cta-text">Free Consultation</span>
              <Icon name="arrow-up-right" size={14} />
            </button>
            <button className="nav-link menu-toggle" aria-label="Toggle menu" onClick={() => setMobileOpen(m => !m)}>
              <Icon name={mobileOpen ? 'x' : 'menu'} size={20} />
            </button>
          </div>
        </div>
      </header>

      <div className={`mobile-menu ${mobileOpen ? 'is-open' : ''}`}>
        <Link to="/" className="mlink">Home <Icon name="arrow-up-right" size={18} /></Link>
        {SERVICE_LINKS.map(s => (
          <Link key={s.path} to={s.path} className="mlink">{s.label} <Icon name="arrow-up-right" size={18} /></Link>
        ))}
        <Link to="/services" className="mlink">All Services <Icon name="arrow-up-right" size={18} /></Link>
        <Link to="/portfolio" className="mlink">Portfolio <Icon name="arrow-up-right" size={18} /></Link>
        <Link to="/about" className="mlink">About <Icon name="arrow-up-right" size={18} /></Link>
        <Link to="/faq" className="mlink">FAQ <Icon name="arrow-up-right" size={18} /></Link>
        <Link to="/contact" className="mlink">Contact <Icon name="arrow-up-right" size={18} /></Link>
        <div style={{marginTop: 24, display: 'flex', flexDirection: 'column', gap: 12}}>
          <button className="btn btn--primary btn--lg" onClick={() => { setMobileOpen(false); onContact(); }}>
            Schedule a Free Consultation
          </button>
          <a className="btn btn--secondary btn--lg" href="tel:+19192101601">
            <Icon name="phone" size={16} /> (919) 210-1601
          </a>
        </div>
      </div>
    </>
  );
}
window.Header = Header;

// ------------ Footer ------------
function Footer({ onContact }) {
  return (
    <footer className="site-footer">
      <div className="starfield" aria-hidden style={{opacity:0.4}}>
        <span className="star" style={{ left: '8%', top: '20%', width: 2, height: 2, animationDuration: '3s' }} />
        <span className="star" style={{ left: '92%', top: '40%', width: 1, height: 1, animationDuration: '5s' }} />
        <span className="star" style={{ left: '70%', top: '70%', width: 1.5, height: 1.5, animationDuration: '4s' }} />
        <span className="star" style={{ left: '20%', top: '80%', width: 1, height: 1, animationDuration: '6s' }} />
      </div>
      <div className="container">
        <div className="footer-grid">
          <div>
            <BrandMark />
            <p className="footer-blurb">
              Website design, small-business IT, and independent UniFi® network consulting out of Raleigh. Locally owned. Fully insured. No call centers.
            </p>
            <div className="row gap-3">
              <a className="btn btn--secondary btn--sm" href="tel:+19192101601"><Icon name="phone" size={14} /> Call</a>
              <button className="btn btn--secondary btn--sm" onClick={onContact}><Icon name="mail" size={14} /> Email</button>
            </div>
          </div>
          <div>
            <h5>Services</h5>
            <Link to="/services/websites">Website Design</Link>
            <Link to="/services/email">Business Email &amp; IT</Link>
            <Link to="/services/networking">Network Consulting</Link>
            <Link to="/services/cameras">Camera Support</Link>
            <Link to="/services">All services →</Link>
          </div>
          <div>
            <h5>Company</h5>
            <Link to="/about">About</Link>
            <Link to="/portfolio">Portfolio</Link>
            <Link to="/faq">FAQ</Link>
            <Link to="/contact">Contact</Link>
          </div>
          <div>
            <h5>Service area</h5>
            <a>Raleigh, NC</a>
            <a>Durham, NC</a>
            <a>Cary &amp; Apex</a>
            <a>Wake Forest</a>
            <a>Chapel Hill</a>
            <a>Holly Springs</a>
            <span className="dim" style={{fontSize:12, marginTop:8, display:'inline-block'}}>Will travel for the right job.</span>
          </div>
        </div>
        <div className="footer-meta">
          <div className="legal">
            © 2026 Aurora Network Solutions LLC · Raleigh, NC · Fully insured.<br />
            Independent service provider — not affiliated with or endorsed by Ubiquiti Inc. UniFi® and UniFi Protect® are registered trademarks of their respective owners.
          </div>
          <div className="socials">
            <a href="https://www.facebook.com/profile.php?id=61579286994068" aria-label="Facebook" target="_blank" rel="noopener"><Icon name="facebook" size={18} /></a>
            <a href="https://www.instagram.com/auroranetworksolutions/" aria-label="Instagram" target="_blank" rel="noopener"><Icon name="instagram" size={18} /></a>
          </div>
        </div>
      </div>
    </footer>
  );
}
window.Footer = Footer;