/* =========================================================================
   works.jsx — the work, quietly. A short index, then a room per product.
   ========================================================================= */

function Works({ lang }) {
  return (
    <div>
      <div className="sp-s"></div>

      <header className="rise is-in">
        <h1 className="h-title">{t(STR.work_title, lang)}</h1>
        <p className="h-sub">{t(STR.work_sub, lang)}</p>
      </header>

      <div className="sp-m"></div>

      {/* index */}
      <div className="work-list rise is-in d1">
        {WORKS.map((w) => (
          <a className="work-row" key={w.id} href={"#" + w.id} target="_self" rel="noreferrer"
            onClick={(e) => { e.preventDefault(); document.getElementById(w.id).scrollIntoView({ behavior: "smooth", block: "start" }); }}>
            <div className="work-thumb"><Photo item={w} ratio="1 / 1" /></div>
            <div>
              <div className="nm">{w.name}</div>
              <div className="one">{t(w.one, lang)}</div>
            </div>
            <span className="visit">{w.url.replace("https://", "")}</span>
          </a>
        ))}
      </div>

      <div className="sp-l"></div>

      {/* a room per product */}
      {WORKS.map((w, i) => (
        <section className="work-detail" id={w.id} key={w.id} style={{ scrollMarginTop: 24, marginTop: i ? "clamp(48px,8vw,104px)" : 0 }}>
          <div style={{ display: "grid", gridTemplateColumns: "1fr", gap: "clamp(22px,3vw,36px)" }}>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", gap: 16, flexWrap: "wrap" }}>
              <h2 className="h-title" style={{ fontSize: "clamp(30px,4vw,48px)" }}>{w.name}</h2>
              <Dateline>{t(w.field, lang)} · {w.year}</Dateline>
            </div>

            <Photo item={w} ratio="16 / 9" />

            <div style={{ display: "grid", gridTemplateColumns: "1fr", gap: 18, maxWidth: "62rem" }}>
              <p className="lede" style={{ fontStyle: "italic", maxWidth: "30ch" }}>{t(w.one, lang)}</p>
              <p className="body">{t(w.body, lang)}</p>
              <div>
                <a className="tlink" href={w.url} target="_blank" rel="noreferrer" style={{ fontSize: 16 }}>
                  {w.url.replace("https://", "")} {t(STR.work_visit, lang)}
                </a>
              </div>
            </div>
          </div>
        </section>
      ))}
    </div>
  );
}

Object.assign(window, { Works });