/* global React, Button, Icon */
const { useState, useEffect, useRef } = React;

function Navbar({ onApply, onJoin }) {
  const [scrolled, setScrolled] = useState(false);
  const [hidden, setHidden] = useState(false);
  const lastY = useRef(0);

  useEffect(() => {
    const onScroll = () => {
      const y = window.scrollY;
      setScrolled(y > 24);
      // Hide when scrolling DOWN past the header zone, reveal when scrolling UP.
      if (y > 120 && y > lastY.current) setHidden(true);
      else if (y < lastY.current) setHidden(false);
      lastY.current = y;
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const links = [
    { label: 'Comunidad', href: '#comunidad' },
    { label: 'Filosofía', href: '#filosofia' },
    { label: 'Formación', href: '#niveles' },
    { label: 'Mentoría', href: '#niveles' },
  ];

  return (
    <header style={{
      position: 'fixed', top: 0, left: 0, right: 0, zIndex: 50,
      background: scrolled ? 'rgba(11,12,16,.78)' : 'rgba(11,12,16,.3)',
      backdropFilter: 'blur(14px)', WebkitBackdropFilter: 'blur(14px)',
      borderBottom: `1px solid ${scrolled ? 'var(--hairline)' : 'transparent'}`,
      transform: hidden ? 'translateY(-100%)' : 'translateY(0)',
      transition: 'transform 320ms cubic-bezier(.4,0,.2,1), background 220ms ease, border-color 220ms ease',
    }}>
      <nav style={{ maxWidth: 1180, margin: '0 auto', padding: '14px 24px',
        display: 'flex', alignItems: 'center', gap: 28 }}>
        <a href="#top" style={{ display: 'flex', alignItems: 'center', gap: 11, textDecoration: 'none' }}>
          <img src="assets/logo.png" alt="Cámara del Trader" style={{ height: 38 }} />
          <span style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 15,
            letterSpacing: '.05em', textTransform: 'uppercase', color: 'var(--fg-1)', lineHeight: 1.05,
            maxWidth: 120 }}>Cámara del Trader</span>
        </a>

        <div className="cdt-navlinks" style={{ display: 'flex', gap: 26, marginLeft: 14 }}>
          {links.map((l, i) => (
            <a key={i} href={l.href} style={{
              fontFamily: 'var(--font-head)', fontWeight: 600, fontSize: 14,
              letterSpacing: '.06em', textTransform: 'uppercase', color: 'var(--fg-2)',
              textDecoration: 'none', transition: 'color 140ms ease',
            }}
            onMouseEnter={e => { e.target.style.color = 'var(--neon-cyan)'; e.target.style.textShadow = 'var(--text-glow-cyan)'; }}
            onMouseLeave={e => { e.target.style.color = 'var(--fg-2)'; e.target.style.textShadow = 'none'; }}>
              {l.label}
            </a>
          ))}
        </div>

        <div style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: 14 }}>
          <button onClick={onApply} className="cdt-nav-apply" style={{
            background: 'none', border: 0, cursor: 'pointer', padding: 0,
            fontFamily: 'var(--font-head)', fontWeight: 600, fontSize: 14,
            letterSpacing: '.06em', textTransform: 'uppercase', color: 'var(--fg-2)',
            transition: 'color 140ms ease' }}
            onMouseEnter={e => { e.currentTarget.style.color = 'var(--neon-cyan)'; }}
            onMouseLeave={e => { e.currentTarget.style.color = 'var(--fg-2)'; }}>
            Aplica a la Cámara
          </button>
          <Button size="sm" onClick={onJoin} icon="message-circle">Únete gratis</Button>
        </div>
      </nav>
    </header>
  );
}

window.Navbar = Navbar;