// Header Component
const HeaderCalculatorIcon = ({ size = 16, color = 'currentColor' }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" aria-hidden="true">
    <rect x="5" y="2.5" width="14" height="19" rx="2.5" stroke={color} strokeWidth="1.8" />
    <rect x="8" y="5.5" width="8" height="3.5" rx="1" fill={color} opacity="0.22" />
    <path d="M8.5 12h2M13.5 12h2M8.5 15.5h2M13.5 15.5h2M8.5 19h2M13.5 19h2" stroke={color} strokeWidth="1.8" strokeLinecap="round" />
  </svg>
);

const Header = ({ currentPage, setCurrentPage, onPortalClick, inventoryCount }) => {
  const [menuOpen, setMenuOpen] = React.useState(false);
  const [scrolled, setScrolled] = React.useState(false);

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

  const nav = [
    { id: 'home', label: 'Home' },
    { id: 'sales', label: 'Sales' },
    { id: 'rentals', label: 'Rentals' },
    ...(inventoryCount > 0 ? [{ id: 'inventory', label: 'Inventory' }] : []),
    { id: 'delivery', label: 'Delivery' },
    {
      id: 'estimator',
      label: <span style={{ display: 'inline-flex', alignItems: 'center', gap: '7px' }}><HeaderCalculatorIcon size={15} /> Estimator</span>,
    },
    { id: 'contact', label: 'Contact / Quote' },
  ];

  const handleNav = (id) => {
    setCurrentPage(id);
    setMenuOpen(false);
    window.scrollTo({ top: 0, behavior: 'smooth' });
  };

  return (
    <header style={{
      position: 'fixed', top: 0, left: 0, right: 0, zIndex: 1000,
      background: scrolled ? 'rgba(27,42,74,0.98)' : '#1B2A4A',
      backdropFilter: scrolled ? 'blur(8px)' : 'none',
      boxShadow: scrolled ? '0 2px 20px rgba(0,0,0,0.3)' : 'none',
      transition: 'all 0.3s ease',
      fontFamily: 'Inter, sans-serif',
    }}>
      {/* Top bar */}
      <div style={{
        background: '#142038',
        padding: '6px 0',
        borderBottom: '1px solid rgba(74,159,212,0.2)',
        display: 'flex',
        justifyContent: 'flex-end',
        gap: '24px',
        paddingRight: '32px',
      }}>
        <a href="tel:2532719238" style={{ color: '#4A9FD4', fontSize: '13px', textDecoration: 'none', display: 'flex', alignItems: 'center', gap: '5px' }}>
          <span>📞</span> (253) 271-9238
        </a>
        <a href="mailto:Sales@seasteelstorage.com" style={{ color: '#4A9FD4', fontSize: '13px', textDecoration: 'none', display: 'flex', alignItems: 'center', gap: '5px' }}>
          <span>✉</span> Sales@seasteelstorage.com
        </a>
      </div>

      {/* Main nav */}
      <div style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        padding: '0 32px', height: '64px', maxWidth: '1200px', margin: '0 auto',
        width: '100%', boxSizing: 'border-box',
      }}>
        {/* Logo */}
        <button onClick={() => handleNav('home')} style={{
          background: 'none', border: 'none', cursor: 'pointer', padding: 0,
          display: 'flex', alignItems: 'center',
        }}>
          <img src="uploads/logo-7179fe62.png" alt="Sea Steel Storage" style={{ height: '44px', objectFit: 'contain' }} />
        </button>

        {/* Desktop nav */}
        <nav style={{ display: 'flex', gap: '4px', alignItems: 'center' }} className="desktop-nav">
          {nav.map(item => (
            <button
              key={item.id}
              onClick={() => handleNav(item.id)}
              className={`nav-btn ${currentPage === item.id ? 'nav-btn-active' : ''}`}
            >
              {item.label}
            </button>
          ))}
          <button onClick={() => handleNav('contact')} style={{
            background: '#4A9FD4', color: '#fff', border: 'none', cursor: 'pointer',
            fontFamily: 'Inter, sans-serif', fontSize: '14px', fontWeight: '600',
            padding: '10px 20px', borderRadius: '6px', marginLeft: '8px',
            transition: 'all 0.2s', letterSpacing: '0.01em',
          }}
          onMouseEnter={e => { e.target.style.background = '#3a8fc4'; e.target.style.transform = 'translateY(-1px)'; }}
          onMouseLeave={e => { e.target.style.background = '#4A9FD4'; e.target.style.transform = 'translateY(0)'; }}
          >
            Get a Free Quote
          </button>
          <button onClick={onPortalClick} style={{
            background: 'transparent', color: 'rgba(255,255,255,0.7)',
            border: '1px solid rgba(255,255,255,0.25)', cursor: 'pointer',
            fontFamily: 'Inter, sans-serif', fontSize: '13px', fontWeight: '600',
            padding: '9px 16px', borderRadius: '6px', marginLeft: '4px',
            transition: 'all 0.2s', letterSpacing: '0.01em',
          }}
          onMouseEnter={e => { e.target.style.background = 'rgba(255,255,255,0.1)'; e.target.style.color = '#fff'; }}
          onMouseLeave={e => { e.target.style.background = 'transparent'; e.target.style.color = 'rgba(255,255,255,0.7)'; }}
          >
            🔐 Portal
          </button>
        </nav>

        {/* Mobile hamburger */}
        <button onClick={() => setMenuOpen(!menuOpen)} style={{
          display: 'none', background: 'none', border: 'none', cursor: 'pointer',
          color: '#fff', fontSize: '24px', padding: '4px',
        }} className="mobile-menu-btn">
          {menuOpen ? '✕' : '☰'}
        </button>
      </div>

      {/* Mobile menu */}
      {menuOpen && (
        <div style={{
          background: '#1B2A4A', borderTop: '1px solid rgba(74,159,212,0.2)',
          padding: '16px 24px 24px',
        }}>
          {nav.map(item => (
            <button key={item.id} onClick={() => handleNav(item.id)} style={{
              display: 'block', width: '100%', textAlign: 'left',
              background: 'none', border: 'none', cursor: 'pointer',
              color: currentPage === item.id ? '#4A9FD4' : 'rgba(255,255,255,0.85)',
              fontFamily: 'Inter, sans-serif', fontSize: '16px', fontWeight: '500',
              padding: '12px 0', borderBottom: '1px solid rgba(255,255,255,0.08)',
            }}>
              {item.label}
            </button>
          ))}
          <button onClick={() => handleNav('contact')} style={{
            display: 'block', width: '100%', marginTop: '16px',
            background: '#4A9FD4', color: '#fff', border: 'none', cursor: 'pointer',
            fontFamily: 'Inter, sans-serif', fontSize: '15px', fontWeight: '600',
            padding: '14px', borderRadius: '6px', textAlign: 'center',
          }}>
            Get a Free Quote
          </button>
          <button onClick={() => { setMenuOpen(false); onPortalClick(); }} style={{
            display: 'block', width: '100%', marginTop: '10px',
            background: 'transparent', color: 'rgba(255,255,255,0.7)',
            border: '1px solid rgba(255,255,255,0.25)', cursor: 'pointer',
            fontFamily: 'Inter, sans-serif', fontSize: '15px', fontWeight: '600',
            padding: '14px', borderRadius: '6px', textAlign: 'center',
          }}>
            🔐 Client / Admin Portal
          </button>
        </div>
      )}

      <style>{`
        @media (max-width: 768px) {
          .desktop-nav { display: none !important; }
          .mobile-menu-btn { display: block !important; }
        }
        .nav-btn {
          background: none;
          border: none;
          cursor: pointer;
          color: rgba(255,255,255,0.85);
          font-family: Inter, sans-serif;
          font-size: 14px;
          font-weight: 500;
          padding: 8px 14px;
          border-radius: 6px;
          border-bottom: 2px solid transparent;
          transition: color 0.2s, background 0.2s;
        }
        .nav-btn:hover {
          color: #fff;
          background: rgba(255,255,255,0.08);
        }
        .nav-btn-active {
          color: #4A9FD4 !important;
          border-bottom: 2px solid #4A9FD4 !important;
          background: none !important;
        }
        .nav-btn-active:hover {
          color: #4A9FD4 !important;
          background: none !important;
        }
      `}</style>
    </header>
  );
};

Object.assign(window, { Header });