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

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

  window.MamoruApp.SceneSection = function SceneSection({ setPage }) {
    const mobile = useIsMobile();
    const fitCopy = {
      "防犯ブザー": "人に気づいてほしい不安が先にある人",
      "防犯スプレー": "注意点や使い方を確認した上で比較したい人",
      "小型ライト": "軽くて毎日続けやすい備えを探す人",
      "GPSタグ": "置き忘れ対策も一緒に考えたい人",
    };

    return (
      <section style={{ background: C.bg, padding: `${mobile ? 52 : 72}px 0`, borderTop: `1px solid ${C.border}` }}>
      <Wrap>
        <div style={{ marginBottom: 28 }}>
          <Eyebrow>Product Type</Eyebrow>
          <div className="editorial-divider" style={{ marginBottom: 10 }}>
            <SectionHeading>夜道で持つものを種類から選ぶ</SectionHeading>
          </div>
          <p style={{ fontSize: 14, fontFamily: NS, color: C.muted, marginTop: 10, lineHeight: 1.85, maxWidth: 520 }}>
            夜道限定で考える前提に合わせて、
            <br />
            まずは防犯ブザー、防犯スプレー、小型ライト、GPSタグの種類から絞れます。
          </p>
        </div>
        <div className="editorial-kinds">
          {PRODUCT_KINDS.map((kind, idx) => {
            const [h, hP] = useHover();
            return (
              <button
                key={kind.key}
                {...hP}
                onClick={() => setPage(`kind:${kind.key}`)}
                className="editorial-kind"
                style={{ background: h && idx % 2 === 1 ? "rgba(255,255,255,0.68)" : undefined }}
              >
                <div className="editorial-kind__index">{String(idx + 1).padStart(2, "0")}</div>
                <div className="editorial-kind__sub">{kind.sub}</div>
                <div className="editorial-kind__title">{kind.label}</div>
                <div className="editorial-kind__desc">
                  {kind.desc}
                  <br />
                  夜道での持ち歩きやすさや、見た目とのバランスも見比べられます。
                </div>
                <div className="editorial-kind__fit">こんな人向け: {fitCopy[kind.key] || "自分に合う備えを先に絞りたい人"}</div>
                <div className="editorial-kind__link">種類から見る →</div>
              </button>
            );
          })}
        </div>
      </Wrap>
      </section>
    );
  };
})();