// page_artisans.jsx

function PageArtisans() {
  const lang = useLang();
  const [active, setActive] = React.useState(ARTISANS[0].id);
  const a = ARTISANS.find(x => x.id === active);

  return (
    <main style={{ background: "var(--urushi)", color: "#F4EEE3", minHeight: "100vh" }}>
      <section style={{ padding: "120px 40px 60px", textAlign: "center" }}>
        <div className="hoshi-eyebrow" style={{ color: "#C9A961" }}>{lang === "ja" ? "職人" : "The Artisans"}</div>
        <h1 style={{ fontFamily: "var(--serif-display)", fontSize: "clamp(56px, 7vw, 120px)", fontWeight: 400, lineHeight: 1.0, margin: "20px 0", letterSpacing: "-0.01em" }}>
          {lang === "ja" ? <><span style={{ fontFamily: "var(--serif-jp)", fontWeight: 300 }}>手の、</span><em style={{ fontStyle: "italic" }}>archive</em></> : <>An Archive<br/> <em style={{ fontStyle: "italic" }}>of Hands</em></>}
        </h1>
      </section>
      <section style={{ display: "grid", gridTemplateColumns: "1fr 1.2fr", padding: "40px 80px 160px", maxWidth: 1400, margin: "0 auto", gap: 80 }}>
        <div>
          {ARTISANS.map(ar => (
            <button key={ar.id} onClick={() => setActive(ar.id)} style={{
              display: "block", width: "100%", textAlign: "left",
              padding: "32px 0",
              borderBottom: "1px solid rgba(244,238,227,0.12)",
              opacity: active === ar.id ? 1 : 0.5,
              transition: "opacity 300ms",
            }}>
              <div className="hoshi-eyebrow" style={{ color: active === ar.id ? "#C9A961" : "#8A8378" }}>
                {lang === "ja" ? ar.roleJa : ar.roleEn}
              </div>
              <div style={{ fontFamily: "var(--serif-jp)", fontSize: 34, fontWeight: 300, marginTop: 10 }}>
                {lang === "ja" ? ar.nameJa : ar.nameEn}
              </div>
              <div style={{ fontFamily: "var(--serif-display)", fontStyle: "italic", fontSize: 14, color: "#8A8378", marginTop: 4 }}>
                {ar.years} years
              </div>
            </button>
          ))}
        </div>
        <div style={{ position: "sticky", top: 160, height: "fit-content" }}>
          <div style={{ aspectRatio: "4/5", background: "#14110E", position: "relative", overflow: "hidden", border: "1px solid rgba(201,169,97,0.15)" }}>
            <div style={{ position: "absolute", inset: 0, display: "grid", placeItems: "center" }}>
              <PearlCanvas size={280} darkness={0.02} hueShift={a.id === "hoshino-maya" ? -0.2 : 0} />
            </div>
            <div style={{ position: "absolute", bottom: 24, left: 24, fontFamily: "var(--serif-display)", fontStyle: "italic", fontSize: 14, color: "#C9A961" }}>
              {a.nameEn}
            </div>
          </div>
          <p style={{ fontFamily: "var(--serif-jp)", fontSize: 16, lineHeight: 2.0, marginTop: 40, fontWeight: 300, opacity: 0.88 }}>
            {lang === "ja" ? a.bioJa : a.bioEn}
          </p>
        </div>
      </section>
    </main>
  );
}
window.PageArtisans = PageArtisans;