// page-cases.jsx — forum-style case-study list
const { SiteCtx: SiteCtx_C, useReveal: useReveal_C, I18N: I18N_C } = window.MM_HOOKS;

function CasesPage({ onOpen }) {
  const { lang } = React.useContext(SiteCtx_C);
  const t = I18N_C[lang];
  const projects = window.SITE_DATA.PROJECTS;
  const [hRef, hShown] = useReveal_C({ threshold: 0.1 });

  return (
    <section id="cases" className="page page--scrollable">
      <div className="page-inner">
        <div ref={hRef} className={`reveal ${hShown ? "is-shown" : ""}`}>
          <div className="section-eyebrow">{t.cases_eyebrow}</div>
          <h2 className="section-title">{t.cases_title}</h2>
          <p className="section-sub">{t.cases_sub}</p>
        </div>
        <div className="cases-list">
          {projects.map((p, i) => <CaseRow key={p.id} p={p} i={i} onOpen={onOpen} />)}
        </div>
        <div className="page-footer">[ end of feed · {projects.length} threads ]</div>
      </div>
    </section>
  );
}

function CaseRow({ p, i, onOpen }) {
  const { lang } = React.useContext(SiteCtx_C);
  const [ref, shown] = useReveal_C({ threshold: 0.1 });
  return (
    <div
      ref={ref}
      onClick={() => onOpen(p.id)}
      className={`case-row reveal-pop ${shown ? "is-shown" : ""} ${p.pinned ? "case-row--pinned" : ""}`}
      style={{ transitionDelay: `${(i % 4) * 80}ms` }}
    >
      <div className="case-num">
        {p.pinned && <span className="case-pin">📌</span>}
        {String(i + 1).padStart(2, "0")}
      </div>
      <div className="case-mid">
        <div className="case-cat">{p.category}</div>
        <div className="case-title">{lang === "zh" ? p.title_zh : p.title_en}</div>
        <div className="case-oneliner">{lang === "zh" ? p.oneLiner_zh : p.oneLiner_en}</div>
        <div className="case-tags">
          {p.tags.map(tag => <span key={tag} className="case-tag">{tag}</span>)}
        </div>
      </div>
      <div className="case-meta">
        <div className="case-meta-date">{p.updated}</div>
        <div className="case-meta-read">{p.readMinutes} min</div>
      </div>
      <div className="case-arrow">→</div>
    </div>
  );
}

window.CasesPage = CasesPage;