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

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

  const FEATURED_GUIDE_SPECS = [
    {
      slug: "women-security-goods",
      eyebrow: "BASIC",
      kicker: "広く比較したい時に",
    },
    {
      slug: "living-alone-women-security",
      eyebrow: "LIVING ALONE",
      kicker: "一人暮らしの不安を整理したい時に",
    },
    {
      slug: "security-buzzer-comparison",
      eyebrow: "COMPARISON",
      kicker: "まず防犯ブザーを選びたい時に",
    },
    {
      slug: "led-light-comparison",
      eyebrow: "LIGHT",
      kicker: "LEDライトを比べたい時に",
    },
  ];

  window.MamoruApp.GuideEntrySection = function GuideEntrySection({ setPage }) {
    const mobile = useIsMobile();
    const featuredGuides = FEATURED_GUIDE_SPECS.map((item) => ({
      ...item,
      article: ARTICLES.find((article) => article.slug === item.slug),
    })).filter((item) => item.article);

    return (
      <section className="guide-entry-section">
        <Wrap style={{ paddingTop: mobile ? 44 : 58, paddingBottom: mobile ? 42 : 54 }}>
          <SectionHeader
            eyebrow="Guide Entry"
            title="まず読みたいガイドから入る"
            body="商品名から探しはじめるより、悩みに近いガイドから入ると比較の軸が分かりやすくなります。夜道の不安、一人暮らし、防犯ブザー、LEDライトの入口を先に置いています。"
            maxWidth={760}
            action={
              <button onClick={() => setPage("guides")} style={{ fontSize: 13, fontFamily: NS, color: C.accent, borderBottom: `1px solid ${C.accentSub}`, paddingBottom: 1 }}>
                ガイド一覧を見る →
              </button>
            }
          />

          <div className="guide-entry-grid">
            {featuredGuides.map(({ article, eyebrow, kicker }) => {
              const visual = getGuideVisual(article);
              return (
                <button key={article.slug} className="guide-entry-card" onClick={() => setPage(`guide:${article.slug}`)}>
                  <div className="guide-entry-card__image-wrap">
                    <img className="guide-entry-card__image" src={visual.src} alt={visual.alt} loading="lazy" />
                    <div className="guide-entry-card__image-overlay" />
                    <div className="guide-entry-card__image-label">{eyebrow}</div>
                  </div>
                  <div className="guide-entry-card__body">
                    <div className="guide-entry-card__title">{article.title}</div>
                    <div className="guide-entry-card__kicker">{kicker}</div>
                    <p className="guide-entry-card__desc">{article.description}</p>
                    <div className="guide-entry-card__meta">
                      <span>{article.searchIntent}</span>
                      <span>FAQあり</span>
                    </div>
                    <div className="guide-entry-card__link">この記事を読む →</div>
                  </div>
                </button>
              );
            })}
          </div>
        </Wrap>
      </section>
    );
  };
})();