// Top navigation — fixed, hairline-ruled, mono labels.
// Logo upper-left, anchor links across the top, contact button at the right.

const NAV_ITEMS = [
  { id: "work",    label: "Our Work" },
  { id: "tech",    label: "Our Tech" },
  { id: "process", label: "Our Process" },
];
window.NAV_ITEMS = NAV_ITEMS;

const Nav = ({ active, onNavigate }) => {
  const [hovered, setHovered] = React.useState(null);
  return (
    <nav style={{
      position: "fixed",
      top: 0, left: 0, right: 0,
      zIndex: 50,
      display: "flex",
      alignItems: "center",
      padding: "0 var(--jh-gutter)",
      height: 72,
      background: "rgba(14,12,10,0.88)",
      borderBottom: "1px solid var(--jh-rule)",
      backdropFilter: "blur(4px)",
      WebkitBackdropFilter: "blur(4px)",
    }}>
      {/* Logo upper-left */}
      <a
        href="#top"
        onClick={(e) => { e.preventDefault(); onNavigate("top"); }}
        style={{ borderBottom: "none", display: "flex", alignItems: "center", gap: 12 }}
      >
        <Wordmark noun="HOUSE" size={24} />
      </a>

      {/* Center anchor links */}
      <div style={{
        display: "flex",
        gap: 40,
        margin: "0 auto",
        alignItems: "center",
      }}>
        {NAV_ITEMS.map(item => {
          const isActive = active === item.id;
          const isHover = hovered === item.id;
          return (
            <a
              key={item.id}
              href={`#${item.id}`}
              onClick={(e) => { e.preventDefault(); onNavigate(item.id); }}
              onMouseEnter={() => setHovered(item.id)}
              onMouseLeave={() => setHovered(null)}
              style={{
                fontFamily: "var(--jh-font-mono)",
                fontSize: 12,
                letterSpacing: "0.18em",
                textTransform: "uppercase",
                color: isActive ? "var(--jh-fg)" : isHover ? "var(--jh-amber)" : "var(--jh-fg-3)",
                borderBottom: "none",
                padding: "8px 0",
                position: "relative",
                transition: "color 180ms cubic-bezier(0.2,0,0.1,1)",
              }}
            >
              {item.label}
              {/* hairline indicator on active or hover */}
              <span style={{
                position: "absolute",
                left: 0, right: 0,
                bottom: 0,
                height: 1,
                background: isActive ? "var(--jh-fg)" : "var(--jh-amber)",
                opacity: isActive || isHover ? 1 : 0,
                transition: "opacity 180ms cubic-bezier(0.2,0,0.1,1)",
              }} />
            </a>
          );
        })}
      </div>

      {/* Contact button right */}
      <a
        href="#contact"
        onClick={(e) => { e.preventDefault(); onNavigate("contact"); }}
        style={{
          fontFamily: "var(--jh-font-mono)",
          fontSize: 11,
          letterSpacing: "0.18em",
          textTransform: "uppercase",
          color: "var(--jh-bg)",
          background: "var(--jh-fg)",
          padding: "10px 18px",
          borderRadius: 2,
          borderBottom: "none",
        }}
      >
        Contact Us
      </a>
    </nav>
  );
};
window.Nav = Nav;