// Sticky 90px nav. Logo left, links centered, login + CTA right.
// Multi-page version: active link highlighted; Services is a dropdown.
function Nav({ active = 'home', showClientLogin = true, primaryCtaLabel = 'Book a Free Call' }) {
  const [scrolled, setScrolled] = React.useState(false);
  const [servicesOpen, setServicesOpen] = React.useState(false);
  const [mobileOpen, setMobileOpen] = React.useState(false);
  const closeTimer = React.useRef(null);

  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  React.useEffect(() => {
    document.body.style.overflow = mobileOpen ? 'hidden' : '';
  }, [mobileOpen]);

  const openServices = () => {
    if (closeTimer.current) { clearTimeout(closeTimer.current); closeTimer.current = null; }
    setServicesOpen(true);
  };
  const scheduleClose = () => {
    closeTimer.current = setTimeout(() => setServicesOpen(false), 140);
  };

  const serviceItems = [
    { key: 'monthly',  label: 'Monthly Bookkeeping', href: 'monthly-bookkeeping.html', blurb: 'Clean books and reports every month.' },
    { key: 'cleanup',  label: 'Cleanup & Catch-Up',  href: 'cleanup.html',             blurb: 'Get your books back on track.' },
    { key: 'advisory', label: 'Advisory',             href: 'advisory.html',            blurb: 'Strategy and insights, monthly.' },
  ];

  // Primary nav — kept short on purpose. Service Areas + Contact live in the footer / CTA.
  const links = [
    { key: 'pricing',      label: 'Pricing', href: 'pricing.html' },
    { key: 'about',        label: 'About',   href: 'about.html' },
    { key: 'testimonials', label: 'Reviews', href: 'reviews.html' },
  ];

  // Mobile sheet includes everything.
  const mobileExtras = [
    { key: 'contact', label: 'Contact', href: 'contact.html' },
  ];

  const isServicesActive = ['monthly', 'cleanup', 'advisory'].includes(active);

  const linkStyle = (isActive) => ({
    fontSize: 14, fontWeight: isActive ? 600 : 500,
    color: isActive ? '#3F8074' : '#163F34',
    textDecoration: 'none', letterSpacing: '-0.005em',
    padding: '6px 0', position: 'relative',
    transition: 'color .2s',
  });

  return (
    <nav className="ck-nav" style={{
      position: 'sticky', top: 0, zIndex: 50,
      background: scrolled ? 'rgba(255,255,255,0.97)' : '#ffffff',
      borderBottom: '1px solid #e6efee',
      transition: 'background .25s, border-color .25s',
      height: 90,
    }}>
      <div className="ck-nav-inner" style={{
        maxWidth: 1280, margin: '0 auto', height: '100%',
        padding: '0 32px', display: 'flex', alignItems: 'center', gap: 28,
      }}>
        <a className="ck-nav-logo" href="index.html" style={{ display: 'flex', alignItems: 'center', textDecoration: 'none', flexShrink: 0 }}>
          <Logo size={64} />
        </a>
        <div className="ck-nav-links" style={{ display: 'flex', gap: 30, flex: 1, justifyContent: 'center', alignItems: 'center' }}>
          {/* Services dropdown */}
          <div
            onMouseEnter={openServices}
            onMouseLeave={scheduleClose}
            style={{ position: 'relative' }}
          >
            <a href="index.html#services"
               style={{ ...linkStyle(isServicesActive), display: 'inline-flex', alignItems: 'center', gap: 4 }}
               onMouseEnter={e => { if (!isServicesActive) e.currentTarget.style.color = '#3F8074'; }}
               onMouseLeave={e => { if (!isServicesActive) e.currentTarget.style.color = '#163F34'; }}
            >
              Services
              <svg width="11" height="11" viewBox="0 0 12 12" fill="none" style={{ transition: 'transform .2s', transform: servicesOpen ? 'rotate(180deg)' : 'none' }}>
                <path d="M2 4l4 4 4-4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
              </svg>
            </a>
            {servicesOpen && (
              <div
                onMouseEnter={openServices}
                onMouseLeave={scheduleClose}
                style={{
                  position: 'absolute', top: 'calc(100% + 14px)', left: '50%', transform: 'translateX(-50%)',
                  background: '#fff', border: '1px solid #d5e7e4', borderRadius: 14,
                  boxShadow: '0 18px 40px rgba(22,63,52,0.12)',
                  padding: 10, width: 320, zIndex: 60,
                }}
              >
                {serviceItems.map(s => {
                  const isActive = active === s.key;
                  return (
                    <a key={s.key} href={s.href} style={{
                      display: 'block', padding: '12px 14px', textDecoration: 'none',
                      borderRadius: 10, transition: 'background .15s',
                      background: isActive ? 'rgba(63,128,116,0.08)' : 'transparent',
                    }}
                      onMouseEnter={e => e.currentTarget.style.background = 'rgba(63,128,116,0.08)'}
                      onMouseLeave={e => e.currentTarget.style.background = isActive ? 'rgba(63,128,116,0.08)' : 'transparent'}
                    >
                      <div style={{ fontSize: 14, fontWeight: 600, color: isActive ? '#3F8074' : '#163F34' }}>{s.label}</div>
                      <div style={{ fontSize: 12.5, color: '#6e8a86', marginTop: 2 }}>{s.blurb}</div>
                    </a>
                  );
                })}
              </div>
            )}
          </div>
          {links.map(l => (
            <a key={l.key} href={l.href}
               style={linkStyle(active === l.key)}
               onMouseEnter={e => { if (active !== l.key) e.currentTarget.style.color = '#3F8074'; }}
               onMouseLeave={e => { if (active !== l.key) e.currentTarget.style.color = '#163F34'; }}
            >{l.label}</a>
          ))}
        </div>
        <div className="ck-nav-cta" style={{ display: 'flex', alignItems: 'center', gap: 18, flexShrink: 0 }}>
          {showClientLogin && (
            <a href="https://client.chekbooks.com/client-login" target="_blank" rel="noopener" style={{
              background: '#3F8074', color: '#fff', textDecoration: 'none',
              border: '1.5px solid #3F8074',
              padding: '9px 18px', borderRadius: 10,
              fontWeight: 700, fontSize: 13, letterSpacing: '-0.005em',
              display: 'inline-flex', alignItems: 'center', gap: 8,
              transition: 'background .2s, color .2s, border-color .2s',
            }}
              onMouseEnter={e => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.color = '#163F34'; e.currentTarget.style.borderColor = '#163F34'; }}
              onMouseLeave={e => { e.currentTarget.style.background = '#3F8074'; e.currentTarget.style.color = '#fff'; e.currentTarget.style.borderColor = '#3F8074'; }}
            >
              <svg width="13" height="13" viewBox="0 0 24 24" fill="none">
                <rect x="3" y="11" width="18" height="11" rx="2" stroke="currentColor" strokeWidth="2"/>
                <path d="M7 11V7a5 5 0 0 1 10 0v4" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/>
              </svg>
              Client Portal Login
            </a>
          )}
          <a href="contact.html" style={{
            background: '#3F8074', color: '#fff', textDecoration: 'none', border: '1.5px solid #3F8074',
            padding: '9px 22px', borderRadius: 10, fontWeight: 700, fontSize: 13,
            transition: 'background .2s, color .2s, border-color .2s',
          }}
            onMouseEnter={e => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.color = '#163F34'; e.currentTarget.style.borderColor = '#163F34'; }}
            onMouseLeave={e => { e.currentTarget.style.background = '#3F8074'; e.currentTarget.style.color = '#fff'; e.currentTarget.style.borderColor = '#3F8074'; }}
          >{primaryCtaLabel}</a>
        </div>

        {/* Mobile burger */}
        <button
          className="ck-burger"
          onClick={() => setMobileOpen(o => !o)}
          aria-label="Menu"
          style={{
            display: 'none', background: 'transparent', border: '1px solid #d5e7e4',
            borderRadius: 10, width: 44, height: 44, cursor: 'pointer',
            alignItems: 'center', justifyContent: 'center', marginLeft: 'auto',
          }}>
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
            {mobileOpen
              ? <path d="M5 5l14 14M19 5L5 19" stroke="#163F34" strokeWidth="2" strokeLinecap="round"/>
              : <path d="M4 7h16M4 12h16M4 17h16" stroke="#163F34" strokeWidth="2" strokeLinecap="round"/>}
          </svg>
        </button>
      </div>

      {/* Mobile sheet */}
      {mobileOpen && (
        <div className="ck-nav-sheet" style={{
          position: 'fixed', inset: '90px 0 0 0', background: '#faf9f6',
          padding: '24px 24px', overflowY: 'auto', zIndex: 49,
        }}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
            <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.12em', color: '#3F8074', textTransform: 'uppercase', padding: '12px 0 6px' }}>Services</div>
            {serviceItems.map(s => (
              <a key={s.key} href={s.href} style={{ padding: '12px 0', fontSize: 18, fontWeight: 600, color: active === s.key ? '#3F8074' : '#163F34', textDecoration: 'none', borderBottom: '1px solid #e6efee' }}>{s.label}</a>
            ))}
            {[...links, ...mobileExtras].map(l => (
              <a key={l.key} href={l.href} style={{ padding: '14px 0', fontSize: 18, fontWeight: 600, color: active === l.key ? '#3F8074' : '#163F34', textDecoration: 'none', borderBottom: '1px solid #e6efee' }}>{l.label}</a>
            ))}
            <a href="contact.html" style={{
              marginTop: 22, background: '#3F8074', color: '#fff', textDecoration: 'none',
              padding: '14px 28px', borderRadius: 10, fontWeight: 700, fontSize: 15, textAlign: 'center',
            }}>{primaryCtaLabel}</a>
            {showClientLogin && (
              <a href="https://client.chekbooks.com/client-login" target="_blank" rel="noopener" style={{
                marginTop: 10, background: 'transparent', color: '#163F34', textDecoration: 'none',
                border: '1.5px solid #cce0de',
                padding: '13px 28px', borderRadius: 10, fontWeight: 600, fontSize: 14.5, textAlign: 'center',
              }}>Client Portal Login</a>
            )}
          </div>
        </div>
      )}

      <style>{`
        @media (max-width: 960px) {
          .ck-nav-links { display: none !important; }
          .ck-nav-cta { display: none !important; }
          .ck-burger { display: inline-flex !important; }
        }
        /* Compact mobile nav: shorter bar, much smaller logo, smaller burger */
        @media (max-width: 640px) {
          .ck-nav { height: 72px !important; }
          .ck-nav-inner { padding: 0 24px !important; }
          .ck-nav-logo img { height: 34px !important; }
          .ck-burger { width: 40px !important; height: 40px !important; }
          .ck-nav-sheet { top: 72px !important; }
        }
      `}</style>
    </nav>
  );
}
Object.assign(window, { Nav });