/* =========================================================================
   home.jsx — a quiet journal index: today's frame, a recent strip,
   and the work. Reads top → bottom, lots of air.
   ========================================================================= */

const HOME_RATIOS = ["4 / 5", "1 / 1", "3 / 4", "4 / 5", "1 / 1", "3 / 4"];

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

      {/* TODAY */}
      <section className="rise is-in col">
        <Dateline dot>
          {t(STR.home_today, lang)} · {fmtStamp(TODAY.date)} · {TODAY.day}
        </Dateline>
        <div className="sp-s"></div>
        <Photo item={TODAY} ratio="3 / 2" />
        <div className="cap">
          <span className="txt">{t(TODAY.caption, lang)}</span>
        </div>
      </section>

      <div className="sp-l"></div>
      <hr className="rule" />
      <div className="sp-m"></div>

      {/* RECENTLY */}
      <section className="rise is-in d1">
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: "clamp(20px,3vw,32px)" }}>
          <Dateline>{t(STR.home_recent, lang)}</Dateline>
          <button className="tlink" onClick={() => setView("daily")} style={{ background: "none", border: 0, cursor: "pointer", font: "inherit", fontSize: 15, color: "var(--ink-soft)" }}>
            {t(STR.home_seejournal, lang)} →
          </button>
        </div>
        <div className="masonry">
          {ARCHIVE.slice(0, 6).map((p, i) => (
            <div className="m-item" key={p.date}>
              <Photo item={p} no={i + 1} ratio={HOME_RATIOS[i % HOME_RATIOS.length]} click onClick={() => setView("daily")} />
              <div className="cap">
                <span className="txt">{t(p.caption, lang)}</span>
                <span className="meta">{fmtStamp(p.date).slice(0, 6)}</span>
              </div>
            </div>
          ))}
        </div>
      </section>

      <div className="sp-l"></div>
      <hr className="rule" />
      <div className="sp-m"></div>

      {/* WORK */}
      <section className="rise is-in d2">
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: "clamp(8px,1.5vw,16px)" }}>
          <Dateline>{t(STR.home_work, lang)}</Dateline>
          <button className="tlink" onClick={() => setView("work")} style={{ background: "none", border: 0, cursor: "pointer", font: "inherit", fontSize: 15, color: "var(--ink-soft)" }}>
            {t(STR.home_seework, lang)} →
          </button>
        </div>
        <div className="work-list">
          {WORKS.map((w) => (
            <a className="work-row" key={w.id} href={w.url} target="_blank" rel="noreferrer">
              <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">{t(STR.work_visit, lang)}</span>
            </a>
          ))}
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { Home });