// page_gem.jsx — Gem encyclopedia

function PageGem() {
  const lang = useLang();
  const [active, setActive] = React.useState(GEMS[0].id);
  const gem = GEMS.find(g => g.id === active);
  const dark = hexDarkness(gem.color) > 0.5;

  return (
    <main style={{ background: "var(--off-white)" }}>
      <section style={{ padding: "100px 40px 60px", textAlign: "center" }}>
        <div className="hoshi-eyebrow">{lang === "ja" ? "宝石図鑑" : "Encyclopedia"}</div>
        <h1 style={{ fontFamily: "var(--serif-display)", fontSize: "clamp(56px, 6.5vw, 120px)", fontWeight: 400, lineHeight: 1.0, margin: "20px 0 24px", letterSpacing: "-0.01em" }}>
          {lang === "ja" ? <><span style={{ fontFamily: "var(--serif-jp)", fontWeight: 300 }}>宝石の</span> <em style={{ fontStyle: "italic" }}>Encyclopedia</em></> : <>Encyclopedia of <em style={{ fontStyle: "italic" }}>Gems</em></>}
        </h1>
        <p style={{ fontFamily: "var(--serif-jp)", fontSize: 15, lineHeight: 2.0, maxWidth: 620, margin: "0 auto", color: "#2A2623", fontWeight: 300 }}>
          {lang === "ja" ? "HOSHI Jewelleryが使用する真珠・宝石の一覧と、その選定基準。" : "The pearls and gems used by HOSHI — and the standards we hold them to."}
        </p>
      </section>

      {/* Gem detail hero */}
      <section style={{ display: "grid", gridTemplateColumns: "1fr 1fr", background: gem.color, color: dark ? "#F4EEE3" : "#0C0C0C", transition: "background 600ms, color 400ms" }}>
        <div style={{ padding: "100px 60px", display: "flex", flexDirection: "column", justifyContent: "center" }}>
          <div className="hoshi-eyebrow" style={{ color: "inherit", opacity: 0.7 }}>{gem.id.toUpperCase()}</div>
          <h2 style={{ fontFamily: "var(--serif-jp)", fontWeight: 300, fontSize: 72, letterSpacing: "0.04em", margin: "20px 0 8px", lineHeight: 1.1 }}>
            {lang === "ja" ? gem.nameJa : gem.nameEn}
          </h2>
          <div style={{ fontFamily: "var(--serif-display)", fontStyle: "italic", fontSize: 24, opacity: 0.75 }}>
            {lang === "ja" ? gem.nameEn : gem.nameJa}
          </div>
          <dl style={{ marginTop: 48, display: "grid", gridTemplateColumns: "140px 1fr", rowGap: 18, columnGap: 24, fontSize: 14, fontFamily: "var(--serif-jp)" }}>
            <dt className="hoshi-eyebrow" style={{ color: "inherit", opacity: 0.65 }}>{lang === "ja" ? "産地" : "Origin"}</dt>
            <dd style={{ margin: 0 }}>{lang === "ja" ? gem.origin : gem.originEn}</dd>
            <dt className="hoshi-eyebrow" style={{ color: "inherit", opacity: 0.65 }}>{lang === "ja" ? "寸法" : "Size"}</dt>
            <dd style={{ margin: 0 }}>{gem.size}</dd>
            <dt className="hoshi-eyebrow" style={{ color: "inherit", opacity: 0.65 }}>{lang === "ja" ? "成長" : "Season"}</dt>
            <dd style={{ margin: 0 }}>{gem.season}</dd>
            <dt className="hoshi-eyebrow" style={{ color: "inherit", opacity: 0.65 }}>{lang === "ja" ? "特徴" : "Notes"}</dt>
            <dd style={{ margin: 0, lineHeight: 1.8 }}>{lang === "ja" ? gem.notesJa : gem.notesEn}</dd>
          </dl>
        </div>
        <div style={{ position: "relative", minHeight: 640, overflow: "hidden" }}>
          <div style={{ position: "absolute", inset: 0, display: "grid", placeItems: "center" }}>
            {gem.id === "diamond" || gem.id === "sapphire" ? (
              <div style={{
                width: 300, height: 300,
                background: `radial-gradient(circle at 35% 30%, rgba(255,255,255,0.95), ${gem.color} 40%, rgba(0,0,0,0.4))`,
                clipPath: "polygon(50% 0, 100% 38%, 82% 100%, 18% 100%, 0 38%)",
                filter: "drop-shadow(0 20px 40px rgba(0,0,0,0.3))",
              }}/>
            ) : (
              <PearlCanvas size={420} darkness={dark ? 0.9 : 0.04} hueShift={gem.id === "golden" ? -0.5 : 0} overtone={gem.id === "golden" ? [40, 20, -20] : null} />
            )}
          </div>
        </div>
      </section>

      {/* Gem selector */}
      <section style={{ padding: "60px 40px 140px", background: "var(--paper)" }}>
        <div style={{ maxWidth: 1400, margin: "0 auto" }}>
          <div className="hoshi-eyebrow" style={{ marginBottom: 40 }}>{lang === "ja" ? "すべての宝石" : "All Gems"}</div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(6, 1fr)", gap: 2 }}>
            {GEMS.map(g => {
              const d = hexDarkness(g.color) > 0.5;
              return (
                <button key={g.id} onClick={() => setActive(g.id)} style={{
                  aspectRatio: "1/1.15", background: g.color, color: d ? "#F4EEE3" : "#0C0C0C",
                  padding: "24px 20px", textAlign: "left", position: "relative", overflow: "hidden",
                  border: active === g.id ? "2px solid #9C7E3A" : "2px solid transparent",
                  display: "flex", flexDirection: "column", justifyContent: "space-between",
                }}>
                  <div className="hoshi-eyebrow" style={{ color: "inherit", opacity: 0.7 }}>{g.id.toUpperCase()}</div>
                  <div style={{ position: "absolute", inset: 0, display: "grid", placeItems: "center", opacity: 0.85 }}>
                    <PearlCanvas size={120} darkness={d ? 0.9 : 0.04} hueShift={0} />
                  </div>
                  <div style={{ position: "relative" }}>
                    <div style={{ fontFamily: "var(--serif-jp)", fontSize: 18, fontWeight: 300, marginBottom: 2 }}>
                      {lang === "ja" ? g.nameJa : g.nameEn}
                    </div>
                    <div style={{ fontFamily: "var(--serif-display)", fontStyle: "italic", fontSize: 12, opacity: 0.7 }}>
                      {g.size}
                    </div>
                  </div>
                </button>
              );
            })}
          </div>
        </div>
      </section>
    </main>
  );
}
window.PageGem = PageGem;