// Header.jsx — Data Dudes Consulting main site header
Object.assign(window, { Header });

function Header({ currentPage, onNavigate }) {
  const [mobileOpen, setMobileOpen] = React.useState(false);
  const navLinks = ["Services", "Work", "About", "Contact"];

  return (
    <header style={headerStyles.wrapper}>
      <div style={headerStyles.inner}>
        {/* Logo */}
        <div style={headerStyles.logo} onClick={() => onNavigate("home")}>
          <img src="./assets/logo.png" alt="Data Dudes" style={{height:36, display:"block"}} />
        </div>

        {/* Desktop nav */}
        <nav style={headerStyles.desktopNav}>
          {navLinks.map(link => (
            <span key={link} onClick={() => onNavigate(link.toLowerCase())}
              style={{...headerStyles.navLink, ...(currentPage===link.toLowerCase() ? headerStyles.navLinkActive : {})}}>
              {link}
            </span>
          ))}
        </nav>

        <button style={headerStyles.cta} onClick={() => onNavigate("contact")}>
          Talk to a Dude
        </button>

        {/* Mobile hamburger */}
        <div style={headerStyles.hamburger} onClick={() => setMobileOpen(!mobileOpen)}>
          {[0,1,2].map(i => <div key={i} style={headerStyles.hamburgerLine} />)}
        </div>
      </div>

      {/* Mobile menu */}
      {mobileOpen && (
        <div style={headerStyles.mobileMenu}>
          {navLinks.map(link => (
            <span key={link} onClick={() => { onNavigate(link.toLowerCase()); setMobileOpen(false); }}
              style={headerStyles.mobileLink}>
              {link}
            </span>
          ))}
          <button style={{...headerStyles.cta, width:"100%", marginTop:8}} onClick={() => { onNavigate("contact"); setMobileOpen(false); }}>
            Talk to a Dude
          </button>
        </div>
      )}
    </header>
  );
}

const headerStyles = {
  wrapper: { background:"#fff", borderBottom:"1px solid rgba(0,0,0,0.08)", boxShadow:"0 4px 4px rgba(0,0,0,0.06)", position:"sticky", top:0, zIndex:100 },
  inner: { maxWidth:1200, margin:"0 auto", padding:"0 32px", height:68, display:"flex", alignItems:"center", justifyContent:"space-between", gap:32 },
  logo: { display:"flex", alignItems:"center", gap:10, cursor:"pointer", flexShrink:0 },
  logoBars: { display:"flex", alignItems:"flex-end", gap:3 },
  bar: { width:6, borderRadius:"2px 2px 0 0" },
  logoMain: { fontFamily:"'Patrick Hand',cursive", fontSize:22, color:"#1b1b1b", lineHeight:1 },
  logoSub: { fontFamily:"'Inter',sans-serif", fontSize:9, fontWeight:600, letterSpacing:"0.18em", color:"#737373", marginTop:2 },
  desktopNav: { display:"flex", gap:32, flex:1, justifyContent:"center" },
  navLink: { fontFamily:"'Patrick Hand',cursive", fontSize:18, color:"#333", cursor:"pointer", paddingBottom:2 },
  navLinkActive: { color:"#1b1b1b", borderBottom:"2px solid #1b1b1b" },
  cta: { background:"#69BAC9", color:"#fff", border:"none", borderRadius:9999, padding:"9px 22px", fontFamily:"'Patrick Hand',cursive", fontSize:18, cursor:"pointer", flexShrink:0 },
  hamburger: { display:"none", flexDirection:"column", gap:5, cursor:"pointer", padding:8 },
  hamburgerLine: { width:24, height:2, background:"#1b1b1b", borderRadius:2 },
  mobileMenu: { borderTop:"1px solid #e6e6e6", padding:"16px 32px 20px", display:"flex", flexDirection:"column", gap:12 },
  mobileLink: { fontFamily:"'Patrick Hand',cursive", fontSize:20, color:"#333", cursor:"pointer", padding:"4px 0" },
};