// nav.jsx — top navigation bar (white SaaS style, responsive)
const Nav = ({ brand = "sync", screen, onNav, cartCount = 0 }) => {
  const [menuOpen, setMenuOpen] = React.useState(false);
  const links = [
  { id: "home", label: "Home" },
  { id: "about", label: "About" },
  { id: "services", label: "Services" },
  { id: "materials", label: "Materials" },
  { id: "contact", label: "Contact" }];

  // Materials/Services live on the homepage; everything else is its own screen.
  const go = (id) => {
    setMenuOpen(false);
    if (id === "materials" || id === "services") onNav("home", { scrollTo: id });
    else onNav(id);
  };

  const CartIcon = (
    <svg width="15" height="15" viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <path d="M3 3h2l2.2 10.2a1 1 0 0 0 1 .8h6.9a1 1 0 0 0 1-.76L18 7H6" />
      <circle cx="9" cy="17" r="1.3" fill="currentColor" stroke="none" />
      <circle cx="15" cy="17" r="1.3" fill="currentColor" stroke="none" />
    </svg>
  );
  const CartBadge = cartCount > 0 ? (
    <span style={{
      display: "inline-grid", placeItems: "center",
      minWidth: 18, height: 18, padding: "0 5px", borderRadius: 999,
      background: "var(--primary)", color: "#fff",
      fontSize: 11, fontWeight: 700
    }}>{cartCount}</span>
  ) : null;

  return (
    <header style={{
      position: "sticky", top: 0, zIndex: 50,
      padding: "12px var(--pad-x)",
      display: "grid", gridTemplateColumns: "1fr auto 1fr",
      alignItems: "center", gap: 24,
      background: "color-mix(in srgb, var(--card) 88%, transparent)",
      backdropFilter: "blur(14px) saturate(140%)",
      WebkitBackdropFilter: "blur(14px) saturate(140%)",
      borderBottom: "1px solid var(--line)"
    }}>
      <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
        <button onClick={() => go("home")} data-track="nav_logo" style={{
          border: "none", background: "transparent", padding: 0,
          cursor: "pointer", display: "flex", alignItems: "center", gap: 10
        }}>
          <span aria-hidden style={{
            width: 30, height: 30, borderRadius: 8,
            background: "var(--primary)", color: "#fff",
            display: "grid", placeItems: "center",
            fontFamily: "var(--display)", fontSize: 16, fontWeight: 800
          }}>s</span>
          <span className="serif" style={{ fontSize: 21, lineHeight: 1, letterSpacing: "-0.02em", color: "var(--ink)" }}>{brand}</span>
          <span className="mono upper" style={{ color: "var(--muted)", fontSize: 9.5, marginLeft: 2 }}>
            by Forma Sync
          </span>
        </button>
      </div>

      <nav className="nav-center" style={{ display: "flex", gap: 6, justifyContent: "center" }}>
        {links.map((l) => {
          const active = l.id === screen;
          return (
            <button key={l.id} onClick={() => go(l.id)} style={{
              border: "none", appearance: "none", font: "inherit", cursor: "pointer",
              fontSize: 14, fontWeight: 500, padding: "8px 14px",
              borderRadius: 8,
              background: active ? "var(--primary-soft)" : "transparent",
              color: active ? "var(--primary)" : "var(--ink-soft)",
              transition: "background .15s, color .15s"
            }}>{l.label}</button>);
        })}
      </nav>

      <div style={{ display: "flex", gap: 10, justifyContent: "flex-end", alignItems: "center" }}>
        {/* Desktop action cluster */}
        <div className="nav-actions" style={{ display: "flex", gap: 10, alignItems: "center" }}>
          <button onClick={() => onNav("upload")} data-track="nav_quote" className="btn-primary" style={{ padding: "10px 18px", fontSize: 13.5, whiteSpace: "nowrap" }}>
            Get instant quote
          </button>
          <button onClick={() => onNav("cart")} data-track="nav_cart" className="btn-outline" style={{
            padding: "9px 14px", fontSize: 13.5,
            borderColor: cartCount > 0 ? "var(--primary)" : "var(--line)",
            color: cartCount > 0 ? "var(--primary)" : "var(--ink)"
          }}>
            {CartIcon}
            <span>Cart</span>
            {CartBadge}
          </button>
        </div>

        {/* Mobile hamburger */}
        <button className="nav-burger" aria-label="Menu" aria-expanded={menuOpen} onClick={() => setMenuOpen(o => !o)} style={{
          border: "1px solid var(--line)", background: "var(--card)", borderRadius: 10,
          width: 42, height: 42, alignItems: "center", justifyContent: "center",
          color: "var(--ink)", position: "relative"
        }}>
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
            {menuOpen
              ? <><path d="M6 6l12 12" /><path d="M18 6L6 18" /></>
              : <><path d="M4 7h16" /><path d="M4 12h16" /><path d="M4 17h16" /></>}
          </svg>
          {cartCount > 0 && !menuOpen && (
            <span style={{
              position: "absolute", top: -5, right: -5,
              minWidth: 16, height: 16, padding: "0 4px", borderRadius: 999,
              background: "var(--primary)", color: "#fff", fontSize: 10, fontWeight: 700,
              display: "grid", placeItems: "center"
            }}>{cartCount}</span>
          )}
        </button>
      </div>

      {/* Mobile dropdown menu */}
      {menuOpen && (
        <div className="nav-mobile-menu" style={{
          position: "absolute", top: "100%", left: 0, right: 0,
          flexDirection: "column", gap: 4,
          padding: "10px var(--pad-x) 18px",
          background: "var(--card)", borderBottom: "1px solid var(--line)",
          boxShadow: "var(--shadow-pop)"
        }}>
          {links.map((l) => {
            const active = l.id === screen;
            return (
              <button key={l.id} onClick={() => go(l.id)} style={{
                border: "none", appearance: "none", font: "inherit", cursor: "pointer",
                textAlign: "left", fontSize: 16, fontWeight: 500, padding: "12px 12px",
                borderRadius: 8,
                background: active ? "var(--primary-soft)" : "transparent",
                color: active ? "var(--primary)" : "var(--ink)"
              }}>{l.label}</button>);
          })}
          <button onClick={() => { setMenuOpen(false); onNav("upload"); }} data-track="nav_quote" className="btn-primary" style={{ marginTop: 8, padding: "13px 18px", fontSize: 15 }}>
            Get instant quote
          </button>
          <button onClick={() => { setMenuOpen(false); onNav("cart"); }} data-track="nav_cart" className="btn-outline" style={{
            padding: "12px 16px", fontSize: 14, justifyContent: "flex-start",
            borderColor: cartCount > 0 ? "var(--primary)" : "var(--line)",
            color: cartCount > 0 ? "var(--primary)" : "var(--ink)"
          }}>
            {CartIcon}
            <span>Cart</span>
            {CartBadge}
          </button>
        </div>
      )}
    </header>);
};
window.Nav = Nav;