const TLHeader = ({ activeSection, onNav }) => {
  const [scrolled, setScrolled] = React.useState(false);
  const [menuOpen, setMenuOpen] = React.useState(false);

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

  const navItems = [
    { id: 'inicio', label: 'Inicio' },
    { id: 'servicios', label: 'Servicios' },
    { id: 'portafolio', label: 'Portafolio' },
    { id: 'clientes', label: 'Clientes' },
    { id: 'productos', label: 'Productos' },
    { id: 'cotizar', label: 'Cotizar' },
    { id: 'contacto', label: 'Contacto' },
  ];

  const scrollTo = (id) => {
    const el = document.getElementById(id);
    if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
    setMenuOpen(false);
  };

  return (
    <header style={{
      position: 'fixed', top: 0, left: 0, right: 0, zIndex: 1000,
      background: scrolled ? 'rgba(255,255,255,0.92)' : 'rgba(255,255,255,0.0)',
      backdropFilter: scrolled ? 'blur(24px) saturate(180%)' : 'none',
      WebkitBackdropFilter: scrolled ? 'blur(24px) saturate(180%)' : 'none',
      borderBottom: scrolled ? '1px solid rgba(0,0,0,0.06)' : 'none',
      transition: 'all 0.4s cubic-bezier(0.16,1,0.3,1)',
      padding: '0 40px',
    }}>
      <div style={{
        maxWidth: 1200, margin: '0 auto', display: 'flex',
        alignItems: 'center', justifyContent: 'space-between',
        height: 68,
      }}>
        {/* Logo */}
        <div onClick={() => scrollTo('inicio')} style={{ cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 12 }}>
          <img
            src="uploads/Torre Land Logo.png"
            alt="Torre Land"
            style={{ height: 44, width: 'auto', objectFit: 'contain' }}
          />
        </div>

        {/* Desktop Nav */}
        <nav style={{ display: 'flex', alignItems: 'center', gap: 2 }} className="desktop-nav">
          {navItems.map(item => (
            <button key={item.id} onClick={() => scrollTo(item.id)} style={{
              background: 'none', border: 'none', cursor: 'pointer',
              fontFamily: 'Inter, sans-serif', fontWeight: 500, fontSize: 14,
              color: '#1D1D1F',
              padding: '8px 16px', borderRadius: 8,
              transition: 'all 0.2s',
              letterSpacing: -0.1,
              opacity: 0.75,
            }}
            onMouseEnter={e => { e.target.style.opacity = '1'; e.target.style.color = '#000'; }}
            onMouseLeave={e => { e.target.style.opacity = '0.75'; e.target.style.color = '#1D1D1F'; }}
            >
              {item.label}
            </button>
          ))}
          <button onClick={() => scrollTo('cotizar')} style={{
            marginLeft: 12,
            background: '#1D1D1F',
            color: '#fff', border: 'none', cursor: 'pointer',
            fontFamily: 'Inter, sans-serif', fontWeight: 600, fontSize: 13,
            padding: '10px 22px', borderRadius: 100,
            letterSpacing: -0.1,
            transition: 'all 0.25s',
            whiteSpace: 'nowrap',
          }}
          onMouseEnter={e => { e.target.style.background = '#3D3D3F'; e.target.style.transform = 'translateY(-1px)'; }}
          onMouseLeave={e => { e.target.style.background = '#1D1D1F'; e.target.style.transform = 'none'; }}
          >
            Diagnóstico sin costo
          </button>
        </nav>

        {/* Mobile hamburger */}
        <button onClick={() => setMenuOpen(!menuOpen)} className="mobile-menu-btn" style={{
          display: 'none', background: 'none', border: 'none', cursor: 'pointer',
          flexDirection: 'column', gap: 5, padding: 4,
        }}>
          {[0,1,2].map(i => (
            <div key={i} style={{ width: 24, height: 2, background: '#1D1D1F', borderRadius: 2 }} />
          ))}
        </button>
      </div>

      {/* Mobile Menu */}
      {menuOpen && (
        <div style={{
          background: 'rgba(255,255,255,0.97)', backdropFilter: 'blur(20px)',
          borderTop: '1px solid rgba(0,0,0,0.06)',
          padding: '12px 40px 24px',
        }}>
          {navItems.map(item => (
            <button key={item.id} onClick={() => scrollTo(item.id)} style={{
              display: 'block', width: '100%', textAlign: 'left',
              background: 'none', border: 'none', cursor: 'pointer',
              fontFamily: 'Inter, sans-serif', fontWeight: 500, fontSize: 17,
              color: '#1D1D1F', padding: '13px 0',
              borderBottom: '1px solid #F5F5F7',
            }}>
              {item.label}
            </button>
          ))}
          <button onClick={() => scrollTo('cotizar')} style={{
            marginTop: 14, width: '100%',
            background: '#1D1D1F', color: '#fff', border: 'none', cursor: 'pointer',
            fontFamily: 'Inter, sans-serif', fontWeight: 600, fontSize: 15,
            padding: '14px 20px', borderRadius: 12,
          }}>
            Diagnóstico sin costo →
          </button>
        </div>
      )}
    </header>
  );
};

Object.assign(window, { TLHeader });