// page_heritage.jsx

function PageHeritage() {
  const lang = useLang();
  return (
    <main style={{ background: "var(--off-white)" }}>
      <section style={{ padding: "120px 40px 60px", textAlign: "center", background: "var(--urushi)", color: "#F4EEE3" }}>
        <div className="hoshi-eyebrow" style={{ color: "#C9A961" }}>{lang === "ja" ? "四代の系譜" : "Four Generations"}</div>
        <h1 style={{ fontFamily: "var(--serif-display)", fontSize: "clamp(56px, 7.5vw, 132px)", fontWeight: 400, lineHeight: 1.0, margin: "20px 0", letterSpacing: "-0.01em" }}>
          {lang === "ja" ? <><span style={{ fontFamily: "var(--serif-jp)", fontWeight: 300 }}>1925 —</span> <em style={{ fontStyle: "italic" }}>now</em></> : <><em style={{ fontStyle: "italic" }}>1925 — Now</em></>}
        </h1>
        <p style={{ fontFamily: "var(--serif-jp)", fontSize: 15, lineHeight: 2.0, maxWidth: 620, margin: "28px auto 0", opacity: 0.85, fontWeight: 300 }}>
          {lang === "ja" ? "銀座の一軒の工房、四つの世代、一つの誓い。" : "One Ginza atelier, four generations, a single vow."}
        </p>
      </section>

      {/* Vertical timeline */}
      <section style={{ padding: "120px 40px 160px" }}>
        <div style={{ maxWidth: 1200, margin: "0 auto", position: "relative" }}>
          {/* Center line */}
          <div style={{ position: "absolute", left: "50%", top: 0, bottom: 0, width: 1, background: "linear-gradient(180deg, transparent, #C9A961 8%, #C9A961 92%, transparent)", opacity: 0.35 }} />
          {HERITAGE.map((h, i) => {
            const left = i % 2 === 0;
            return (
              <div key={h.year} style={{ display: "grid", gridTemplateColumns: "1fr 60px 1fr", gap: 40, marginBottom: 120, alignItems: "start" }}>
                <div style={{ gridColumn: left ? 1 : 3, textAlign: left ? "right" : "left", paddingTop: 8 }}>
                  <div style={{ fontFamily: "var(--serif-display)", fontStyle: "italic", fontSize: 72, fontWeight: 400, color: "#9C7E3A", letterSpacing: "-0.01em", lineHeight: 1 }}>
                    {h.year}
                  </div>
                  <div className="hoshi-eyebrow" style={{ marginTop: 10 }}>
                    {lang === "ja" ? h.generation : h.generationEn} {lang === "ja" ? "" : "Generation"}
                  </div>
                  <div style={{ fontFamily: "var(--serif-jp)", fontSize: 24, fontWeight: 300, marginTop: 8 }}>
                    {lang === "ja" ? h.nameJa : h.nameEn}
                  </div>
                </div>
                <div style={{ gridColumn: 2, display: "flex", justifyContent: "center", paddingTop: 30 }}>
                  <div style={{ width: 14, height: 14, borderRadius: "50%", background: "#9C7E3A", boxShadow: "0 0 0 6px var(--off-white), 0 0 0 7px #9C7E3A" }} />
                </div>
                <div style={{ gridColumn: left ? 3 : 1, paddingTop: 8 }}>
                  <h3 style={{ fontFamily: "var(--serif-display)", fontSize: 24, fontWeight: 400, margin: 0, lineHeight: 1.3, letterSpacing: "-0.005em", fontStyle: "italic" }}>
                    {lang === "ja" ? h.titleJa : h.titleEn}
                  </h3>
                  <p style={{ fontFamily: "var(--serif-jp)", fontSize: 15, lineHeight: 2.0, color: "#2A2623", marginTop: 18, fontWeight: 300 }}>
                    {lang === "ja" ? h.bodyJa : h.bodyEn}
                  </p>
                </div>
              </div>
            );
          })}
        </div>
      </section>
    </main>
  );
}
window.PageHeritage = PageHeritage;
