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

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

  window.MamoruApp.ChipBar = function ChipBar({ setPage }) {
    const mobile = useIsMobile();

    return (
      <div style={{ background: C.white, borderBottom: `1px solid ${C.border}` }}>
        <Wrap style={{ padding: "0 40px" }}>
          <div className="chip-bar-inner" style={{ display: "flex", alignItems: "center", gap: 14, padding: "13px 0", overflowX: mobile ? "auto" : "visible" }}>
            <span style={{ fontSize: 12, fontFamily: NS, color: C.muted, whiteSpace: "nowrap", flexShrink: 0, marginRight: 8, letterSpacing: "0.08em" }}>PRODUCT INDEX</span>
            {PRODUCT_KINDS.map((kind) => {
              const [h, hP] = useHover();
              return (
                <button
                  key={kind.key}
                  {...hP}
                  onClick={() => setPage(`kind:${kind.key}`)}
                  style={{
                    whiteSpace: "nowrap",
                    padding: "2px 0",
                    fontSize: 13,
                    fontFamily: NS,
                    flexShrink: 0,
                    background: "transparent",
                    color: h ? C.navy : C.text,
                    borderBottom: `1px solid ${h ? C.navy : C.border}`,
                    transition: "all 150ms",
                  }}
                >
                  {kind.label}
                </button>
              );
            })}
            <button
              onClick={() => setPage("products")}
              style={{
                fontSize: 13,
                fontFamily: NS,
                color: C.accent,
                whiteSpace: "nowrap",
                flexShrink: 0,
                marginLeft: 4,
                borderBottom: `1px solid ${C.accentSub}`,
                paddingBottom: 1,
              }}
            >
              備えを比べる →
            </button>
          </div>
        </Wrap>
      </div>
    );
  };
})();