// Navbar.jsx — Home added first, 90px logo, hamburger on mobile
function ChNavbar({ scrolled = false, current = 'home', onNavigate }) {
  const [logoAnim, setLogoAnim] = React.useState(false);
  const [menuOpen, setMenuOpen] = React.useState(false);
  const isMobile = window.useIsMobile();

  const left  = [
    { id: 'home',  label: 'Home' },
    { id: 'about', label: 'About' },
    { id: 'books', label: 'Books' },
  ];
  const right = [
    { id: 'blog', label: 'Substack', icon: 'substack', href: 'https://clinicallyhappy.substack.com/', external: true },
    { id: 'contact', label: 'Contact', cta: true },
  ];
  const allLinks = [...left, ...right];

  const handleLogoClick = (e) => {
    e.preventDefault();
    setLogoAnim(true);
    setMenuOpen(false);
    setTimeout(() => setLogoAnim(false), 700);
    onNavigate && onNavigate('home');
  };

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

  React.useEffect(() => {
    if (isMobile && menuOpen) {
      document.body.style.overflow = 'hidden';
    } else {
      document.body.style.overflow = '';
    }
    return () => { document.body.style.overflow = ''; };
  }, [isMobile, menuOpen]);

  return (
    <>
      <style>{`
        @keyframes chLogoBounce {
          0%   { transform: scale(1) rotate(0deg); }
          20%  { transform: scale(1.18) rotate(-4deg); }
          40%  { transform: scale(0.94) rotate(3deg); }
          60%  { transform: scale(1.10) rotate(-2deg); }
          80%  { transform: scale(0.97) rotate(1deg); }
          100% { transform: scale(1) rotate(0deg); }
        }
        .ch-logo-bounce { animation: chLogoBounce 0.65s cubic-bezier(0.36,0.07,0.19,0.97) both; }
        @keyframes chMenuSlide {
          from { opacity: 0; transform: translateY(-10px); }
          to   { opacity: 1; transform: translateY(0); }
        }
      `}</style>

      <header style={{
        position: 'sticky', top: 0, zIndex: 50,
        height: isMobile ? 112 : 169,
        display: isMobile ? 'flex' : 'grid',
        gridTemplateColumns: isMobile ? undefined : '1fr auto 1fr',
        alignItems: 'center',
        justifyContent: isMobile ? 'center' : undefined,
        position: 'relative',
        padding: isMobile ? '0 20px' : '0 48px',
        background: (scrolled || menuOpen) ? 'rgba(255,255,255,0.98)' : '#fff',
        backdropFilter: scrolled ? 'blur(16px)' : 'none',
        WebkitBackdropFilter: scrolled ? 'blur(16px)' : 'none',
        boxShadow: scrolled ? '0 1px 0 rgba(20,19,15,0.07)' : '0 1px 0 rgba(20,19,15,0.05)',
        transition: 'all 240ms cubic-bezier(0.22, 0.61, 0.36, 1)',
        fontFamily: 'Montserrat, sans-serif',
      }}>

        {/* Mobile: logo centered */}
        {isMobile && (
          <a href="#home" onClick={handleLogoClick}
             style={{ display: 'flex', alignItems: 'center', textDecoration: 'none' }}>
            <img
              src="/assets/logo-teal-nb.png"
              alt="Clinically Happy"
              className={logoAnim ? 'ch-logo-bounce' : ''}
              style={{ height: 112, width: 'auto', display: 'block' }}
            />
          </a>
        )}

        {/* Desktop: left nav */}
        {!isMobile && (
          <nav style={{ display: 'flex', gap: 28, justifyContent: 'flex-end', alignItems: 'center', paddingRight: 16 }}>
            {left.map((item) => (
              <NavLink key={item.id} item={item} active={current === item.id} onNavigate={handleNav} />
            ))}
          </nav>
        )}

        {/* Desktop: center logo */}
        {!isMobile && (
          <a href="#home" onClick={handleLogoClick}
             style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '0 24px' }}>
            <img
              src="/assets/logo-teal-nb.png"
              alt="Clinically Happy"
              className={logoAnim ? 'ch-logo-bounce' : ''}
              style={{ height: 169, width: 'auto', display: 'block', transition: 'filter 200ms ease' }}
            />
          </a>
        )}

        {/* Desktop: right nav */}
        {!isMobile && (
          <nav style={{ display: 'flex', gap: 28, justifyContent: 'flex-start', alignItems: 'center', paddingLeft: 16 }}>
            {right.map((item) => (
              <NavLink key={item.id} item={item} active={current === item.id} onNavigate={handleNav} />
            ))}
          </nav>
        )}

        {/* Mobile: hamburger — absolutely positioned right */}
        {isMobile && (
          <button
            onClick={() => setMenuOpen(!menuOpen)}
            aria-label={menuOpen ? 'Close menu' : 'Open menu'}
            style={{
              position: 'absolute', right: 20,
              background: 'none', border: 'none', cursor: 'pointer',
              padding: 8, display: 'flex', alignItems: 'center',
            }}
          >
            {menuOpen ? (
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                   stroke="#1B544F" strokeWidth="2.5" strokeLinecap="round">
                <line x1="18" y1="6" x2="6" y2="18"/>
                <line x1="6" y1="6" x2="18" y2="18"/>
              </svg>
            ) : (
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                   stroke="#1A1A1A" strokeWidth="2.5" strokeLinecap="round">
                <line x1="3" y1="7" x2="21" y2="7"/>
                <line x1="3" y1="12" x2="21" y2="12"/>
                <line x1="3" y1="17" x2="21" y2="17"/>
              </svg>
            )}
          </button>
        )}
      </header>

      {/* Mobile menu overlay — slides in below header */}
      {isMobile && menuOpen && (
        <div style={{
          position: 'fixed', top: 112, left: 0, right: 0, bottom: 0,
          zIndex: 49,
          background: '#fff',
          padding: '32px 28px 48px',
          fontFamily: 'Montserrat, sans-serif',
          overflowY: 'auto',
          animation: 'chMenuSlide 240ms cubic-bezier(0.22,0.61,0.36,1)',
        }}>
          <nav style={{ display: 'flex', flexDirection: 'column' }}>
            {allLinks.filter(l => !l.cta).map((item) => (
              item.external ? (
                <a
                  key={item.id}
                  href={item.href}
                  target="_blank"
                  rel="noopener noreferrer"
                  onClick={() => setMenuOpen(false)}
                  style={{
                    color: '#1A1A1A',
                    fontWeight: 800,
                    fontSize: 28, letterSpacing: '-0.3px',
                    textDecoration: 'none',
                    padding: '14px 0',
                    borderBottom: '1px solid rgba(27,84,79,0.08)',
                    display: 'flex', alignItems: 'center', gap: 12,
                    transition: 'color 180ms ease',
                  }}
                >
                  {item.icon === 'substack' && (
                    <svg width="26" height="26" viewBox="0 0 24 24" fill="#FF6719">
                      <path d="M22.539 8.242H1.46V5.406h21.08v2.836zM1.46 10.812V24L12 18.11 22.54 24V10.812H1.46zM22.54 0H1.46v2.836h21.08V0z"/>
                    </svg>
                  )}
                  {item.label}
                </a>
              ) : (
                <a
                  key={item.id}
                  href={`#${item.id}`}
                  onClick={(e) => { e.preventDefault(); handleNav(item.id); }}
                  style={{
                    color: current === item.id ? '#1B544F' : '#1A1A1A',
                    fontWeight: 800,
                    fontSize: 28, letterSpacing: '-0.3px',
                    textDecoration: 'none',
                    padding: '14px 0',
                    borderBottom: '1px solid rgba(27,84,79,0.08)',
                    display: 'block',
                    transition: 'color 180ms ease',
                  }}
                >{item.label}</a>
              )
            ))}
          </nav>
          <div style={{ marginTop: 36 }}>
            <a
              href="#contact"
              onClick={(e) => { e.preventDefault(); handleNav('contact'); }}
              style={{
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                color: '#fff', background: '#1B544F',
                fontWeight: 700, fontSize: 13, letterSpacing: '1.5px', textTransform: 'uppercase',
                textDecoration: 'none', borderRadius: 999,
                padding: '15px 32px',
              }}
            >Contact the DrF's</a>
          </div>
        </div>
      )}
    </>
  );
}

function NavLink({ item, active, onNavigate }) {
  const [hover, setHover] = React.useState(false);

  if (item.external) {
    return (
      <a
        href={item.href}
        target="_blank"
        rel="noopener noreferrer"
        onMouseEnter={() => setHover(true)}
        onMouseLeave={() => setHover(false)}
        title={item.label}
        style={{
          display: 'inline-flex', alignItems: 'center',
          color: hover ? '#7FD6CF' : '#3A3A3A',
          fontWeight: 600,
          fontSize: 12, letterSpacing: '1.5px', textTransform: 'uppercase',
          textDecoration: 'none',
          paddingBottom: 3,
          borderBottom: '2px solid transparent',
          transition: 'all 220ms cubic-bezier(0.22, 0.61, 0.36, 1)',
          whiteSpace: 'nowrap',
          opacity: hover ? 1 : 0.85,
        }}
      >
        {item.icon === 'substack' ? (
          <svg width="22" height="22" viewBox="0 0 24 24" fill="#FF6719">
            <path d="M22.539 8.242H1.46V5.406h21.08v2.836zM1.46 10.812V24L12 18.11 22.54 24V10.812H1.46zM22.54 0H1.46v2.836h21.08V0z"/>
          </svg>
        ) : item.label}
      </a>
    );
  }

  if (item.cta) {
    return (
      <a
        href={`#${item.id}`}
        onClick={(e) => { e.preventDefault(); onNavigate && onNavigate(item.id); }}
        onMouseEnter={() => setHover(true)}
        onMouseLeave={() => setHover(false)}
        style={{
          color: hover ? '#fff' : '#1B544F',
          background: hover ? '#1B544F' : 'transparent',
          border: '1.5px solid #1B544F',
          fontWeight: 700, fontSize: 11, letterSpacing: '1.8px', textTransform: 'uppercase',
          textDecoration: 'none', borderRadius: 999,
          padding: '8px 20px',
          transition: 'all 220ms cubic-bezier(0.22, 0.61, 0.36, 1)',
          transform: hover ? 'scale(1.05)' : 'scale(1)',
          whiteSpace: 'nowrap',
        }}
      >{item.label}</a>
    );
  }

  return (
    <a
      href={`#${item.id}`}
      onClick={(e) => { e.preventDefault(); onNavigate && onNavigate(item.id); }}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        color: hover || active ? '#7FD6CF' : '#3A3A3A',
        fontWeight: active ? 700 : 600,
        fontSize: 12, letterSpacing: '1.5px', textTransform: 'uppercase',
        textDecoration: 'none',
        paddingBottom: 3,
        borderBottom: active ? '2px solid #7FD6CF' : '2px solid transparent',
        transition: 'all 220ms cubic-bezier(0.22, 0.61, 0.36, 1)',
        whiteSpace: 'nowrap',
      }}
    >{item.label}</a>
  );
}

window.ChNavbar = ChNavbar;