const { useState } = React;

function Header({ scrolled }) {
  const [menuOpen, setMenuOpen] = useState(false);

  const navLinks = [
    { label: 'Equipment', href: '#equipment' },
    { label: 'Spare Parts', href: '#spare-parts' },
    { label: 'Delivery', href: '#delivery' },
    { label: 'Contact', href: '#footer' },
  ];

  const scrollTo = (href) => {
    const id = href.replace('#', '');
    const el = document.getElementById(id);
    if (el) {
      const top = el.getBoundingClientRect().top + window.scrollY - 80;
      window.scrollTo({ top, behavior: 'smooth' });
    }
    setMenuOpen(false);
  };

  const headerStyle = {
    position: 'fixed', top: 0, left: 0, right: 0, zIndex: 1000,
    height: 64, display: 'flex', alignItems: 'center',
    backdropFilter: scrolled ? 'blur(20px)' : 'none',
    WebkitBackdropFilter: scrolled ? 'blur(20px)' : 'none',
    background: scrolled ? 'rgba(10,10,10,0.75)' : 'transparent',
    borderBottom: scrolled ? '1px solid rgba(255,255,255,0.06)' : '1px solid transparent',
    transition: 'background 0.2s, border-color 0.2s, backdrop-filter 0.2s',
    paddingTop: 'max(0px, env(safe-area-inset-top))',
  };

  return (
    <>
      <header style={headerStyle} className="safe-top">
        <div className="container" style={{ display: 'flex', alignItems: 'center', width: '100%', gap: 0 }}>
          {/* Brand: logo slot + wordmark */}
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, flexShrink: 0, cursor: 'pointer' }} onClick={() => scrollTo('#home')}>
            {/* Logo slot — replace this <div> with <img src="..."> when ready */}
            <div aria-label="TMI" style={{
              width: 36, height: 36, borderRadius: 6,
              background: 'var(--accent)',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontFamily: '"Archivo Black", sans-serif',
              fontSize: 15, color: '#fff',
              letterSpacing: '-0.03em',
              flexShrink: 0,
            }}>TMI</div>
            <span style={{ width: 1, height: 18, background: 'rgba(255,255,255,0.18)' }} />
            <span style={{ fontFamily: 'JetBrains Mono, monospace', fontWeight: 500, fontSize: 9.5, color: 'var(--text-primary)', letterSpacing: '0.08em', textTransform: 'uppercase', lineHeight: 1.4 }}>
              TerraMine<br />Industrial Ltd.
            </span>
          </div>

          {/* Center nav — desktop */}
          <nav className="desktop-only" style={{ flex: 1, justifyContent: 'center', gap: 0 }}>
            {navLinks.map(link => (
              <NavLink key={link.href} onClick={() => scrollTo(link.href)}>{link.label}</NavLink>
            ))}
          </nav>

          {/* Actions — desktop */}
          <div className="desktop-only" style={{ gap: 8, flexShrink: 0 }}>
            <button className="btn btn-primary" style={{ fontSize: 13, padding: '8px 16px' }}
              onClick={() => scrollTo('#quote')}>
              Request Quote
            </button>
          </div>

          {/* Hamburger — mobile */}
          <button onClick={() => setMenuOpen(!menuOpen)}
            className="mobile-only"
            style={{ background: 'none', border: 'none', color: 'var(--text-primary)', cursor: 'pointer', padding: 8, marginLeft: 'auto', flexShrink: 0 }}>
            <svg width={22} height={22} viewBox="0 0 22 22" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round">
              {menuOpen ? (
                <><line x1="4" y1="4" x2="18" y2="18"/><line x1="18" y1="4" x2="4" y2="18"/></>
              ) : (
                <><line x1="3" y1="6" x2="19" y2="6"/><line x1="3" y1="11" x2="19" y2="11"/><line x1="3" y1="16" x2="19" y2="16"/></>
              )}
            </svg>
          </button>
        </div>
      </header>

      {/* Mobile dropdown */}
      {menuOpen && (
        <div className="mobile-dropdown" style={{
          position: 'fixed', top: 64, left: 0, right: 0, zIndex: 999,
          background: 'rgba(10,10,10,0.97)', backdropFilter: 'blur(20px)',
          WebkitBackdropFilter: 'blur(20px)',
          borderBottom: '1px solid rgba(255,255,255,0.08)',
          padding: '8px 24px 24px',
          paddingBottom: 'calc(24px + env(safe-area-inset-bottom))',
        }}>
          {navLinks.map(link => (
            <button key={link.href} onClick={() => scrollTo(link.href)} style={{
              display: 'block', width: '100%', textAlign: 'left',
              background: 'none', border: 'none', borderBottom: '1px solid rgba(255,255,255,0.06)',
              color: 'var(--text-primary)', fontSize: 16, fontWeight: 500,
              padding: '14px 0', cursor: 'pointer', fontFamily: 'Inter, sans-serif',
            }}>{link.label}</button>
          ))}
        </div>
      )}
    </>
  );
}

function NavLink({ children, onClick }) {
  const [hovered, setHovered] = React.useState(false);
  return (
    <button onClick={onClick}
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
      style={{
        background: 'none', border: 'none', cursor: 'pointer',
        fontFamily: 'Inter, sans-serif', fontSize: 14, fontWeight: 500,
        padding: '8px 14px', borderRadius: 6,
        color: hovered ? 'var(--text-primary)' : 'var(--text-secondary)',
        transition: 'color 0.12s',
      }}>
      {children}
    </button>
  );
}

Object.assign(window, { Header });