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

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

  window.MamoruApp.PersonaRouteStrip = function PersonaRouteStrip({ setPage }) {
    const mobile = useIsMobile();
    const routes = [
      { label: "急いで決めたい", desc: "まず候補を3分以内で絞る", action: () => setPage("products") },
      { label: "見た目から見たい", desc: "自然に持てるブザーを先に見る", action: () => setPage("kind:防犯ブザー") },
      { label: "法律面も確認したい", desc: "防犯スプレーの注意点を見る", action: () => setPage("kind:防犯スプレー") },
      { label: "置き忘れ対策もしたい", desc: "GPSタグを比較する", action: () => setPage("kind:GPSタグ") },
      { label: "軽さを優先したい", desc: "小型ライトから探す", action: () => setPage("kind:小型ライト") },
    ];

    return (
      <section style={{ background: C.white, borderBottom: `1px solid ${C.border}` }}>
        <Wrap style={{ paddingTop: mobile ? 22 : 26, paddingBottom: mobile ? 22 : 24 }}>
          <div className="persona-route-head">
            <div className="persona-route-head__label">START HERE</div>
            <div className="persona-route-head__title">迷ったら、いちばん近い不安から入る</div>
            <div className="persona-route-head__text">5人分の閲覧シミュレーションでは、最初に「自分はどこから見ればいいか」が分かると離脱しにくくなりました。</div>
          </div>
          <div className="persona-route-grid">
            {routes.map((route) => (
              <button key={route.label} onClick={route.action} className="persona-route-card">
                <div className="persona-route-card__label">{route.label}</div>
                <div className="persona-route-card__text">{route.desc}</div>
                <div className="persona-route-card__link">ここから見る →</div>
              </button>
            ))}
          </div>
        </Wrap>
      </section>
    );
  };
})();