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

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

  window.MamoruApp.Footer = function Footer({ setPage }) {
    const groups = [
      {
        title: "製品種類",
        items: [
          { label: "防犯ブザー", page: "kind:防犯ブザー" },
          { label: "防犯スプレー", page: "kind:防犯スプレー" },
          { label: "小型ライト", page: "kind:小型ライト" },
          { label: "GPSタグ", page: "kind:GPSタグ" },
          { label: "備えを比べる", page: "products" },
        ],
      },
      {
        title: "機能別",
        items: [
          { label: "A / 予防・抑止", page: "category:A" },
          { label: "B / 察知・警報", page: "category:B" },
          { label: "C / 救助要請", page: "category:C" },
          { label: "D / 被害を最小限にする", page: "category:D" },
        ],
      },
      {
        title: "サイト情報",
        items: [
          { label: "ガイド記事", page: "guides" },
          { label: "このサイトについて", page: "info:about" },
          { label: "プライバシーポリシー", page: "info:privacy" },
          { label: "アフィリエイト開示", page: "info:affiliate" },
        ],
      },
    ];

    return (
      <footer style={{ background: C.navy, padding: "34px 0 18px", borderTop: "1px solid rgba(255,255,255,0.05)" }}>
      <Wrap>
        <div className="footer-inner" style={{ display: "grid", gridTemplateColumns: "minmax(190px, 1.3fr) repeat(3, minmax(130px, 1fr))", gap: 26, marginBottom: 20, paddingBottom: 20, borderBottom: "1px solid rgba(255,255,255,0.08)" }}>
          <div style={{ maxWidth: 250 }}>
            <div style={{ fontSize: 18, fontFamily: NS, fontWeight: 700, color: C.accent, marginBottom: 6, letterSpacing: "0.03em" }}>morillion</div>
            <div style={{ fontSize: 12, fontFamily: NS, lineHeight: 1.75, color: "rgba(255,255,255,0.54)" }}>
              一人暮らしの女性が、自分に合った防犯グッズを迷わず見つけられるサイトです。
            </div>
          </div>
          {groups.map((g) => (
            <div key={g.title}>
              <div style={{ fontSize: 10, fontFamily: NS, color: C.accentSub, letterSpacing: "0.15em", marginBottom: 8, textTransform: "uppercase" }}>{g.title}</div>
              {g.items.map((s) => (
                <button
                  key={s.label}
                  onClick={() => setPage(s.page)}
                  style={{ display: "block", fontSize: 12, fontFamily: NS, color: "rgba(255,255,255,0.52)", marginBottom: 5, textAlign: "left", lineHeight: 1.55 }}
                  onMouseEnter={(e) => (e.currentTarget.style.color = C.accentSub)}
                  onMouseLeave={(e) => (e.currentTarget.style.color = "rgba(255,255,255,0.52)")}
                >
                  {s.label}
                </button>
              ))}
            </div>
          ))}
        </div>
        <div style={{ fontSize: 11, fontFamily: NS, color: "rgba(255,255,255,0.32)", letterSpacing: "0.02em", lineHeight: 1.6 }}>© 2026 morillion — 当サイトはAmazonアソシエイトプログラムに参加しています</div>
      </Wrap>
      </footer>
    );
  };
})();