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

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

  window.MamoruApp.CategorySection = function CategorySection({ setPage }) {
    const mobile = useIsMobile();
    const cardMinHeight = mobile ? 160 : 176;
    const roleCopy = {
      A: { sub: "暗い帰り道や玄関前で、起こりにくい状態を作る", desc: "補助錠、小型ライト、センサーライトなど" },
      B: { sub: "夜道や帰宅後の異変に気づきやすくする", desc: "窓センサー、人感アラーム、カメラ、GPSタグなど" },
      C: { sub: "不安を感じた時に、すぐ助けを呼びやすくする", desc: "防犯ブザー、緊急通報アプリなど" },
      D: { sub: "危険を感じた時に被害を最小限にする", desc: "防犯スプレー、位置共有、記録アプリなど" },
    };

    return (
      <section style={{ background: C.white, padding: `${mobile ? 52 : 72}px 0`, borderTop: `1px solid ${C.border}` }}>
      <Wrap>
        <SectionHeader
          eyebrow="Role"
          title="夜道で何を支えるかで選ぶ"
          body="夜道での不安はひとつではありません。見つかりにくくする、異変に気づきやすくする、助けを呼びやすくする、万一のときに被害を広げにくくする、という4つの役割で整理すると、自分に足りない備えを落ち着いて選びやすくなります。"
          maxWidth={720}
          style={{ marginBottom: mobile ? 18 : 24 }}
          action={
            <button onClick={() => setPage("products")} style={{ fontSize: 13, fontFamily: NS, color: C.accent, borderBottom: `1px solid ${C.accentSub}`, paddingBottom: 1 }}>
              役割別に比べる →
            </button>
          }
        />
        <div className="editorial-note-grid" style={{ marginBottom: mobile ? 24 : 34 }}>
          {[
            "まずは『見えにくくしたい』『すぐ気づきたい』など、今いちばん不安なことから選べます。",
            "役割で整理してから商品を見ると、防犯ブザーやライトの違いも理解しやすくなります。",
            "ひとつで全部を解決するのではなく、夜道で足りない支えを足す考え方です。",
          ].map((item) => (
            <div key={item} className="editorial-note">{item}</div>
          ))}
        </div>
        <div className="role-grid">
          {CATEGORIES.map((cat) => {
            const [h, hP] = useHover();
            return (
              <button
                key={cat.key}
                {...hP}
                onClick={() => setPage(`category:${cat.key}`)}
                className="role-card"
                style={{ minHeight: cardMinHeight, background: h ? "rgba(255,255,255,0.42)" : undefined }}
              >
                <div>
                  <div className="role-card__head">
                    <span className="role-card__key">{cat.key}</span>
                    <span className="role-card__title">{cat.label}</span>
                  </div>
                  <div className="role-card__sub">{roleCopy[cat.key]?.sub || cat.sub}</div>
                  <div className="role-card__desc">{roleCopy[cat.key]?.desc || cat.desc}</div>
                </div>
              </button>
            );
          })}
        </div>
      </Wrap>
      </section>
    );
  };
})();