/* ─────────────────────────────────────────────
   AcquireNow — Shared React Nav
   Used by all secondary pages (services, about,
   case-studies, industries, contact, book-a-call)
   Rendered into <div id="nav-root"></div>
───────────────────────────────────────────── */
(function () {
  const { useState, useEffect, useRef } = React;

  const LINKS = [
    { label: 'Services',      href: 'services.html' },
    { label: 'Case Studies',  href: 'case-studies.html' },
    { label: 'Industries',    href: 'industries.html' },
    { label: 'About',         href: 'about.html' },
    { label: 'Contact',       href: 'contact.html' },
  ];

  function SiteNav() {
    const [open, setOpen]       = useState(false);
    const [mobile, setMobile]   = useState(window.innerWidth < 900);
    const navRef                = useRef(null);

    const page = (window.location.pathname.split('/').pop() || '')
      .replace('.html', '') || 'home';

    /* track viewport width */
    useEffect(() => {
      const fn = () => setMobile(window.innerWidth < 900);
      window.addEventListener('resize', fn);
      return () => window.removeEventListener('resize', fn);
    }, []);

    /* close mobile menu on outside click */
    useEffect(() => {
      if (!open) return;
      const fn = (e) => {
        if (navRef.current && !navRef.current.contains(e.target)) setOpen(false);
      };
      document.addEventListener('mousedown', fn);
      return () => document.removeEventListener('mousedown', fn);
    }, [open]);

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

    const isActive = (href) => page === href.replace('.html', '');

    /* ── styles ── */
    const linkStyle = (href) => ({
      color: isActive(href) ? '#fff' : 'rgba(255,255,255,0.68)',
      fontSize: 13,
      fontFamily: 'Inter, sans-serif',
      fontWeight: isActive(href) ? 500 : 400,
      letterSpacing: '0.01em',
      padding: '7px 14px',
      borderRadius: 100,
      background: isActive(href) ? 'rgba(255,255,255,0.10)' : 'transparent',
      textDecoration: 'none',
      transition: 'all 0.2s',
      whiteSpace: 'nowrap',
    });

    const mobileLinkStyle = (href) => ({
      display: 'block',
      color: isActive(href) ? '#fff' : 'rgba(255,255,255,0.75)',
      fontSize: 17,
      fontFamily: 'Inter, sans-serif',
      fontWeight: isActive(href) ? 600 : 400,
      padding: '14px 20px',
      borderRadius: 10,
      background: isActive(href) ? 'rgba(255,255,255,0.09)' : 'transparent',
      textDecoration: 'none',
      borderBottom: '1px solid rgba(255,255,255,0.06)',
      transition: 'background 0.15s',
    });

    return (
      <nav ref={navRef} style={{
        position: 'fixed', top: 0, left: 0, right: 0, zIndex: 200,
        height: 68,
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        padding: mobile ? '0 20px' : '0 48px',
        background: 'rgba(10,14,46,0.90)',
        backdropFilter: 'blur(22px) saturate(180%)',
        WebkitBackdropFilter: 'blur(22px) saturate(180%)',
        borderBottom: '1px solid rgba(255,255,255,0.07)',
        boxSizing: 'border-box',
      }}>

        {/* Logo */}
        <a href="index.html" style={{ display: 'flex', alignItems: 'center', flexShrink: 0 }}>
          <img
            src="acquirenow logo white main.png"
            alt="AcquireNow"
            style={{ height: mobile ? 36 : 42, filter: 'brightness(0) invert(1)', display: 'block' }}
          />
        </a>

        {/* Desktop links */}
        {!mobile && (
          <div style={{ display: 'flex', gap: 2, alignItems: 'center' }}>
            {LINKS.map(l => (
              <a
                key={l.label}
                href={l.href}
                style={linkStyle(l.href)}
                onMouseEnter={e => {
                  e.currentTarget.style.background = 'rgba(255,255,255,0.10)';
                  e.currentTarget.style.color = '#fff';
                }}
                onMouseLeave={e => {
                  e.currentTarget.style.background = isActive(l.href) ? 'rgba(255,255,255,0.10)' : 'transparent';
                  e.currentTarget.style.color = isActive(l.href) ? '#fff' : 'rgba(255,255,255,0.68)';
                }}
              >{l.label}</a>
            ))}
          </div>
        )}

        {/* Right side */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, flexShrink: 0 }}>
          {/* Book a Call — always visible */}
          <a
            href="book-a-discovery-call.html"
            style={{
              padding: mobile ? '7px 16px' : '9px 22px',
              borderRadius: 100,
              border: '1.5px solid rgba(255,255,255,0.80)',
              color: '#000',
              background: '#fff',
              fontSize: mobile ? 12 : 13,
              fontWeight: 500,
              fontFamily: 'Inter, sans-serif',
              letterSpacing: '0.01em',
              textDecoration: 'none',
              whiteSpace: 'nowrap',
              transition: 'all 0.2s',
            }}
            onMouseEnter={e => { e.currentTarget.style.background = 'rgba(255,255,255,0.88)'; }}
            onMouseLeave={e => { e.currentTarget.style.background = '#fff'; }}
          >Book a Call</a>

          {/* Hamburger — mobile only */}
          {mobile && (
            <button
              onClick={() => setOpen(!open)}
              aria-label={open ? 'Close menu' : 'Open menu'}
              style={{
                background: 'none',
                border: 'none',
                cursor: 'pointer',
                padding: '6px 4px',
                display: 'flex',
                flexDirection: 'column',
                gap: 5,
                alignItems: 'center',
                justifyContent: 'center',
                marginLeft: 4,
              }}
            >
              <span style={{
                display: 'block', width: 22, height: 2, borderRadius: 2,
                background: '#fff', transition: 'all 0.25s ease',
                transform: open ? 'rotate(45deg) translate(5px, 5px)' : 'none',
              }} />
              <span style={{
                display: 'block', width: 22, height: 2, borderRadius: 2,
                background: '#fff', transition: 'all 0.25s ease',
                opacity: open ? 0 : 1,
                transform: open ? 'scaleX(0)' : 'none',
              }} />
              <span style={{
                display: 'block', width: 22, height: 2, borderRadius: 2,
                background: '#fff', transition: 'all 0.25s ease',
                transform: open ? 'rotate(-45deg) translate(5px, -5px)' : 'none',
              }} />
            </button>
          )}
        </div>

        {/* Mobile drawer */}
        {mobile && open && (
          <div style={{
            position: 'absolute',
            top: 68,
            left: 0,
            right: 0,
            background: 'rgba(8,11,38,0.98)',
            backdropFilter: 'blur(24px)',
            WebkitBackdropFilter: 'blur(24px)',
            borderBottom: '1px solid rgba(255,255,255,0.08)',
            padding: '12px 16px 28px',
            display: 'flex',
            flexDirection: 'column',
            gap: 2,
            boxShadow: '0 24px 48px rgba(0,0,0,0.5)',
            animation: 'navSlideDown 0.22s cubic-bezier(0.22,1,0.36,1)',
          }}>
            {LINKS.map(l => (
              <a
                key={l.label}
                href={l.href}
                style={mobileLinkStyle(l.href)}
                onMouseEnter={e => { e.currentTarget.style.background = 'rgba(255,255,255,0.07)'; }}
                onMouseLeave={e => { e.currentTarget.style.background = isActive(l.href) ? 'rgba(255,255,255,0.09)' : 'transparent'; }}
              >{l.label}</a>
            ))}
            <a
              href="book-a-discovery-call.html"
              style={{
                marginTop: 16,
                display: 'block',
                textAlign: 'center',
                padding: '14px 20px',
                borderRadius: 100,
                background: '#fff',
                color: '#0A0E2E',
                fontSize: 15,
                fontWeight: 700,
                fontFamily: 'Inter, sans-serif',
                textDecoration: 'none',
                letterSpacing: '0.01em',
              }}
            >Book a Free Call →</a>
          </div>
        )}

        <style>{`
          @keyframes navSlideDown {
            from { opacity: 0; transform: translateY(-8px); }
            to   { opacity: 1; transform: translateY(0); }
          }
        `}</style>
      </nav>
    );
  }

  /* Render into #nav-root on each secondary page */
  const root = document.getElementById('nav-root');
  if (root) {
    ReactDOM.createRoot(root).render(React.createElement(SiteNav));
  }
})();