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

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

  window.MamoruApp.InfoPage = function InfoPage({ pageKey = "about", setPage }) {
    const mobile = useIsMobile();
    const page = INFO_PAGES.find((item) => item.key === pageKey) || INFO_PAGES[0];

    return (
      <div className="editorial-page-shell">
      <Wrap className="editorial-page-wrap">
        <div style={{ display: "flex", gap: 16, flexWrap: "wrap", marginBottom: mobile ? 22 : 28 }}>
          <button onClick={() => setPage("home")} className="page-back-link">
            ← トップへ戻る
          </button>
          <button onClick={() => setPage("guides")} className="page-back-link">
            ガイド記事へ
          </button>
        </div>

        <section className="editorial-hero" style={mobile ? { gridTemplateColumns: "1fr", gap: 22, marginBottom: 30 } : {}}>
          <div className="editorial-hero__media">
            <img
              src="./assets/images/info-site-trust.svg"
              alt="サイト運営の方針や確認項目を整理したイメージ"
            />
          </div>
          <div>
            <SectionHeader
              eyebrow={page.eyebrow}
              title={page.title}
              body={page.description}
              maxWidth={650}
              style={{ marginBottom: 16 }}
              action={
                <button onClick={() => setPage(page.cta.page)} style={{ fontSize: 13, fontFamily: NS, color: C.accent, borderBottom: `1px solid ${C.accentSub}`, paddingBottom: 1 }}>
                  {page.cta.label} →
                </button>
              }
            />
            <div style={{ fontSize: 12, fontFamily: NS, color: C.muted, lineHeight: 1.8 }}>
              最終更新日: {page.updatedAt}
            </div>
          </div>
        </section>

        <main className="editorial-stack">
          {page.sections.map((section) => (
            <section key={section.title} className="editorial-block">
              <h2 className="editorial-block__title">{section.title}</h2>
              <p className="editorial-block__body">{section.body}</p>
            </section>
          ))}

          <section className="editorial-block editorial-block--soft">
            <h2 className="editorial-block__title" style={{ fontSize: 15, marginBottom: 8 }}>公開前の確認</h2>
            <p className="editorial-block__body" style={{ fontSize: 13 }}>
              このページは公開前の下地です。利用する広告、解析、問い合わせ方法、掲載商品の実際の条件に合わせて、公開前に文面を確認してください。
            </p>
          </section>
        </main>
      </Wrap>
      </div>
    );
  };
})();