(() => {
  window.MamoruApp = window.MamoruApp || {};

  const { useState } = React;
  const { C, NS, Wrap, useIsMobile, useHover } = window.MamoruApp;

  window.MamoruApp.Nav = function Nav({ heroFont, setPage, currentPage = "home" }) {
    const mobile = useIsMobile();
    const [menuOpen, setMenuOpen] = useState(false);
    const navItems = [
      { label: "防犯ブザー", page: "kind:防犯ブザー" },
      { label: "防犯スプレー", page: "kind:防犯スプレー" },
      { label: "小型ライト", page: "kind:小型ライト" },
      { label: "GPSタグ", page: "kind:GPSタグ" },
      { label: "ガイド", page: "guides" },
      { label: "このサイトについて", page: "info:about" },
    ];
    const isActive = (item) => (
      currentPage === item.page ||
      (item.page.startsWith("kind:") && currentPage === item.page) ||
      (item.page.startsWith("scene:") && currentPage.startsWith("scene:")) ||
      (item.page.startsWith("category:") && currentPage.startsWith("category:")) ||
      (item.page === "guides" && (currentPage === "guides" || currentPage.startsWith("guide:"))) ||
      (item.page === "info:about" && currentPage.startsWith("info:"))
    );
    const productsActive = currentPage === "products" || currentPage.startsWith("product:");

    return (
      <>
        <nav
          style={{
            position: "sticky",
            top: 0,
            zIndex: 100,
            background: "rgba(255,255,255,0.96)",
            backdropFilter: "blur(16px)",
            borderBottom: `1px solid ${C.border}`,
            boxShadow: "0 1px 0 rgba(47,58,86,0.03)",
          }}
        >
          <Wrap style={{ height: 64, display: "flex", alignItems: "center", justifyContent: "space-between", padding: "0 40px" }}>
            <button onClick={() => setPage("home")} style={{ display: "flex", alignItems: "center", gap: 8 }}>
              <span style={{ fontSize: 18, fontFamily: NS, fontWeight: 700, color: C.navy, letterSpacing: "0.04em" }}>morillion</span>
              <span style={{ fontSize: 11, fontFamily: NS, color: C.muted, letterSpacing: "0.08em", marginTop: 1 }}>夜道の防犯案内</span>
            </button>
            <div className="nav-links" style={{ display: "flex", alignItems: "center", gap: 10 }}>
              {navItems.map((item) => {
                const [h, hP] = useHover();
                const active = isActive(item);
                return (
                  <button
                    key={item.label}
                    {...hP}
                    onClick={() => setPage(item.page)}
                    style={{
                      fontSize: 13,
                      fontFamily: NS,
                      color: active ? C.navy : h ? C.navy : C.text,
                      background: active ? C.navyPale : h ? C.bgCool : "transparent",
                      opacity: active || h ? 1 : 0.72,
                      letterSpacing: "0.01em",
                      transition: "all 150ms",
                      border: `1px solid ${active ? C.navySoft : "transparent"}`,
                      borderRadius: 999,
                      padding: "7px 12px",
                      fontWeight: active ? 700 : 400,
                    }}
                  >
                    {item.label}
                  </button>
                );
              })}
              <button
                onClick={() => setPage("products")}
                style={{
                  fontSize: 13,
                  fontFamily: NS,
                  fontWeight: 500,
                  color: productsActive ? C.white : C.navy,
                  background: productsActive ? C.navy : C.white,
                  border: `1px solid ${productsActive ? C.navy : C.borderAccent}`,
                  padding: "8px 18px",
                  borderRadius: 40,
                  letterSpacing: "0.05em",
                  transition: "opacity 160ms",
                }}
                onMouseEnter={(e) => (e.currentTarget.style.opacity = 0.82)}
                onMouseLeave={(e) => (e.currentTarget.style.opacity = 1)}
              >
                備えを比べる
              </button>
            </div>
            {mobile && (
              <button onClick={() => setMenuOpen(!menuOpen)} style={{ fontSize: 20, color: C.navy, padding: 4 }}>
                {menuOpen ? "✕" : "≡"}
              </button>
            )}
          </Wrap>
          {mobile && menuOpen && (
            <div style={{ background: C.white, borderTop: `1px solid ${C.border}`, padding: "20px 40px", display: "flex", flexDirection: "column", gap: 18 }}>
              {navItems.map((i) => (
                <button
                  key={i.label}
                  onClick={() => {
                    setPage(i.page);
                    setMenuOpen(false);
                  }}
                  style={{ fontSize: 14, fontFamily: NS, color: isActive(i) ? C.navy : C.text, textAlign: "left", fontWeight: isActive(i) ? 700 : 400, background: isActive(i) ? C.navyPale : "transparent", borderRadius: 8, padding: "8px 10px" }}
                >
                  {i.label}
                </button>
              ))}
              <button
                onClick={() => {
                  setPage("products");
                  setMenuOpen(false);
                }}
                style={{
                  fontSize: 14,
                  fontFamily: NS,
                  color: productsActive ? C.white : C.navy,
                  background: productsActive ? C.navy : C.white,
                  border: `1px solid ${productsActive ? C.navy : C.borderAccent}`,
                  padding: "10px 20px",
                  borderRadius: 40,
                  textAlign: "center",
                  marginTop: 4,
                }}
              >
                備えを比べる
              </button>
            </div>
          )}
        </nav>
      </>
    );
  };
})();