// pages-public-1.jsx — Home, Projects index, Project detail
// All project content is data-driven from window.SITE_DATA (Sanity or
// data.js fallback) — no hardcoded project names or photos in here.

// Small bilingual field readers
function pjName(pj, lang)  { return (lang === "th" ? pj.name_th : pj.name_en) || pj.name_en || ""; }
function pjLoc(pj, lang)   { return (lang === "th" ? (pj.location_th || pj.loc_th) : (pj.location_en || pj.loc_en)) || ""; }
function pjLede(pj, lang)  { return (lang === "th" ? (pj.lede_th || pj.desc_th) : (pj.lede_en || pj.desc_en)) || ""; }
function pjDesc(pj, lang)  { return (lang === "th" ? pj.desc_th : pj.desc_en) || ""; }
function pjStage(pj, lang) { return (lang === "th" ? pj.stage_th : pj.stage_en) || pj.stage_en || ""; }
function pjScope(pj, lang) { return (lang === "th" ? pj.scope_th : pj.scope_en) || pj.scope_en || ""; }
function publishedProjects() {
  var all = window.SITE_DATA ? window.SITE_DATA.projects : [];
  return all.filter(function(pj) { return pj.status === "published"; });
}

// ===========================================================================
// HOME PAGE
// ===========================================================================
function PageHome({ lang }) {
  lang = lang || window.AM_LANG || "en";
  const p = AM_PHOTOS;
  const featured = publishedProjects().slice(0, 6);
  const journal = (window.SITE_DATA ? window.SITE_DATA.journal : [])
    .filter(function(j) { return j.status === "published"; }).slice(0, 3);
  const home = (window.SITE_DATA && window.SITE_DATA.homePage) || {};
  const S = window.S || function(o, k, l, f) { return (o && (o[k+"_"+l] || o[k+"_en"])) || f || ""; };

  const goProject = (id) => {
    if (window.AM_NAVIGATE) window.AM_NAVIGATE("project-detail", id);
  };

  const heroImage = home.hero_image || photoSrc("hero") || p.hero;
  const f = (i) => featured[i];

  // Compact meta block under/beside a featured image
  const FeatMeta = ({ i, big }) => {
    const pj = f(i);
    if (!pj) return null;
    return (
      <React.Fragment>
        <div className="am-mono" style={{ color: "var(--ink-3)", marginTop: big ? 0 : 12 }}>
          {String(i + 1).padStart(2, "0")} / {pj.year} · {pjLoc(pj, lang)}
        </div>
        <h3 className={big ? "am-h2" : "am-h3"} style={{ marginTop: big ? 8 : 4, fontSize: big ? 34 : 20 }}>{pjName(pj, lang)}</h3>
        {big && (
          <React.Fragment>
            <p className="am-body" style={{ marginTop: 10, maxWidth: 320 }}>{pjLede(pj, lang)}</p>
            <div className="am-mono" style={{ marginTop: 18, borderBottom: "1px solid var(--ink)", display: "inline-block", paddingBottom: 1, color: "var(--ink)" }}>
              {lang === "th" ? "ดูผลงาน →" : "VIEW PROJECT →"}
            </div>
          </React.Fragment>
        )}
      </React.Fragment>
    );
  };

  return (
    <div className="am-root am-page" data-lang={lang}>
      <Nav />

      {/* Hero */}
      <section className="am-pad" style={{ padding: "56px 48px 0" }}>
        <div className="am-eyebrow" style={{ marginBottom: 26 }}>{S(home, "hero_kicker", lang, T("home_hero_kicker"))}</div>
        <div style={{ display: "grid", gridTemplateColumns: "1.45fr 1fr", gap: 64, alignItems: "end" }}>
          <h1 className="am-display sm" style={{ fontSize: 144, marginBottom: 0 }}>
            <span style={{ display: "block" }}>{S(home, "hero_title_1", lang, T("home_hero_title_1"))}</span>
            <span style={{ display: "block" }}>{S(home, "hero_title_2", lang, T("home_hero_title_2"))}</span>
            <span style={{ display: "block" }}>{S(home, "hero_title_3", lang, T("home_hero_title_3"))}</span>
          </h1>
          <div style={{ paddingBottom: 18 }}>
            <p className="am-body lg" style={{ fontSize: 16, color: "var(--ink)", margin: 0, maxWidth: 380 }}>{S(home, "hero_body", lang, T("home_hero_body"))}</p>
            <div className="am-mono" style={{ marginTop: 22, color: "var(--ink-3)" }}>↓ scroll · 01 — 05</div>
          </div>
        </div>
      </section>

      <div style={{ padding: "44px 48px 0" }}>
        <Img src={heroImage} h={520} alt="Hero" label={S(home, "hero_caption", lang, T("home_hero_caption"))} />
      </div>

      {/* 01 — About */}
      <SectionLabel left={S(home, "intro_label", lang, T("home_intro_label"))} right="↘ READ MORE ABOUT US" />
      <section className="am-pad" style={{ padding: "0 48px 64px" }}>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 64, paddingTop: 28 }}>
          <p className="am-h2" style={{ fontSize: 32, lineHeight: 1.15, fontWeight: 500, letterSpacing: "-0.015em", margin: 0 }}>
            {S(home, "intro_lede", lang, T("home_intro_lede"))}
          </p>
          <p className="am-body lg" style={{ fontSize: 15, color: "var(--ink-2)", margin: 0, maxWidth: 520 }}>{S(home, "intro_body", lang, T("home_intro_body"))}</p>
        </div>
      </section>

      {/* 02 — Selected projects (first six published) */}
      <SectionLabel left={T("home_projects_label")} right={T("home_projects_meta")} />
      <section className="am-pad" style={{ padding: "32px 48px 64px" }}>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(12, 1fr)", gap: 28, rowGap: 56 }}>
          {/* row 1: large left, name right */}
          {f(0) && (
            <React.Fragment>
              <div style={{ gridColumn: "1 / span 7" }} className="am-project-link" onClick={() => goProject(f(0).id)}>
                <Img src={photoSrc(f(0).photo)} h={420} label="01" />
              </div>
              <div style={{ gridColumn: "9 / span 4", alignSelf: "end" }} className="am-project-link" onClick={() => goProject(f(0).id)}>
                <FeatMeta i={0} big />
              </div>
            </React.Fragment>
          )}

          {/* row 2: small + medium right */}
          {f(1) && (
            <div style={{ gridColumn: "2 / span 4", marginTop: 24 }} className="am-project-link" onClick={() => goProject(f(1).id)}>
              <Img src={photoSrc(f(1).photo)} h={260} label="02" />
              <FeatMeta i={1} />
            </div>
          )}
          {f(2) && (
            <div style={{ gridColumn: "7 / span 6", marginTop: 80 }} className="am-project-link" onClick={() => goProject(f(2).id)}>
              <Img src={photoSrc(f(2).photo)} h={340} label="03" />
              <FeatMeta i={2} />
            </div>
          )}

          {/* row 3 */}
          {f(3) && (
            <div style={{ gridColumn: "1 / span 5" }} className="am-project-link" onClick={() => goProject(f(3).id)}>
              <Img src={photoSrc(f(3).photo)} h={300} label="04" />
              <FeatMeta i={3} />
            </div>
          )}
          {f(4) && (
            <div style={{ gridColumn: "7 / span 5", marginTop: 40 }} className="am-project-link" onClick={() => goProject(f(4).id)}>
              <Img src={photoSrc(f(4).photo)} h={300} label="05" />
              <FeatMeta i={4} />
            </div>
          )}

          {/* row 4 — full bleed */}
          {f(5) && (
            <div style={{ gridColumn: "1 / -1", marginTop: 16 }}>
              <div className="am-project-link" onClick={() => goProject(f(5).id)}>
                <Img src={photoSrc(f(5).photo)} h={460} label="06" />
              </div>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginTop: 14 }}>
                <div className="am-project-link" onClick={() => goProject(f(5).id)}>
                  <FeatMeta i={5} />
                </div>
                <span className="am-mono" style={{ borderBottom: "1px solid var(--ink)", color: "var(--ink)", paddingBottom: 1, cursor: "pointer" }}
                      onClick={() => window.AM_NAVIGATE && window.AM_NAVIGATE("projects")}>
                  {lang === "th" ? "ดูผลงานทั้งหมด →" : "ALL PROJECTS →"}
                </span>
              </div>
            </div>
          )}
        </div>
      </section>

      {/* 03 — How we work */}
      <SectionLabel left={S(home, "principles_label", lang, T("home_principles_label"))} right="FOUR PRINCIPLES" />
      <section className="am-pad" style={{ padding: "32px 48px 80px" }}>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", columnGap: 80, rowGap: 36 }}>
          {[1, 2, 3, 4].map(i => {
            const cmsP = (home.principles && home.principles[i - 1]) || null;
            const title = cmsP ? (lang === "th" ? cmsP.title_th : cmsP.title_en) || T(`home_p_${i}_t`) : T(`home_p_${i}_t`);
            const body  = cmsP ? (lang === "th" ? cmsP.body_th  : cmsP.body_en)  || T(`home_p_${i}_b`) : T(`home_p_${i}_b`);
            return (
              <div key={i} style={{ borderTop: "1px solid var(--ink)", paddingTop: 20 }}>
                <div style={{ display: "flex", alignItems: "baseline", gap: 18 }}>
                  <span className="am-mono" style={{ color: "var(--ink-3)" }}>0{i}</span>
                  <div style={{ flex: 1 }}>
                    <h3 className="am-h3" style={{ fontSize: 26, marginBottom: 10 }}>{title}</h3>
                    <p className="am-body lg" style={{ margin: 0, maxWidth: 460 }}>{body}</p>
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      </section>

      {/* 04 — Press & news (latest three published) */}
      {journal.length > 0 && (
        <React.Fragment>
          <SectionLabel left={T("home_journal_label")} right="↘ ALL ARTICLES" />
          <section className="am-pad" style={{ padding: "32px 48px 80px" }}>
            <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr 1fr", gap: 28 }}>
              {journal.map((j, i) => (
                <div key={j.id} style={{ cursor: "pointer" }} onClick={() => window.AM_NAVIGATE && window.AM_NAVIGATE("article", j.id)}>
                  <Img src={photoSrc(j.photo)} h={300} />
                  <div className="am-mono" style={{ marginTop: 14, color: "var(--ink-3)" }}>
                    {(({ field: "FIELD NOTES", studio: "STUDIO", essay: "ESSAY", press: "PRESS" })[j.cat] || (j.cat || "").toUpperCase())} · {j.date}
                  </div>
                  <h3 className="am-h3" style={{ marginTop: 6, fontSize: 22, lineHeight: 1.25 }}>{lang === "th" ? j.title_th : j.title_en}</h3>
                  <p className="am-body" style={{ marginTop: 8, maxWidth: 380 }}>{lang === "th" ? j.lede_th : j.lede_en}</p>
                </div>
              ))}
            </div>
          </section>
        </React.Fragment>
      )}

      {/* 05 — Contact CTA */}
      <SectionLabel left={S(home, "cta_label", lang, T("home_contact_label"))} right="↘ FULL CONTACT" />
      <section className="am-pad" style={{ padding: "44px 48px 80px" }}>
        <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 80, alignItems: "end" }}>
          <h2 className="am-display xs" style={{ fontSize: 96, lineHeight: 0.9 }}>
            <span style={{ display: "block" }}>{S(home, "cta_big_1", lang, T("home_cta_big_1"))}</span>
            <span style={{ display: "block" }}>{S(home, "cta_big_2", lang, T("home_cta_big_2"))}</span>
          </h2>
          <div>
            <p className="am-body lg" style={{ color: "var(--ink)", margin: 0, maxWidth: 360 }}>{S(home, "cta_body", lang, T("home_cta_body"))}</p>
            <button className="am-btn" style={{ marginTop: 24 }}
                    onClick={() => window.AM_NAVIGATE && window.AM_NAVIGATE("contact")}>{S(home, "cta_button", lang, T("home_cta_btn"))}</button>
            <div className="am-body sm am-muted" style={{ marginTop: 16, maxWidth: 360 }}>
              {lang === "th" ? "หรือเขียนถึงเราที่ " : "Or write to us directly at "}
              {(window.SITE_DATA && window.SITE_DATA.settings && window.SITE_DATA.settings.email) || T("footer_email")}
            </div>
          </div>
        </div>
      </section>

      <Footer />
    </div>
  );
}

// ===========================================================================
// PROJECTS INDEX
// ===========================================================================
function PageProjects({ lang }) {
  lang = lang || window.AM_LANG || "en";
  const allProjects = publishedProjects();
  const pageCms = (window.SITE_DATA && window.SITE_DATA.projectsIndexPage) || {};
  const S = window.S || function(o, k, l, f) { return (o && (o[k+"_"+l] || o[k+"_en"])) || f || ""; };

  const goProject = (id) => {
    if (window.AM_NAVIGATE) window.AM_NAVIGATE("project-detail", id);
  };

  // Real summary facts derived from the data — replaces the old decorative filters
  const years = allProjects.map(function(pj) { return pj.year; }).filter(Boolean);
  const yearRange = years.length ? Math.min.apply(null, years) + " — " + Math.max.apply(null, years) : "";
  const facts = [
    { l: T("filter_year"),     v: yearRange },
    { l: T("filter_region"),   v: lang === "th" ? "กรุงเทพฯ · หัวหิน · สระบุรี · เพชรบูรณ์" : "Bangkok · Hua Hin · Saraburi · Phetchabun" },
    { l: T("filter_material"), v: lang === "th" ? "บ้าน · ภายใน · ภูมิทัศน์ · คาเฟ่" : "Houses · Interiors · Landscape · Cafe" },
    { l: T("filter_typology"), v: lang === "th" ? "สร้างเสร็จ · กำลังก่อสร้าง · ออกแบบ" : "Built · On site · In design" },
  ];

  return (
    <div className="am-root am-page" data-lang={lang}>
      <Nav active="projects" />
      <section style={{ padding: "56px 48px 32px" }}>
        <div className="am-eyebrow" style={{ marginBottom: 18 }}>02 · INDEX</div>
        <h1 className="am-display sm" style={{ fontSize: 128 }}>
          <span style={{ display: "block" }}>{S(pageCms, "title_1", lang, T("projects_title_1"))}</span>
          <span style={{ display: "block" }}>{S(pageCms, "title_2", lang, T("projects_title_2") + " " + T("projects_title_3"))}</span>
          <span style={{ display: "block" }}>{S(pageCms, "title_3", lang, T("projects_title_4"))}</span>
        </h1>
      </section>

      <section className="am-pad" style={{ padding: "20px 48px 28px", borderTop: "1.5px solid var(--line)", borderBottom: "1.5px solid var(--line)", display: "grid", gridTemplateColumns: "1.4fr 1fr 1fr 1fr 1fr", gap: 24, alignItems: "baseline" }}>
        <p className="am-body lg" style={{ margin: 0, maxWidth: 460 }}>{S(pageCms, "intro", lang, T("projects_intro"))}</p>
        {facts.map((f, i) => (
          <div key={i}>
            <div className="am-mono" style={{ color: "var(--ink-3)", marginBottom: 6 }}>{f.l}</div>
            <div className="am-body lg" style={{ borderBottom: "1px solid var(--ink)", paddingBottom: 6 }}>{f.v}</div>
          </div>
        ))}
      </section>

      {/* Project list — wide row layout */}
      <section style={{ padding: "0 48px 80px" }}>
        {allProjects.map((pj, idx) => {
          const isRight = idx % 2 === 1;
          const second = projectGallery(pj)[1];
          const meta = (
            <div style={isRight ? { paddingRight: 24 } : { paddingLeft: 24 }}>
              <div className="am-mono" style={{ color: "var(--ink-3)" }}>{String(idx + 1).padStart(2, "0")} / {pj.year}</div>
              <h3 className="am-h2" style={{ fontSize: 36, marginTop: 8 }}>{pjName(pj, lang)}</h3>
              <div className="am-body" style={{ marginTop: 6, color: "var(--ink-2)" }}>{pjLoc(pj, lang)}</div>
              <div className="am-mono" style={{ marginTop: 12, color: "var(--ink-3)" }}>{(pj.material || "").toUpperCase()}</div>
            </div>
          );
          return (
            <div key={pj.id}
                 className="am-project-link"
                 onClick={() => goProject(pj.id)}
                 style={{
                   display: "grid", gridTemplateColumns: isRight ? "1fr 1.6fr 0.8fr" : "1.6fr 1fr 0.8fr",
                   gap: 28, padding: "36px 0", borderBottom: "1px solid var(--line-soft)",
                   alignItems: "center",
                 }}>
              {isRight && meta}
              <Img src={photoSrc(pj.photo)} h={isRight ? 280 : 320} label={String(idx + 1).padStart(2, "0")} />
              {!isRight && meta}
              <div style={{ textAlign: "right" }}>
                {second && <Img src={second} h={isRight ? 280 : 320} style={{ width: "100%" }} />}
                <span className="am-mono" style={{ display: "inline-block", marginTop: 12, borderBottom: "1px solid var(--ink)", paddingBottom: 1, color: "var(--ink)" }}>VIEW →</span>
              </div>
            </div>
          );
        })}
      </section>

      <Footer />
    </div>
  );
}

// ===========================================================================
// PROJECT DETAIL
// ===========================================================================
function PageProjectDetail({ lang, projectId }) {
  lang = lang || window.AM_LANG || "en";
  const id = projectId || window.AM_NAV_ID;
  const allProjects = publishedProjects();
  const pj = allProjects.find(function(x) { return x.id === id; }) || allProjects[0] || {};
  const idx = allProjects.indexOf(pj);
  const nextPj = allProjects[idx + 1] || allProjects[0] || {};

  const gal = projectGallery(pj);
  const desc = pjDesc(pj, lang);
  const gridImgs = gal.slice(4, 10);

  return (
    <div className="am-root am-page" data-lang={lang}>
      <Nav active="projects" />

      <section style={{ padding: "48px 48px 32px" }}>
        <div className="am-mono" style={{ color: "var(--ink-3)", marginBottom: 18, cursor: "pointer" }}
             onClick={() => window.AM_NAVIGATE && window.AM_NAVIGATE("projects")}>
          ← {T("nav_projects")} / {String(idx + 1).padStart(2, "0")} / {pj.year}
        </div>
        <h1 className="am-display" style={{ fontSize: 168, lineHeight: 0.88, marginBottom: 0 }}>
          {pjName(pj, lang)}
        </h1>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginTop: 18 }}>
          <div className="am-h3" style={{ fontSize: 22, fontWeight: 500 }}>{pjLoc(pj, lang)}</div>
          <div className="am-mono" style={{ color: "var(--ink-3)" }}>{pj.material || ""}</div>
        </div>
      </section>

      <div style={{ padding: "10px 48px 32px" }}>
        <Img src={photoSrc(pj.photo) || gal[0]} h={620} label="01" />
      </div>

      {/* Stat row */}
      <div style={{ padding: "0 48px 32px" }}>
        <div className="am-stats">
          <div className="cell"><div className="num">{pj.area_total || "—"}</div><div className="lbl">{T("pd_stat_area")}</div></div>
          <div className="cell"><div className="num" style={{ fontSize: 22 }}>{pj.material || "—"}</div><div className="lbl">{T("pd_stat_type")}</div></div>
          <div className="cell"><div className="num" style={{ fontSize: 22 }}>{pjStage(pj, lang) || "—"}</div><div className="lbl">{T("pd_stat_stage")}</div></div>
          <div className="cell"><div className="num">{pj.year}</div><div className="lbl">{T("pd_stat_year")}</div></div>
        </div>
      </div>

      <p className="am-pad" style={{ padding: "16px 48px 56px", maxWidth: 820 }}>
        <span className="am-h2" style={{ fontSize: 30, fontWeight: 500, letterSpacing: "-0.015em", lineHeight: 1.2 }}>
          {pjLede(pj, lang)}
        </span>
      </p>

      {/* 01 — Brief (only when a real description exists) */}
      {desc && (
        <React.Fragment>
          <SectionLabel left={T("pd_sec_brief")} right={(pj.material || "").toUpperCase()} />
          <section className="am-pad" style={{ padding: "32px 48px 56px" }}>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 64, alignItems: "start" }}>
              {gal[1] ? <Img src={gal[1]} h={520} label="02" /> : <div />}
              <div>
                <p className="am-body lg" style={{ fontSize: 16, lineHeight: 1.7, margin: 0 }}>{desc}</p>
                {gal[2] && (
                  <div style={{ marginTop: 26 }}>
                    <Img src={gal[2]} h={300} label="03" />
                  </div>
                )}
              </div>
            </div>
          </section>
        </React.Fragment>
      )}

      {/* Full bleed image */}
      {gal[3] && (
        <div style={{ padding: "0 48px 48px" }}>
          <Img src={gal[3]} h={620} label="04" />
        </div>
      )}

      {/* 02 — Gallery */}
      {gridImgs.length > 0 && (
        <React.Fragment>
          <SectionLabel left={T("pd_sec_gallery")} right={String(gal.length).padStart(2, "0") + " IMAGES"} />
          <section className="am-pad" style={{ padding: "32px 48px 56px" }}>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
              {gridImgs.map((src, i) => (
                <Img key={src} src={src} h={i % 3 === 2 ? 460 : 300} style={i % 3 === 2 ? { gridColumn: "1 / span 2" } : undefined} />
              ))}
            </div>
          </section>
        </React.Fragment>
      )}

      {/* 03 — Project facts */}
      <SectionLabel left={T("pd_sec_facts")} right="" />
      <section className="am-pad" style={{ padding: "24px 48px 48px" }}>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 28, borderBottom: "1.5px solid var(--line)", paddingBottom: 28 }}>
          <div>
            <div className="am-mono" style={{ color: "var(--ink-3)", marginBottom: 6 }}>{T("pd_fact_scope")}</div>
            <div className="am-body lg">{pjScope(pj, lang) || "—"}</div>
          </div>
          <div>
            <div className="am-mono" style={{ color: "var(--ink-3)", marginBottom: 6 }}>{T("pd_fact_loc")}</div>
            <div className="am-body lg">{pjLoc(pj, lang) || "—"}</div>
          </div>
          <div>
            <div className="am-mono" style={{ color: "var(--ink-3)", marginBottom: 6 }}>{T("pd_fact_stage")}</div>
            <div className="am-body lg">{pjStage(pj, lang) || "—"}</div>
          </div>
        </div>
      </section>

      {/* Related / Next */}
      {nextPj.id && nextPj.id !== pj.id && (
        <React.Fragment>
          <SectionLabel left={lang === "th" ? `ต่อไป — ผลงาน ${String(((idx + 1) % allProjects.length) + 1).padStart(2, "0")}` : `NEXT — PROJECT ${String(((idx + 1) % allProjects.length) + 1).padStart(2, "0")}`} right="↘ ALL PROJECTS" />
          <section className="am-pad" style={{ padding: "28px 48px 80px" }}>
            <div style={{ display: "grid", gridTemplateColumns: "1.6fr 1fr", gap: 36, alignItems: "end" }}
                 className="am-project-link"
                 onClick={() => window.AM_NAVIGATE && window.AM_NAVIGATE("project-detail", nextPj.id)}>
              <Img src={photoSrc(nextPj.photo)} h={420} />
              <div>
                <div className="am-mono" style={{ color: "var(--ink-3)" }}>{nextPj.year} · {pjLoc(nextPj, lang)}</div>
                <h2 className="am-h1" style={{ fontSize: 56, marginTop: 6 }}>{pjName(nextPj, lang)}</h2>
                <p className="am-body lg" style={{ marginTop: 14, maxWidth: 380 }}>{pjLede(nextPj, lang)}</p>
                <button className="am-btn ghost" style={{ marginTop: 22 }}>{lang === "th" ? "เปิดผลงาน →" : "OPEN PROJECT →"}</button>
              </div>
            </div>
          </section>
        </React.Fragment>
      )}

      <Footer />
    </div>
  );
}

Object.assign(window, {
  PageHome, PageProjects, PageProjectDetail,
  pjName, pjLoc, pjLede, pjDesc, pjStage, pjScope, publishedProjects,
});