/* 慶宜僱傭代理 — Resources / Blog page (list + full article view) */
function BlogPage({ setPage, t }) {
  const B = t.ext.blog, posts = t.ext.posts;
  const [open, setOpen] = React.useState(null); // article index or null
  const imgFor = (i) => { const k = ["blog1", "feature", "blog3", "blog4", "blog5", "blog6"][i % 6]; return window.HY_IMG ? window.HY_IMG[k] : undefined; };

  React.useEffect(() => { if (window.refreshIcons) window.refreshIcons(); window.scrollTo({ top: 0, behavior: "auto" }); }, [open]);

  /* ---------- full article view ---------- */
  if (open != null) {
    const p = posts[open];
    const others = posts.map((x, i) => ({ x, i })).filter((o) => o.i !== open).slice(0, 3);
    return (
      <main>
        <article className="article">
          <div className="container container--narrow">
            <button className="article__back" onClick={() => setOpen(null)} type="button"><Icon n="arrow-left" style={{ width: 17, height: 17 }} />{B.back}</button>
            <div className="blog-meta" style={{ marginTop: 18 }}>
              <span className="blog-cat">{p.cat}</span><span className="blog-dot">·</span><span>{p.date}</span><span className="blog-dot">·</span><span>{p.read} {B.minRead}</span>
            </div>
            <h1 className="article__title">{p.title}</h1>
            <p className="article__lede">{p.excerpt}</p>
            <div className="article__byline"><span className="article__avatar">慶</span>{B.byline}</div>
          </div>
          <div className="container container--narrow">
            <div className="article__hero">
              <Photo src={imgFor(open)} label="文章配圖 Article" style={{ height: 360, borderRadius: 0, border: "none" }} />
            </div>
            <div className="article__body">
              {p.body.map((sec, i) => (
                <section key={i}>
                  {sec.h && <h2>{sec.h}</h2>}
                  {sec.p.map((para, j) => <p key={j}>{para}</p>)}
                </section>
              ))}
            </div>

            <div className="article__cta">
              <div>
                <h3>{B.ctaTitle}</h3>
                <p>{B.ctaText}</p>
              </div>
              <Btn variant="gold" size="lg" iconRight="arrow-right" onClick={() => setPage("contact")}>{B.ctaBtn}</Btn>
            </div>

            <div className="article__related">
              <h4>{B.related}</h4>
              <div className="related-grid">
                {others.map(({ x, i }) => (
                  <article className="related-card" key={i} onClick={() => setOpen(i)}>
                    <div className="related-card__media"><Photo src={imgFor(i)} label="" style={{ height: 130, borderRadius: 0, border: "none" }} /></div>
                    <div className="related-card__body">
                      <span className="blog-cat">{x.cat}</span>
                      <h5>{x.title}</h5>
                    </div>
                  </article>
                ))}
              </div>
            </div>
          </div>
        </article>
      </main>
    );
  }

  /* ---------- list view ---------- */
  const feat = posts[0];
  return (
    <main>
      <section className="section">
        <div className="container">
          <SectionHead eyebrow={B.eyebrow} title={B.title} lede={B.lede} />

          <article className="blog-feat" onClick={() => setOpen(0)}>
            <div className="blog-feat__media">
              <Photo src={imgFor(0)} label="文章配圖 Article" style={{ height: 340, borderRadius: 0, border: "none" }} />
              <span className="blog-feat__tag">{B.featured}</span>
            </div>
            <div className="blog-feat__body">
              <div className="blog-meta"><span className="blog-cat">{feat.cat}</span><span className="blog-dot">·</span><span>{feat.date}</span><span className="blog-dot">·</span><span>{feat.read} {B.minRead}</span></div>
              <h3>{feat.title}</h3>
              <p>{feat.excerpt}</p>
              <span className="blog-more">{B.readMore} <Icon n="arrow-right" style={{ width: 17, height: 17 }} /></span>
            </div>
          </article>

          <div className="blog-grid">
            {posts.slice(1).map((p, i) => (
              <article className="blog-card" key={i} onClick={() => setOpen(i + 1)}>
                <div className="blog-card__media">
                  <Photo src={imgFor(i + 1)} label="文章配圖 Article" style={{ height: 180, borderRadius: 0, border: "none" }} />
                  <span className="blog-card__cat">{p.cat}</span>
                </div>
                <div className="blog-card__body">
                  <div className="blog-meta"><span>{p.date}</span><span className="blog-dot">·</span><span>{p.read} {B.minRead}</span></div>
                  <h4>{p.title}</h4>
                  <p>{p.excerpt}</p>
                  <span className="blog-more">{B.readMore} <Icon n="arrow-right" style={{ width: 16, height: 16 }} /></span>
                </div>
              </article>
            ))}
          </div>
        </div>
      </section>
      <CTABand setPage={setPage} t={t} />
    </main>
  );
}
window.BlogPage = BlogPage;