// pages-public-2.jsx — Services, Journal index, Journal article, About, Contact
// Facts (team, publications, services) mirror the studio's official portfolio.

// ===========================================================================
// SERVICES
// ===========================================================================
function PageServices({ lang }) {
  lang = lang || window.AM_LANG || "en";
  const p = AM_PHOTOS;
  const pageCms = (window.SITE_DATA && window.SITE_DATA.servicesPage) || {};
  const S = window.S || function(o, k, l, f) { return (o && (o[k+"_"+l] || o[k+"_en"])) || f || ""; };

  // Default services (fallback when Sanity not configured).
  // Fees/timelines are quoted per project — no invented price bands here.
  const defaultServices = [
    { k: "s1", photo: p.baan_ext },
    { k: "s2", photo: p.baan_int1 },
    { k: "s3", photo: p.p_garden },
    { k: "s4", photo: p.p_pool },
    { k: "s5", photo: p.craft },
    { k: "s6", photo: p.p_meadow },
  ];

  // Merge CMS services with defaults
  const services = (pageCms.services && pageCms.services.length ? pageCms.services : defaultServices.map(function() { return {}; })).map(function(svc, i) {
    var d = defaultServices[i] || {};
    return {
      title: (lang === "th" ? svc.title_th : svc.title_en) || (d.k ? T(`${d.k}_t`) : ""),
      body:  (lang === "th" ? svc.body_th  : svc.body_en)  || (d.k ? T(`${d.k}_b`) : ""),
      fee:   (lang === "th" ? svc.fee_th   : svc.fee_en)   || T("serv_fee_default"),
      time:  (lang === "th" ? svc.timeline_th : svc.timeline_en) || T("serv_time_default"),
      deliverables: (lang === "th" ? svc.deliverables_th : svc.deliverables_en) || "",
      image: svc.image || d.photo,
    };
  });

  const defaultDelivs = lang === "th"
    ? ["ศึกษาความเป็นไปได้", "แบบขออนุญาต", "BOQ สำหรับประมูล", "ตรวจงานหน้างาน"]
    : ["Feasibility study", "Permit drawings", "Blank BOQ for bidding", "Site inspection"];

  return (
    <div className="am-root am-page" data-lang={lang}>
      <Nav active="services" />
      <section style={{ padding: "56px 48px 36px" }}>
        <div className="am-eyebrow" style={{ marginBottom: 18 }}>03 · SERVICES</div>
        <h1 className="am-display sm" style={{ fontSize: 144 }}>
          {S(pageCms, "title", lang, T("serv_title_1") + " " + T("serv_title_2") + " " + T("serv_title_3"))}
        </h1>
        <p className="am-body lg" style={{ marginTop: 28, maxWidth: 640, fontSize: 17 }}>{S(pageCms, "intro", lang, T("serv_intro"))}</p>
      </section>

      <hr className="am-rule" />

      {/* Six services as numbered editorial rows */}
      <section style={{ padding: "0 48px 56px" }}>
        {services.map((s, i) => {
          const delivs = s.deliverables ? s.deliverables.split("\n").filter(function(x) { return x.trim(); }) : defaultDelivs;
          return (
            <div key={i} style={{
              display: "grid", gridTemplateColumns: "60px 1.4fr 1fr 1fr 1fr",
              gap: 28, padding: "36px 0", borderBottom: "1px solid var(--line-soft)",
              alignItems: "start",
            }}>
              <div className="am-h2" style={{ fontSize: 36, color: "var(--ink-3)", fontWeight: 800 }}>0{i + 1}</div>
              <div>
                <h2 className="am-h2" style={{ fontSize: 30, marginBottom: 10 }}>{s.title}</h2>
                <p className="am-body lg" style={{ fontSize: 15, maxWidth: 380 }}>{s.body}</p>
              </div>
              <div>
                <div className="am-mono" style={{ color: "var(--ink-3)", marginBottom: 6 }}>{lang === "th" ? "ค่าบริการ" : "Fee"}</div>
                <div className="am-body lg" style={{ fontSize: 18, fontWeight: 600 }}>{s.fee}</div>
                <div className="am-mono" style={{ color: "var(--ink-3)", marginTop: 14, marginBottom: 6 }}>{lang === "th" ? "ระยะเวลา" : "Typical timeline"}</div>
                <div className="am-body lg" style={{ fontSize: 15 }}>{s.time}</div>
              </div>
              <div>
                <div className="am-mono" style={{ color: "var(--ink-3)", marginBottom: 6 }}>{lang === "th" ? "งานที่ส่งมอบ" : "Deliverables"}</div>
                <ul style={{ padding: 0, margin: 0, listStyle: "none", fontSize: 13, color: "var(--ink-2)", lineHeight: 1.7 }}>
                  {delivs.map((it, k) => <li key={k}>— {it.replace(/^—\s*/, "")}</li>)}
                </ul>
              </div>
              <Img src={s.image} h={170} />
            </div>
          );
        })}
      </section>

      {/* Process — four steps (mirrors the studio's real workflow) */}
      <SectionLabel left={S(pageCms, "process_label", lang, T("serv_process_label"))} right="04 STEPS" />
      <section className="am-pad" style={{ padding: "44px 48px 80px" }}>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 28 }}>
          {[1, 2, 3, 4].map(i => {
            const cmsStep = (pageCms.process && pageCms.process[i - 1]) || null;
            const stepTitle = cmsStep ? (lang === "th" ? cmsStep.title_th : cmsStep.title_en) || T(`serv_step${i}_t`) : T(`serv_step${i}_t`);
            const stepBody  = cmsStep ? (lang === "th" ? cmsStep.body_th  : cmsStep.body_en)  || T(`serv_step${i}_b`) : T(`serv_step${i}_b`);
            return (
              <div key={i} style={{ borderTop: "1.5px solid var(--ink)", paddingTop: 18 }}>
                <div className="am-mono" style={{ color: "var(--ink-3)" }}>STEP 0{i}</div>
                <h3 className="am-h2" style={{ fontSize: 28, margin: "6px 0 12px" }}>{stepTitle}</h3>
                <p className="am-body" style={{ maxWidth: 260 }}>{stepBody}</p>
                <div style={{ display: "flex", gap: 4, marginTop: 18 }}>
                  {[1,2,3,4].map(j => <span key={j} style={{ width: 14, height: 4, background: j === i ? "var(--ink)" : "var(--line-soft)" }} />)}
                </div>
              </div>
            );
          })}
        </div>
      </section>

      {/* Inline CTA */}
      <section style={{ background: "var(--paper)", padding: "56px 48px" }}>
        <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 64, alignItems: "end" }}>
          <h2 className="am-h1" style={{ fontSize: 60 }}>
            {S(pageCms, "quote_cta_title", lang, lang === "th" ? "อยากเริ่มโครงการ?" : "Thinking about a project?")}
          </h2>
          <div>
            <p className="am-body lg" style={{ maxWidth: 380 }}>
              {S(pageCms, "quote_cta_body", lang, lang === "th" ? "ส่งขนาดที่ดินและความต้องการคร่าว ๆ มาให้เราดู — เราจะบอกตรง ๆ ว่าอะไรเป็นไปได้" : "Send us your plot size and a rough programme — we'll tell you honestly what's possible.")}
            </p>
            <button className="am-btn" style={{ marginTop: 18 }} onClick={() => window.AM_NAVIGATE && window.AM_NAVIGATE("contact")}>
              {lang === "th" ? "ติดต่อเรา →" : "Get in touch →"}
            </button>
          </div>
        </div>
      </section>

      <Footer />
    </div>
  );
}

// ===========================================================================
// JOURNAL INDEX
// ===========================================================================

function PageJournal({ lang }) {
  lang = lang || window.AM_LANG || "en";
  const JOURNAL = window.SITE_DATA ? window.SITE_DATA.journal.filter(function(j) { return j.status === "published"; }) : [];
  const feat = JOURNAL[0] || {};
  const rest = JOURNAL.slice(1);
  const pageCms = (window.SITE_DATA && window.SITE_DATA.journalIndexPage) || {};
  const S = window.S || function(o, k, l, f) { return (o && (o[k+"_"+l] || o[k+"_en"])) || f || ""; };
  const cats = [
    { id: "all",   t: "j_cat_all" },
    { id: "field", t: "j_cat_field" },
    { id: "essay", t: "j_cat_essay" },
    { id: "studio",t: "j_cat_studio" },
    { id: "press", t: "j_cat_press" },
  ];
  const goArticle = (id) => {
    if (window.AM_NAVIGATE) window.AM_NAVIGATE("article", id);
  };

  return (
    <div className="am-root am-page" data-lang={lang}>
      <Nav active="journal" />
      <section style={{ padding: "56px 48px 36px" }}>
        <div className="am-eyebrow" style={{ marginBottom: 18 }}>04 · JOURNAL</div>
        <h1 className="am-display sm" style={{ fontSize: 144 }}>{S(pageCms, "title", lang, T("journal_title_1"))}</h1>
        <p className="am-body lg" style={{ marginTop: 26, maxWidth: 640, fontSize: 17 }}>{S(pageCms, "intro", lang, T("journal_intro"))}</p>
      </section>

      {/* Category tabs */}
      <section style={{ padding: "0 48px", borderTop: "1.5px solid var(--line)", borderBottom: "1.5px solid var(--line)" }}>
        <div style={{ display: "flex", gap: 28, padding: "14px 0", alignItems: "baseline" }}>
          {cats.map((c, i) => (
            <div key={c.id} className="am-mono" style={{
              color: i === 0 ? "var(--ink)" : "var(--ink-3)",
              borderBottom: i === 0 ? "1.5px solid var(--ink)" : "none",
              paddingBottom: 4, fontSize: 12,
            }}>{T(c.t)} <span style={{ marginLeft: 4, color: "var(--ink-4)" }}>({i === 0 ? JOURNAL.length : JOURNAL.filter(function(j) { return j.cat === c.id; }).length})</span></div>
          ))}
          <div style={{ marginLeft: "auto" }} className="am-mono am-muted">{lang === "th" ? "เรียงตามใหม่" : "Sort · Newest"}</div>
        </div>
      </section>

      {/* Featured */}
      {feat.id && (
        <section style={{ padding: "44px 48px 28px" }}>
          <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 48, alignItems: "end", cursor: "pointer" }}
               onClick={() => goArticle(feat.id)}>
            <Img src={photoSrc(feat.photo)} h={520} label={feat.date} />
            <div>
              <div className="am-mono" style={{ color: "var(--accent)" }}>FEATURED · {feat.date}</div>
              <h2 className="am-h1" style={{ fontSize: 52, marginTop: 14, letterSpacing: "-0.025em" }}>{lang === "th" ? feat.title_th : feat.title_en}</h2>
              <p className="am-body lg" style={{ marginTop: 18, maxWidth: 460 }}>{lang === "th" ? feat.lede_th : feat.lede_en}</p>
              <div className="am-mono" style={{ marginTop: 22, borderBottom: "1px solid var(--ink)", paddingBottom: 2, display: "inline-block" }}>{lang === "th" ? "อ่านต่อ →" : "READ →"}</div>
            </div>
          </div>
        </section>
      )}

      {/* Grid of articles */}
      <section style={{ padding: "44px 48px 24px" }}>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 36, rowGap: 60 }}>
          {rest.map(j => (
            <article key={j.id} style={{ cursor: "pointer" }} onClick={() => goArticle(j.id)}>
              <Img src={photoSrc(j.photo)} h={240} />
              <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={{ fontSize: 21, marginTop: 6, lineHeight: 1.25 }}>{lang === "th" ? j.title_th : j.title_en}</h3>
            </article>
          ))}
        </div>
      </section>

      {/* Count */}
      <section style={{ padding: "32px 48px 80px", display: "flex", justifyContent: "space-between", alignItems: "baseline", borderTop: "1.5px solid var(--line)", marginTop: 32 }}>
        <div className="am-mono">{JOURNAL.length} {lang === "th" ? "รายการ" : "ENTRIES"}</div>
      </section>

      <Footer />
    </div>
  );
}

// ===========================================================================
// JOURNAL ARTICLE
// ===========================================================================
function PageArticle({ lang, articleId }) {
  lang = lang || window.AM_LANG || "en";
  const id = articleId || window.AM_NAV_ID;
  const JOURNAL = window.SITE_DATA ? window.SITE_DATA.journal.filter(function(j) { return j.status === "published"; }) : [];
  const article = JOURNAL.find(function(j) { return j.id === id; }) || JOURNAL[0] || {};
  const articleIdx = JOURNAL.indexOf(article);
  const nextArticle = JOURNAL[articleIdx + 1] || JOURNAL[0] || {};
  const others = JOURNAL.filter(function(j) { return j.id !== article.id; }).slice(0, 2);
  const catLabel = ({ field: "FIELD NOTES", studio: "STUDIO", essay: "ESSAY", press: "PRESS" })[article.cat] || (article.cat || "").toUpperCase();
  const body = (lang === "th" ? article.body_th : article.body_en) || "";

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

      <section style={{ padding: "48px 48px 24px" }}>
        <div className="am-mono" style={{ color: "var(--ink-3)", marginBottom: 18, cursor: "pointer" }}
             onClick={() => window.AM_NAVIGATE && window.AM_NAVIGATE("journal")}>
          ← {T("nav_journal")} / {catLabel}
        </div>
        <h1 className="am-h1" style={{ fontSize: 76, letterSpacing: "-0.03em", lineHeight: 1.02, maxWidth: 1100 }}>
          {lang === "th" ? article.title_th : article.title_en}
        </h1>
        <div className="am-mono" style={{ marginTop: 28, color: "var(--ink-3)" }}>{article.date}</div>
      </section>

      <div style={{ padding: "16px 48px 32px" }}>
        <Img src={photoSrc(article.photo)} h={620} label="01" />
      </div>

      <section style={{ padding: "20px 48px 56px" }}>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 2fr 1fr", gap: 48 }}>
          {/* Side rail */}
          <aside>
            <div className="am-mono" style={{ color: "var(--ink-3)", marginBottom: 6 }}>{lang === "th" ? "หมวด" : "Category"}</div>
            <span className="am-chip">{catLabel}</span>
            {article.link && (
              <React.Fragment>
                <div className="am-mono" style={{ color: "var(--ink-3)", marginTop: 24, marginBottom: 6 }}>{lang === "th" ? "ต้นฉบับ" : "Original"}</div>
                <a href={article.link} target="_blank" rel="noopener" className="am-body" style={{ color: "var(--ink)" }}>↗ {lang === "th" ? "เปิดลิงก์" : "Open link"}</a>
              </React.Fragment>
            )}
          </aside>

          {/* Article body */}
          <article style={{ fontFamily: "inherit" }}>
            <p style={{ fontSize: 22, lineHeight: 1.45, fontWeight: 500, margin: 0, letterSpacing: "-0.01em" }}>{lang === "th" ? article.lede_th : article.lede_en}</p>
            {body && (
              <React.Fragment>
                <hr className="am-rule soft" style={{ margin: "28px 0" }} />
                <p style={{ fontSize: 15, lineHeight: 1.75, color: "var(--ink-2)", whiteSpace: "pre-wrap" }}>{body}</p>
              </React.Fragment>
            )}
          </article>

          {/* Right rail — related */}
          <aside>
            {others.length > 0 && <div className="am-mono" style={{ color: "var(--ink-3)", marginBottom: 14 }}>{lang === "th" ? "รายการอื่น" : "More"}</div>}
            {others.map(function(j) {
              return (
                <div key={j.id} style={{ marginBottom: 24, paddingBottom: 18, borderBottom: "1px solid var(--line-soft)", cursor: "pointer" }}
                     onClick={() => window.AM_NAVIGATE && window.AM_NAVIGATE("article", j.id)}>
                  <Img src={photoSrc(j.photo)} h={140} />
                  <h4 className="am-h3" style={{ fontSize: 16, marginTop: 12, lineHeight: 1.3 }}>{lang === "th" ? j.title_th : j.title_en}</h4>
                  <div className="am-mono" style={{ marginTop: 8, color: "var(--ink-3)", fontSize: 10 }}>{(j.cat || "").toUpperCase()} · {j.date}</div>
                </div>
              );
            })}
          </aside>
        </div>
      </section>

      {/* Next article */}
      {nextArticle.id && nextArticle.id !== article.id && (
        <React.Fragment>
          <SectionLabel left={lang === "th" ? "รายการถัดไป" : "NEXT"} right="↘ ALL JOURNAL" />
          <section style={{ padding: "28px 48px 80px" }}>
            <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 48, alignItems: "end", cursor: "pointer" }}
                 onClick={() => window.AM_NAVIGATE && window.AM_NAVIGATE("article", nextArticle.id)}>
              <Img src={photoSrc(nextArticle.photo)} h={380} />
              <div>
                <div className="am-mono" style={{ color: "var(--ink-3)" }}>{nextArticle.cat && nextArticle.cat.toUpperCase()} · {nextArticle.date}</div>
                <h2 className="am-h1" style={{ fontSize: 48, marginTop: 10 }}>{lang === "th" ? nextArticle.title_th : nextArticle.title_en}</h2>
                <p className="am-body lg" style={{ marginTop: 14, maxWidth: 380 }}>{lang === "th" ? nextArticle.lede_th : nextArticle.lede_en}</p>
              </div>
            </div>
          </section>
        </React.Fragment>
      )}

      <Footer />
    </div>
  );
}

// ===========================================================================
// ABOUT
// ===========================================================================
function PageAbout({ lang }) {
  lang = lang || window.AM_LANG || "en";
  const p = AM_PHOTOS;
  const pageCms = (window.SITE_DATA && window.SITE_DATA.aboutPage) || {};
  const S = window.S || function(o, k, l, f) { return (o && (o[k+"_"+l] || o[k+"_en"])) || f || ""; };

  // The three real partners (fallback; can be overridden from Sanity)
  const defaultTeam = [
    { name: T("team_1_n"), role: T("team_1_r") },
    { name: T("team_2_n"), role: T("team_2_r") },
    { name: T("team_3_n"), role: T("team_3_r") },
  ];
  const team = (pageCms.team && pageCms.team.length ? pageCms.team : []).map(function(m) {
    return { name: m.name, role: (lang === "th" ? m.role_th : m.role_en), photo: m.photo, year: m.year_joined };
  });
  const teamToShow = team.length ? team : defaultTeam;

  // Quick facts — real numbers only
  const defaultStats = [
    { value: "2018", label: lang === "th" ? "ปีที่เริ่มงาน" : "First commission" },
    { value: "20+",  label: lang === "th" ? "โครงการ" : "Commissions" },
    { value: "3",    label: lang === "th" ? "สถาปนิกหุ้นส่วน" : "Licensed partners" },
    { value: "TH·JP", label: lang === "th" ? "พื้นที่ทำงาน" : "Countries" },
  ];
  const stats = (pageCms.stats && pageCms.stats.length ? pageCms.stats : []).map(function(st) {
    return { value: st.value, label: (lang === "th" ? st.label_th : st.label_en) };
  });
  const statsToShow = stats.length ? stats : defaultStats;

  const heroImage = pageCms.hero_image || p.baan_int1;

  // Principles
  const defaultPrinciples = [
    { title: lang === "th" ? "ทุกตารางเมตรมีค่า" : "Every square meter counts", body: lang === "th" ? "การใช้พื้นที่อย่างคุ้มค่ามีความหมายทั้งต่อความรู้สึกและต่อการลงทุน — ห้องที่สัดส่วนดีคือผลตอบแทนที่คุ้มค่า" : "Efficient use of area matters emotionally and economically — a well-proportioned room is a worthy return on investment." },
    { title: lang === "th" ? "ผูกพันกับที่ตั้ง" : "Bound to the site", body: lang === "th" ? "ทุกโครงการเริ่มต้นจากศึกษาที่ดินและความเป็นไปได้ ก่อนจะเริ่มลากเส้นแรก" : "Every project begins with the land and a feasibility study — before the first line is drawn." },
    { title: lang === "th" ? "สามศาสตร์ หนึ่งทีม" : "Three disciplines, one team", body: lang === "th" ? "สถาปัตยกรรมที่ดีขาดงานภายในและภูมิทัศน์ไม่ได้ เราจึงออกแบบทั้งสามอย่างไปพร้อมกัน" : "Exceptional architecture cannot exist without interior and landscape design — so we design all three together." },
  ];
  const principles = (pageCms.principles && pageCms.principles.length ? pageCms.principles : []).map(function(pr) {
    return { title: (lang === "th" ? pr.title_th : pr.title_en), body: (lang === "th" ? pr.body_th : pr.body_en) };
  });
  const principlesToShow = principles.length ? principles : defaultPrinciples;

  // Publications & press — real items only (see Journal for details)
  const defaultAwards = [
    { year: "2024", title: lang === "th" ? "Lomsak Residence — หนังสือ Small Medium Houses Vol.9 (Li-Zenn)" : "Lomsak Residence — Small Medium Houses Vol.9, Li-Zenn Publishing" },
    { year: "2023", title: lang === "th" ? "Lomsak Residence — เข้าชิง ArchDaily Building of the Year" : "Lomsak Residence — ArchDaily Building of the Year nominee" },
    { year: "2023", title: lang === "th" ? "291 Garage House — นิตยสารบ้านและสวน (มกราคม)" : "291 Garage House — Baan Lae Suan magazine (January)" },
    { year: "2023", title: lang === "th" ? "Lomsak Residence — บทความ DWELL ทาง dsignsomething.com" : "Lomsak Residence — DWELL article, dsignsomething.com" },
  ];
  const awards = (pageCms.awards && pageCms.awards.length ? pageCms.awards : []).map(function(a) {
    return { year: a.year, title: (lang === "th" ? a.title_th : a.title_en), url: a.url };
  });
  const awardsToShow = awards.length ? awards : defaultAwards;

  return (
    <div className="am-root am-page" data-lang={lang}>
      <Nav active="about" />
      <section style={{ padding: "56px 48px 32px" }}>
        <div className="am-eyebrow" style={{ marginBottom: 18 }}>05 · ABOUT THE STUDIO</div>
        <h1 className="am-display sm" style={{ fontSize: 128 }}>
          {S(pageCms, "title", lang, T("about_title_1") + " " + T("about_title_2") + " " + T("about_title_3") + " " + T("about_title_4"))}
        </h1>
        <p className="am-h2" style={{ marginTop: 32, fontSize: 28, fontWeight: 500, letterSpacing: "-0.015em", lineHeight: 1.2, maxWidth: 820 }}>{S(pageCms, "lede", lang, T("about_lede"))}</p>
      </section>

      <div style={{ padding: "16px 48px 32px" }}>
        <Img src={heroImage} h={520} label={S(pageCms, "hero_caption", lang, lang === "th" ? "กรุงเทพฯ ประเทศไทย" : "BANGKOK, THAILAND")} />
      </div>

      {/* Stats / quick facts */}
      <section style={{ padding: "0 48px 64px" }}>
        <div className="am-stats">
          {statsToShow.map(function(st, i) {
            return <div key={i} className="cell"><div className="num">{st.value}</div><div className="lbl">{st.label}</div></div>;
          })}
        </div>
      </section>

      {/* The practice — studio statement */}
      <SectionLabel left={"01 · " + T("about_founder").toUpperCase()} right="EST. 2018" />
      <section style={{ padding: "44px 48px 80px" }}>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: 64, alignItems: "start" }}>
          <Img src={pageCms.founder_photo || p.hero} h={560} label="ARCHITECTURE'S MATTER" />
          <div>
            <p className="am-body lg" style={{ fontSize: 17, marginTop: 0, maxWidth: 560, lineHeight: 1.7 }}>
              {S(pageCms, "founder_bio", lang, T("about_statement_1"))}
            </p>
            <p className="am-body" style={{ marginTop: 18, maxWidth: 560, lineHeight: 1.7 }}>
              {S(pageCms, "founder_extra", lang, T("about_statement_2"))}
            </p>
          </div>
        </div>
      </section>

      {/* Partners */}
      <SectionLabel left={"02 · " + T("about_team").toUpperCase()} right={teamToShow.length + (lang === "th" ? " คน" : " PARTNERS")} />
      <section style={{ padding: "44px 48px 80px" }}>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 28, rowGap: 48 }}>
          {teamToShow.map(function(m, i) {
            return (
              <div key={i} style={{ borderTop: "1.5px solid var(--ink)", paddingTop: 18 }}>
                {m.photo && <Img src={m.photo} h={320} style={{ marginBottom: 14 }} />}
                <div className="am-mono" style={{ color: "var(--ink-3)" }}>{String(i + 1).padStart(2, "0")}</div>
                <h3 className="am-h2" style={{ fontSize: 26, marginTop: 6 }}>{m.name}</h3>
                <div className="am-body sm am-muted" style={{ marginTop: 6 }}>{m.role}</div>
              </div>
            );
          })}
        </div>
      </section>

      {/* What we believe */}
      <SectionLabel left={"03 · " + T("about_principles").toUpperCase()} right="THREE PARAGRAPHS" />
      <section style={{ padding: "44px 48px 80px", background: "var(--paper)" }}>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 48 }}>
          {principlesToShow.map(function(pr, i) {
            return (
              <div key={i}>
                <div className="am-display xs" style={{ fontSize: 64, lineHeight: 1, marginBottom: 14 }}>0{i + 1}</div>
                <h3 className="am-h2" style={{ fontSize: 26, marginBottom: 12 }}>{pr.title}</h3>
                <p className="am-body lg" style={{ maxWidth: 380 }}>{pr.body}</p>
              </div>
            );
          })}
        </div>
      </section>

      {/* Publications & press */}
      <SectionLabel left="04 · PUBLICATIONS & PRESS" right="2023 — 2024" />
      <section style={{ padding: "32px 48px 80px" }}>
        {awardsToShow.map(function(a, i) {
          return (
            <div key={i} style={{ display: "grid", gridTemplateColumns: "120px 1fr 200px", padding: "18px 0", borderBottom: "1px solid var(--line-soft)", alignItems: "baseline" }}>
              <div className="am-h2" style={{ fontSize: 28, fontWeight: 700 }}>{a.year}</div>
              <div className="am-body lg" style={{ fontSize: 17 }}>{a.title}</div>
              <div className="am-mono" style={{ color: "var(--ink-3)", textAlign: "right" }}>
                {a.url && <a href={a.url} target="_blank" rel="noopener" style={{ color: "inherit", textDecoration: "none" }}>↗ {lang === "th" ? "อ่านเพิ่ม" : "READ"}</a>}
              </div>
            </div>
          );
        })}
      </section>

      <Footer />
    </div>
  );
}

// ===========================================================================
// CONTACT
// ===========================================================================
function PageContact({ lang }) {
  lang = lang || window.AM_LANG || "en";
  const roles = T("contact_role_opts");
  const pageCms = (window.SITE_DATA && window.SITE_DATA.contactPage) || {};
  const settings = (window.SITE_DATA && window.SITE_DATA.settings) || {};
  const S = window.S || function(o, k, l, f) { return (o && (o[k+"_"+l] || o[k+"_en"])) || f || ""; };
  const [fields, setFields] = React.useState({ name: "", email: "", phone: "", location: "", plot: "", budget: "", start: "", message: "" });
  const [sent, setSent] = React.useState(false);

  const studioEmail = settings.email || T("footer_email");

  const handleSubmit = (e) => {
    e.preventDefault();
    if (!fields.name || !fields.email) return;
    var inquiry = Object.assign({}, fields, { submitted_at: new Date().toISOString(), lang: lang });
    var existing = (window.SITE_DATA && window.SITE_DATA.inquiries) ? window.SITE_DATA.inquiries : [];
    if (window.AM_SAVE) window.AM_SAVE("inquiries", existing.concat([inquiry]));
    // ponytail: no form backend yet — hand the enquiry to the visitor's mail
    // client, addressed to the studio inbox. Swap for a real endpoint later.
    var subject = "Enquiry from " + fields.name + " — archsmatter.com";
    var lines = [
      "Name: " + fields.name,
      "Email: " + fields.email,
      fields.phone ? "Phone: " + fields.phone : "",
      fields.location ? "Land location: " + fields.location : "",
      fields.plot ? "Plot size: " + fields.plot : "",
      fields.budget ? "Rough budget: " + fields.budget : "",
      fields.start ? "Preferred start: " + fields.start : "",
      "",
      fields.message || "",
    ].filter(function(x) { return x !== ""; });
    window.location.href = "mailto:" + studioEmail
      + "?subject=" + encodeURIComponent(subject)
      + "&body=" + encodeURIComponent(lines.join("\n"));
    setSent(true);
  };

  return (
    <div className="am-root am-page" data-lang={lang}>
      <Nav active="contact" />
      <section style={{ padding: "56px 48px 32px" }}>
        <div className="am-eyebrow" style={{ marginBottom: 18 }}>06 · CONTACT</div>
        <h1 className="am-display sm" style={{ fontSize: 168 }}>
          <span style={{ display: "block" }}>{S(pageCms, "title", lang, T("contact_title_1") + " " + T("contact_title_2"))}</span>
        </h1>
        <p className="am-h2" style={{ marginTop: 28, fontSize: 26, fontWeight: 500, letterSpacing: "-0.015em", lineHeight: 1.25, maxWidth: 820 }}>{S(pageCms, "intro", lang, T("contact_intro"))}</p>
      </section>

      <hr className="am-rule" />

      {/* Form + studio info */}
      <section style={{ padding: "44px 48px 80px" }}>
        <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 80, alignItems: "start" }}>
          {/* Form */}
          <form style={{ borderTop: "1.5px solid var(--ink)", paddingTop: 24 }} onSubmit={handleSubmit}>
            <div className="am-mono" style={{ color: "var(--ink-3)", marginBottom: 20 }}>{T("contact_for")}</div>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12, marginBottom: 32 }}>
              {roles.map((r, i) => (
                <div key={i} style={{ padding: "14px 16px", border: i === 0 ? "1.5px solid var(--ink)" : "1px solid var(--line-soft)", background: i === 0 ? "var(--ink)" : "var(--bg)", color: i === 0 ? "white" : "var(--ink)", fontSize: 13 }}>
                  <span style={{ marginRight: 8, fontFamily: "var(--mono)", fontSize: 11 }}>0{i + 1}</span>{r}
                </div>
              ))}
            </div>

            {sent ? (
              <div style={{ padding: "32px 0", textAlign: "center" }}>
                <div className="am-h2" style={{ fontSize: 28, marginBottom: 12 }}>{lang === "th" ? "ขอบคุณครับ/ค่ะ" : "Thank you"}</div>
                <p className="am-body lg">{lang === "th" ? "อีเมลของคุณถูกเตรียมไว้แล้ว — กดส่งในแอปอีเมลของคุณได้เลย" : "Your email is ready — hit send in your mail app."}</p>
              </div>
            ) : (
              <React.Fragment>
                {[
                  { l: lang === "th" ? "ชื่อ" : "Name", k: "name", req: true },
                  { l: lang === "th" ? "อีเมล" : "Email", k: "email", req: true },
                  { l: lang === "th" ? "เบอร์โทร (ถ้าสะดวก)" : "Phone (optional)", k: "phone" },
                  { l: lang === "th" ? "ที่ตั้งที่ดิน — จังหวัด / อำเภอ" : "Where is the land — province / district", k: "location" },
                  { l: lang === "th" ? "ขนาดที่ดิน (ตร.ม. หรือ ไร่)" : "Plot size (sqm or rai)", k: "plot" },
                  { l: lang === "th" ? "งบประมาณคร่าว ๆ" : "Rough budget", k: "budget" },
                  { l: lang === "th" ? "ระยะเวลาที่อยากเริ่ม" : "When would you like to start?", k: "start" },
                ].map((f) => (
                  <div key={f.k} className="am-field">
                    <label>{f.l}{f.req ? " *" : ""}</label>
                    <input className="ipt" style={{ width: "100%", boxSizing: "border-box" }}
                           value={fields[f.k]}
                           onChange={(e) => setFields(Object.assign({}, fields, { [f.k]: e.target.value }))}
                           required={f.req} />
                  </div>
                ))}

                <div className="am-field">
                  <label>{lang === "th" ? "เล่าเรื่องครอบครัวและบ้านที่อยากได้คร่าว ๆ" : "Tell us about your household + the house you have in mind"}</label>
                  <textarea className="ipt area" style={{ minHeight: 120, width: "100%", boxSizing: "border-box", resize: "vertical" }}
                            value={fields.message}
                            onChange={(e) => setFields(Object.assign({}, fields, { message: e.target.value }))} />
                </div>

                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginTop: 32 }}>
                  <div className="am-mono am-muted">{lang === "th" ? "ภาษาที่อยากให้ตอบ:" : "Reply in:"} <span style={{ color: "var(--ink)", borderBottom: "1.5px solid var(--ink)", paddingBottom: 1, marginLeft: 8 }}>{lang === "th" ? "ไทย" : "English"}</span></div>
                  <button type="submit" className="am-btn">{T("contact_send")} →</button>
                </div>
              </React.Fragment>
            )}
          </form>

          {/* Studio info */}
          <aside>
            <div className="am-mono" style={{ color: "var(--ink-3)" }}>{T("contact_studio").toUpperCase()}</div>
            <h2 className="am-h2" style={{ fontSize: 28, marginTop: 8 }}>{(lang === "th" ? settings.addr_1_th : settings.addr_1_en) || T("footer_addr_l1")}</h2>
            <div className="am-body lg" style={{ marginTop: 4 }}>{(lang === "th" ? settings.addr_2_th : settings.addr_2_en) || T("footer_addr_l2")}</div>
            <div className="am-body sm am-muted" style={{ marginTop: 12 }}>{T("footer_remote")}</div>

            <div style={{ marginTop: 32, padding: "20px 0", borderTop: "1px solid var(--line-soft)", borderBottom: "1px solid var(--line-soft)" }}>
              <div className="am-mono" style={{ color: "var(--ink-3)", marginBottom: 6 }}>{lang === "th" ? "อีเมล" : "Email"}</div>
              <div className="am-h3" style={{ fontSize: 19 }}><a href={"mailto:" + studioEmail} style={{ color: "inherit", textDecoration: "none" }}>{studioEmail}</a></div>
              <div className="am-mono" style={{ color: "var(--ink-3)", marginTop: 18, marginBottom: 6 }}>{lang === "th" ? "โทร" : "Phone"}</div>
              <div className="am-h3" style={{ fontSize: 19 }}><a href={"tel:" + (settings.phone || T("footer_phone")).replace(/\s/g, "")} style={{ color: "inherit", textDecoration: "none" }}>{settings.phone || T("footer_phone")}</a></div>
              {settings.line && (
                <React.Fragment>
                  <div className="am-mono" style={{ color: "var(--ink-3)", marginTop: 18, marginBottom: 6 }}>LINE</div>
                  <div className="am-h3" style={{ fontSize: 19 }}>{settings.line}</div>
                </React.Fragment>
              )}
              <div className="am-mono" style={{ color: "var(--ink-3)", marginTop: 18, marginBottom: 6 }}>SOCIAL</div>
              <div className="am-h3" style={{ fontSize: 19 }}>
                <a href={settings.instagram || "https://www.instagram.com/architectureismatter"} target="_blank" rel="noopener" style={{ color: "inherit", textDecoration: "none" }}>Instagram</a>
                {" · "}
                <a href={settings.facebook || "https://www.facebook.com/architectureismatter"} target="_blank" rel="noopener" style={{ color: "inherit", textDecoration: "none" }}>Facebook</a>
              </div>
            </div>

            <div style={{ marginTop: 36, padding: 20, background: "var(--paper)" }}>
              <div className="am-mono" style={{ color: "var(--ink-3)" }}>{lang === "th" ? "ก่อนจะเขียนถึงเรา" : "Before you write"}</div>
              <ul style={{ marginTop: 10, paddingLeft: 0, listStyle: "none", fontSize: 13, lineHeight: 1.6, color: "var(--ink-2)" }}>
                {(() => {
                  var notesRaw = lang === "th" ? pageCms.before_writing_th : pageCms.before_writing_en;
                  var notes = notesRaw ? notesRaw.split("\n").filter(function(x) { return x.trim(); }) : (lang === "th"
                    ? ["— งานหลักของเราคือบ้านพักอาศัย งานภายใน และภูมิทัศน์", "— ทำงานทั่วประเทศไทย และรับงานต่างประเทศเป็นบางโครงการ", "— เราตอบทุกข้อความ แม้จะยังไม่รับงาน"]
                    : ["— Residential-led: houses, interiors and landscape", "— Working across Thailand, with selected international projects", "— We reply to every enquiry, even if we can't take the project"]);
                  return notes.map(function(l, k) { return <li key={k}>{/^—/.test(l) ? l : "— " + l}</li>; });
                })()}
              </ul>
            </div>
          </aside>
        </div>
      </section>

      <Footer />
    </div>
  );
}

Object.assign(window, { PageServices, PageJournal, PageArticle, PageAbout, PageContact });