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

  const { C, NS, ARTICLES, SCENES, CATEGORIES, Wrap, SectionHeader, useIsMobile, getGuideVisual } = window.MamoruApp;

  window.MamoruApp.GuideListPage = function GuideListPage({ setPage }) {
    const mobile = useIsMobile();
    const sceneMap = SCENES.reduce((acc, scene) => ({ ...acc, [scene.key]: scene }), {});
    const categoryMap = CATEGORIES.reduce((acc, category) => ({ ...acc, [category.key]: category }), {});

    const Label = ({ children }) => <span className="editorial-label">{children}</span>;

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

        <section className="page-hero-card" style={{ marginBottom: mobile ? 24 : 32 }}>
          <SectionHeader
            eyebrow="Guide"
            title="防犯グッズの選び方ガイド"
            body="一人暮らしの不安を整理しながら、場面・役割・注意点を落ち着いて確認できる記事をまとめます。"
            maxWidth={650}
            action={
              <div className="editorial-count" style={{ textAlign: mobile ? "left" : "right" }}>
                記事 <strong>{ARTICLES.length}</strong> 本
              </div>
            }
          />
        </section>

        <div className="guide-list-grid" style={mobile ? { gridTemplateColumns: "1fr", gap: 18 } : undefined}>
          {ARTICLES.map((article) => {
            const visual = getGuideVisual(article);
            return (
              <article
                key={article.id}
                onClick={() => setPage(`guide:${article.slug}`)}
                className="guide-list-card"
              >
                <div className="guide-list-card__media">
                  <img
                    src={visual.src}
                    alt={visual.alt}
                    loading="lazy"
                  />
                </div>
                <div className="guide-list-card__body">
                  <div style={{ display: "flex", gap: 8, flexWrap: "wrap", marginBottom: 12 }}>
                    <Label>{article.category}</Label>
                    <Label>{article.searchIntent}</Label>
                  </div>
                  <h2 style={{ fontSize: 17, fontFamily: NS, fontWeight: 700, color: C.navy, lineHeight: 1.55, marginBottom: 9 }}>{article.title}</h2>
                  <p style={{ fontSize: 13, fontFamily: NS, color: C.muted, lineHeight: 1.85, marginBottom: 16 }}>{article.description}</p>
                  <div className="guide-list-card__quick-facts">
                    <div className="guide-list-card__quick-fact">
                      向いている人: {article.sections.suitedFor[0]}
                    </div>
                    <div className="guide-list-card__quick-fact">
                      比較軸: {article.sections.comparisonPoints[0]}
                    </div>
                  </div>
                  <div style={{ display: "grid", gap: 8, marginTop: "auto", paddingTop: 14, borderTop: `1px solid ${C.border}` }}>
                    <div style={{ fontSize: 12, fontFamily: NS, color: C.muted, lineHeight: 1.7 }}>
                      関連シーン: {article.relatedScenes.map((key) => sceneMap[key]?.label || key).join(" / ")}
                    </div>
                    <div style={{ fontSize: 12, fontFamily: NS, color: C.muted, lineHeight: 1.7 }}>
                      関連機能: {article.relatedCategories.map((key) => `${key} / ${categoryMap[key]?.label || ""}`).join(" / ")}
                    </div>
                    <button onClick={(e) => { e.stopPropagation(); setPage(`guide:${article.slug}`); }} style={{ justifySelf: "start", fontSize: 12, color: C.accent, fontFamily: NS, borderBottom: `1px solid ${C.accentSub}`, paddingBottom: 1, marginTop: 4 }}>
                      記事を読む →
                    </button>
                  </div>
                </div>
              </article>
            );
          })}
        </div>
      </Wrap>
      </div>
    );
  };
})();