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

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

  window.MamoruApp.RankingSection = function RankingSection({ setPage }) {
    const mobile = useIsMobile();
    const guideItems = [1, 12, 14, 8, 17]
      .map((id) => PRODUCTS.find((product) => product.id === id))
      .filter(Boolean);

    return (
      <section style={{ background: C.white, padding: `${mobile ? 52 : 72}px 0` }}>
      <Wrap>
        <SectionHeader
          eyebrow="Night Road Picks"
          title="夜道でまず見たい候補"
          body="最初の1分で候補を絞りやすいように、見た目、機能、持ち歩きやすさの違いが伝わりやすい商品を先にまとめています。"
          maxWidth={560}
          style={{ marginBottom: mobile ? 20 : 28 }}
          action={
            <button onClick={() => setPage("products")} style={{ fontSize: 13, fontFamily: NS, color: C.accent, borderBottom: `1px solid ${C.accentSub}`, paddingBottom: 1 }}>
              商品一覧へ →
            </button>
          }
        />
        <div className="ranking-axis-strip">
          {["見た目になじむか", "持ち歩きやすいか", "法律面の確認が必要か", "スマホ対応や電池方式が合うか", "価格差が許容できるか"].map((item) => (
            <div key={item} className="ranking-axis-strip__item">{item}</div>
          ))}
        </div>
        {guideItems[0] && (
          <button className="ranking-feature" onClick={() => setPage(`product:${guideItems[0].id}`)} style={{ textAlign: "left", background: "transparent" }}>
            <div className="ranking-feature__media">
              <img className="ranking-feature__image" src={guideItems[0].imageSrc || "./assets/images/product-fallback-soft.svg"} alt={guideItems[0].imageAlt || guideItems[0].name} />
            </div>
            <div className="ranking-feature__body">
              <div className="ranking-feature__eyebrow">01 / FIRST PICK</div>
              <div className="ranking-feature__title">{guideItems[0].name}</div>
              <div className="ranking-feature__meta">
                {guideItems[0].tag && <span className="badge badge--outline">{guideItems[0].tag}</span>}
                <span className="badge badge--soft">{guideItems[0].kind}</span>
              </div>
              <p className="ranking-feature__desc">{guideItems[0].desc}</p>
              <div className="editorial-kind__link" style={{ marginTop: "auto", alignSelf: "flex-start" }}>詳しく見る →</div>
            </div>
          </button>
        )}
        <div className="ranking-list">
            {guideItems.slice(1).map((p, i) => {
              const [h, hP] = useHover();
              return (
                <div
                  key={p.id}
                  {...hP}
                  onClick={() => setPage(`product:${p.id}`)}
                  className="ranking-list-item"
                  style={{ background: h ? "rgba(216,154,166,0.06)" : undefined, paddingLeft: mobile ? 6 : 0, paddingRight: mobile ? 6 : 0, cursor: "pointer" }}
                >
                  <div className="ranking-list-item__index">
                    {String(i + 2).padStart(2, "0")}
                  </div>
                  <div className="ranking-list-item__thumb">
                    {p.imageSrc ? (
                      <img src={p.imageSrc} alt={p.imageAlt || p.name} />
                    ) : null}
                  </div>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div className="ranking-list-item__title">{p.name}</div>
                    <div style={{ display: "flex", gap: 8, alignItems: "center", flexWrap: "wrap" }}>
                      {p.tag && <span style={{ fontSize: 10, fontFamily: NS, color: C.accent, border: `1px solid ${C.accentSub}`, borderRadius: 3, padding: "2px 7px", letterSpacing: "0.04em", fontWeight: 600 }}>{p.tag}</span>}
                      <span className="ranking-list-item__text">{p.tagline}</span>
                    </div>
                  </div>
                  <div style={{ display: mobile ? "none" : "block", fontSize: 12, fontFamily: NS, color: C.muted, lineHeight: 1.7, flexShrink: 0, maxWidth: 190 }}>{p.fit}</div>
                  <button className="ranking-list-item__cta">
                    詳細を見る →
                  </button>
                </div>
              );
            })}
        </div>
      </Wrap>
      </section>
    );
  };
})();