/* global React, IconMoon, IconSun, IconMenu, IconX, IconArrowRight, SITE */

const Logo = ({ size = 22 }) => (
  <img src="img/ce_base.png" alt="CounselExpert" height={size} width={size} style={{ flexShrink: 0, objectFit: 'contain' }} />
);

const Wordmark = ({ height = 20 }) => (
  <a href="#/" style={{ display: 'inline-flex', alignItems: 'center', gap: 10, color: 'var(--color-ink)' }}>
    <Logo size={height + 32} />
    <span style={{ fontFamily: 'var(--font-sans)', fontWeight: 600, fontSize: 17, letterSpacing: '-0.3px' }}>
      CounselExpert
    </span>
  </a>
);

const Nav = ({ route, theme, onToggleTheme }) => {
  const [open, setOpen] = React.useState(false);
  const [scrolled, setScrolled] = React.useState(false);

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

  const links = SITE.nav;

  return (
    <header
      style={{
        position: 'sticky',
        top: 0,
        zIndex: 60,
        background: scrolled ? 'color-mix(in oklab, var(--color-canvas) 92%, transparent)' : 'var(--color-canvas)',
        backdropFilter: scrolled ? 'saturate(140%) blur(10px)' : 'none',
        WebkitBackdropFilter: scrolled ? 'saturate(140%) blur(10px)' : 'none',
        borderBottom: scrolled ? '1px solid var(--color-hairline)' : '1px solid transparent',
        transition: 'background-color 200ms ease-out, border-color 200ms ease-out',
      }}
    >
      <div className="container" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', height: 72 }}>
        <Wordmark />
        <nav style={{ display: 'flex', alignItems: 'center', gap: 8 }} className="nav-desktop">
          <div style={{ display: 'flex', gap: 4, marginRight: 8 }}>
            {links.map((l) => (
              <a
                key={l.href}
                href={l.href}
                style={{
                  padding: '10px 14px',
                  borderRadius: 100,
                  fontFamily: 'var(--font-sans)',
                  fontWeight: 500,
                  fontSize: 14,
                  color: 'var(--color-body)',
                  transition: 'color 150ms, background-color 150ms',
                }}
                onMouseEnter={(e) => { e.currentTarget.style.color = 'var(--color-ink)'; }}
                onMouseLeave={(e) => { e.currentTarget.style.color = 'var(--color-body)'; }}
              >
                {l.label}
              </a>
            ))}
          </div>
          <button
            onClick={onToggleTheme}
            aria-label="Toggle theme"
            style={{
              width: 38, height: 38, borderRadius: 100,
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
              background: 'transparent', border: '1px solid var(--color-hairline)',
              color: 'var(--color-ink)', cursor: 'pointer',
              transition: 'background-color 150ms',
            }}
            onMouseEnter={(e) => { e.currentTarget.style.background = 'var(--color-surface-soft)'; }}
            onMouseLeave={(e) => { e.currentTarget.style.background = 'transparent'; }}
          >
            {theme === 'dark' ? <IconSun size={16} /> : <IconMoon size={16} />}
          </button>
          <a href="#/counselling" className="btn btn-primary" style={{ marginLeft: 4 }}>
            Get guidance
            <IconArrowRight size={16} />
          </a>
        </nav>

        {/* mobile */}
        <button
          className="nav-mobile-toggle"
          onClick={() => setOpen(!open)}
          aria-label="Menu"
          style={{
            display: 'none',
            width: 40, height: 40, borderRadius: 100,
            alignItems: 'center', justifyContent: 'center',
            background: 'transparent', border: '1px solid var(--color-hairline)',
            color: 'var(--color-ink)', cursor: 'pointer',
          }}
        >
          {open ? <IconX size={18} /> : <IconMenu size={18} />}
        </button>
      </div>

      {open && (
        <div className="nav-mobile-panel" style={{
          borderTop: '1px solid var(--color-hairline)',
          background: 'var(--color-canvas)',
          padding: '16px 24px 24px',
        }}>
          {links.map((l) => (
            <a key={l.href} href={l.href} onClick={() => setOpen(false)} style={{
              display: 'block', padding: '12px 0', fontSize: 16, color: 'var(--color-ink)',
              borderBottom: '1px solid var(--color-hairline-soft)',
            }}>{l.label}</a>
          ))}
          <div style={{ display: 'flex', gap: 8, marginTop: 16 }}>
            <button onClick={onToggleTheme} className="btn btn-secondary" style={{ flex: 1 }}>
              {theme === 'dark' ? <><IconSun size={16} /> Light</> : <><IconMoon size={16} /> Dark</>}
            </button>
            <a href="#/counselling" className="btn btn-primary" style={{ flex: 1 }} onClick={() => setOpen(false)}>
              Start <IconArrowRight size={16} />
            </a>
          </div>
        </div>
      )}

      <style>{`
        @media (max-width: 820px) {
          .nav-desktop { display: none !important; }
          .nav-mobile-toggle { display: inline-flex !important; }
        }
      `}</style>
    </header>
  );
};

window.Nav = Nav;
window.Wordmark = Wordmark;
window.Logo = Logo;