// Header.jsx
Object.assign(window, { Header });

function Header() {
  const [menuOpen, setMenuOpen] = React.useState(false);

  const links = [
    { label: "OUR SERVICES", id: "services" },
    { label: "ABOUT US",     id: "about"    },
    { label: "REVIEWS",      id: "reviews"  },
    { label: "CONTACTS",     id: "contacts" },
  ];

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

  return (
    <header style={{
      position: "sticky", top: 0, zIndex: 100,
      background: "#003E40",
      borderBottom: "1px solid rgba(255,255,255,0.08)",
    }}>
      <div style={{
        maxWidth: 1200, margin: "0 auto", padding: "0 32px",
        display: "flex", alignItems: "center", justifyContent: "space-between",
        height: 72,
      }}>

        {/* Logo */}
        <div style={{ cursor: "pointer", flexShrink: 0, lineHeight: 0 }}
          onClick={() => window.scrollTo({ top: 0, behavior: "smooth" })}>
          <img src="assets/images/Group.png" alt="Apex Claim"
            style={{ height: 48, width: "auto", display: "block" }} />
        </div>

        {/* Desktop nav */}
        <nav className="hd-nav-desktop" style={{ display: "flex", gap: 36, alignItems: "center" }}>
          {links.map(l => (
            <a key={l.id} href={"#" + l.id}
              onClick={e => { e.preventDefault(); goto(l.id); }}
              style={{
                fontFamily: "Unbounded, sans-serif",
                fontSize: 11, fontWeight: 400,
                color: "rgba(255,255,255,0.7)",
                textDecoration: "none",
                whiteSpace: "nowrap",
                transition: "color 0.15s",
              }}>
              {l.label}
            </a>
          ))}
        </nav>

        {/* Mobile hamburger */}
        <button className="hd-hamburger-btn"
          onClick={() => setMenuOpen(v => !v)}
          style={{
            display: "none", background: "none", border: "none",
            cursor: "pointer", padding: 4,
            flexDirection: "column", gap: 5, alignItems: "center",
          }}>
          <span style={{ display: "block", width: 24, height: 2, background: "rgba(255,255,255,0.8)", borderRadius: 1 }} />
          <span style={{ display: "block", width: 24, height: 2, background: "rgba(255,255,255,0.8)", borderRadius: 1 }} />
          <span style={{ display: "block", width: 24, height: 2, background: "rgba(255,255,255,0.8)", borderRadius: 1 }} />
        </button>
      </div>

      {/* Mobile dropdown */}
      {menuOpen && (
        <div style={{
          position: "absolute", top: "100%", left: 0, right: 0,
          background: "#003E40",
          borderBottom: "1px solid rgba(255,255,255,0.1)",
          padding: "8px 0 16px",
          zIndex: 99,
        }}>
          {links.map(l => (
            <a key={l.id} href={"#" + l.id}
              onClick={e => { e.preventDefault(); goto(l.id); }}
              style={{
                display: "block", padding: "14px 32px",
                fontFamily: "Unbounded, sans-serif",
                fontSize: 13, fontWeight: 400,
                color: "rgba(255,255,255,0.7)",
                textDecoration: "none",
                borderBottom: "1px solid rgba(255,255,255,0.07)",
              }}>
              {l.label}
            </a>
          ))}
        </div>
      )}
    </header>
  );
}