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

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

  window.MamoruApp.AboutStrip = function AboutStrip({ heroFont, setPage }) {
    const mobile = useIsMobile();
    const aboutPoints = [
      {
        title: "どんな防犯グッズがある？",
        body: "防犯ブザー、小型ライト、GPSタグなどを、役割ごとにやさしく整理しています。",
      },
      {
        title: "どれを選べばいい？",
        body: "夜道、一人暮らし、帰宅が遅い日など、不安や生活シーンから選び方を見られます。",
      },
      {
        title: "まず何を読めばいい？",
        body: "比較ポイントや注意点を先に読めるので、買う前に落ち着いて判断できます。",
      },
    ];

    return (
      <section style={{ background: C.bg, borderTop: `1px solid ${C.border}`, borderBottom: `1px solid ${C.border}`, padding: `${mobile ? 48 : 64}px 0` }}>
      <Wrap>
        <div
          className="text-visual-section"
          style={{
            display: "grid",
            gridTemplateColumns: mobile ? "1fr" : "minmax(0, 1fr) 360px",
            gap: mobile ? 26 : 48,
            alignItems: "center",
          }}
        >
          <div style={{ maxWidth: 540 }}>
            <Eyebrow>このサイトについて</Eyebrow>
            <h3 style={{ fontSize: "clamp(22px,2.8vw,30px)", fontFamily: heroFont, color: C.navy, lineHeight: 1.55, letterSpacing: "0.04em", marginBottom: 16 }}>
              女性向け防犯グッズを、
              <br />
              比較しながら知るためのサイトです。
            </h3>
            <p style={{ fontSize: 14, fontFamily: NS, color: C.text, lineHeight: 1.95, marginBottom: 18, maxWidth: 500 }}>
              morillion は、夜道や帰宅時、一人暮らしの不安に合う防犯グッズを、情報と比較から選べる女性向けメディアです。ECサイトのように売ることを急がず、まずは違いや選び方を分かりやすく整理します。
            </p>
            <div
              style={{
                display: "grid",
                gridTemplateColumns: mobile ? "1fr" : "repeat(3, minmax(0, 1fr))",
                gap: 12,
                marginBottom: 22,
                maxWidth: 620,
              }}
            >
              {aboutPoints.map((item) => (
                <div
                  key={item.title}
                  style={{
                    background: C.white,
                    border: `1px solid ${C.border}`,
                    borderRadius: 18,
                    padding: "16px 16px 14px",
                    boxShadow: C.shadowSoft,
                  }}
                >
                  <div style={{ fontSize: 13, fontFamily: NS, color: C.navy, fontWeight: 600, lineHeight: 1.6, marginBottom: 8 }}>{item.title}</div>
                  <div style={{ fontSize: 12, fontFamily: NS, color: C.muted, lineHeight: 1.8 }}>{item.body}</div>
                </div>
              ))}
            </div>
            <button onClick={() => setPage("info:about")} style={{ fontSize: 13, fontFamily: NS, color: C.accent, borderBottom: `1px solid ${C.accentSub}`, paddingBottom: 1 }}>
              情報サイトとしての見方を知る →
            </button>
          </div>
          <img
            src="./assets/images/about-safety-kit.svg"
            alt="防犯ブザーやライト、メモを落ち着いて並べた、防犯グッズ比較ガイドのイメージ"
            style={{ width: "100%", height: "auto", display: "block", borderRadius: 18, border: `1px solid ${C.border}`, background: C.white, boxShadow: C.shadowSoft }}
          />
        </div>
      </Wrap>
      </section>
    );
  };
})();