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

  const { C, NS, PRODUCTS, CATEGORIES, PRODUCT_KINDS, Wrap, SectionHeader, ProductCard, TextList, useIsMobile } = window.MamoruApp;

  window.MamoruApp.CategoryDetailPage = function CategoryDetailPage({ categoryKey = "A", setPage }) {
    const mobile = useIsMobile();
    const category = CATEGORIES.find((c) => c.key === categoryKey) || CATEGORIES[0];
    const categoryProducts = PRODUCTS
      .filter((p) => p.cat === category.key)
      .sort((a, b) => {
        const aPriority = category.key === "A" ? (a.subtype === "小型ライト" ? 0 : 1) : category.key === "B" ? (a.subtype === "GPSタグ" ? 0 : 1) : 1;
        const bPriority = category.key === "A" ? (b.subtype === "小型ライト" ? 0 : 1) : category.key === "B" ? (b.subtype === "GPSタグ" ? 0 : 1) : 1;
        return aPriority - bPriority || a.id - b.id;
      });
    const relatedKinds = PRODUCT_KINDS.filter((kind) => categoryProducts.some((product) => product.kind === kind.key));
    const carryLightCount = categoryProducts.filter((product) => product.subtype === "小型ライト").length;

    return (
      <div className="page-shell">
      <Wrap className="page-wrap">
        <div className="page-back-links" style={{ marginBottom: mobile ? 22 : 28 }}>
          <button onClick={() => setPage("home")} className="page-back-link">
            ← トップへ戻る
          </button>
          <button onClick={() => setPage("products")} className="page-back-link">
            商品一覧へ
          </button>
        </div>

        <section className="page-hero-card" style={{ marginBottom: mobile ? 24 : 32 }}>
          <SectionHeader
            eyebrow="Function Guide"
            title={category.title}
            body={category.body}
            maxWidth={650}
            action={
              <div style={{ fontSize: 13, fontFamily: NS, color: C.muted, lineHeight: 1.7, textAlign: mobile ? "left" : "right" }}>
                関連商品 <strong style={{ color: C.navy, fontSize: 18 }}>{categoryProducts.length}</strong> 件
              </div>
            }
          />
        </section>

        <section className="surface-grid surface-grid--split" style={{ gap: 18, marginBottom: mobile ? 30 : 40 }}>
          <section className="section-card" style={mobile ? { padding: "22px 20px" } : undefined}>
            <h2 className="section-card__title" style={{ marginBottom: 12 }}>この分類でできること</h2>
            <TextList items={category.canDo || []} />
          </section>
          <section className="section-card" style={mobile ? { padding: "22px 20px" } : undefined}>
            <h2 className="section-card__title" style={{ marginBottom: 12 }}>向いている人・シーン</h2>
            <TextList items={category.suited || []} />
          </section>
        </section>

        <section className="surface-grid surface-grid--two" style={{ marginBottom: mobile ? 30 : 40 }}>
          <section className="section-card" style={mobile ? { padding: "22px 20px" } : undefined}>
            <h2 className="section-card__title" style={{ marginBottom: 12 }}>メリット</h2>
            <TextList items={category.merits || []} />
          </section>
          <section className="section-card section-card--accent" style={mobile ? { padding: "22px 20px" } : undefined}>
            <h2 className="section-card__title" style={{ marginBottom: 12 }}>注意点</h2>
            <TextList items={category.cautions || []} />
          </section>
        </section>

        <SectionHeader
          eyebrow="Products"
          title="代表的な商品"
          body={`${category.label}の役割に近い商品を表示しています。シーンや使いやすさも合わせて比べてください。`}
          maxWidth={580}
          style={{ marginBottom: mobile ? 22 : 28 }}
        />
        {category.key === "A" && carryLightCount > 0 && (
          <section className="section-card section-card--accent" style={{ marginBottom: mobile ? 18 : 22, padding: mobile ? "20px 18px" : "20px 22px" }}>
            <div className="section-card__title" style={{ marginBottom: 8 }}>夜道向けの小型ライトを先に表示しています</div>
            <p style={{ fontSize: 13, fontFamily: NS, lineHeight: 1.8, color: C.muted }}>
              追加した小型ライト <strong style={{ color: C.navy }}>{carryLightCount}件</strong> を上にまとめています。バッグや鍵につけやすいものから、クリップ型、ペン型まで比べやすくしています。
            </p>
          </section>
        )}
        <div className="catalog-grid" style={{ marginBottom: mobile ? 34 : 44 }}>
          {categoryProducts.map((product) => <ProductCard key={product.id} product={product} categoryLabel={category.label} setPage={setPage} showExternalLink={false} detailLabel="詳しく見る →" />)}
        </div>

        <section className="stack-section" style={{ paddingTop: mobile ? 26 : 32 }}>
          <SectionHeader
            eyebrow="Next"
            title="関連する製品種類からも探す"
            body="役割で整理したあと、夜道で持ち歩く種類から見直すと違いがつかみやすくなります。"
            maxWidth={520}
            style={{ marginBottom: 18 }}
            action={
              <button onClick={() => setPage("products")} style={{ fontSize: 13, fontFamily: NS, color: C.accent, borderBottom: `1px solid ${C.accentSub}`, paddingBottom: 1 }}>
                商品一覧へ →
              </button>
            }
          />
          <div className="related-chip-list">
            {relatedKinds.map((kind) => (
              <button
                key={kind.key}
                onClick={() => setPage(`kind:${kind.key}`)}
                className="related-chip"
              >
                {kind.label}
              </button>
            ))}
          </div>
        </section>
      </Wrap>
      </div>
    );
  };
})();