// page_warranty.jsx

function PageWarranty() {
  const lang = useLang();
  const items = [
    { nJa: "01", ja: "糸替え", en: "Re-threading", body_ja: "真珠の連は、定期的な糸の交換を無料にて承ります。何十年経っても新品同様の光を。", body_en: "Free re-stringing of pearl strands, forever." },
    { nJa: "02", ja: "磨き直し", en: "Re-polishing", body_ja: "地金の表面に生じた細かなキズは、工房にて手磨きで復元します。", body_en: "Hand-polishing to restore surface finish." },
    { nJa: "03", ja: "石の再留め", en: "Stone Re-setting", body_ja: "石留めの緩みや外れは、全て無償で対応。", body_en: "Any loose or lost stones re-set, complimentary." },
    { nJa: "04", ja: "サイズ直し", en: "Resizing", body_ja: "世代を超えて受け継ぐ指輪のサイズ直しも、生涯無償。", body_en: "Ring resizing, for generations, free." },
    { nJa: "05", ja: "破損修復", en: "Repair", body_ja: "万一の破損も、工房にて可能な限り元の姿にお戻しします。", body_en: "Damage repair, to the original form where possible." },
    { nJa: "06", ja: "鑑定書再発行", en: "Re-certification", body_ja: "鑑定書、保証書は何度でも無償で再発行。", body_en: "Certificates reissued at no cost, any number of times." },
  ];

  return (
    <main style={{ background: "var(--paper)", minHeight: "100vh" }}>
      <section style={{ padding: "140px 40px 80px", textAlign: "center", maxWidth: 1000, margin: "0 auto" }}>
        <div className="hoshi-eyebrow">{lang === "ja" ? "百年保証" : "Century Warranty"}</div>
        <h1 style={{ fontFamily: "var(--serif-display)", fontSize: "clamp(72px, 10vw, 180px)", fontWeight: 400, lineHeight: 0.95, margin: "24px 0", letterSpacing: "-0.02em" }}>
          <em style={{ fontStyle: "italic" }}>100</em>
          <span style={{ fontFamily: "var(--serif-jp)", fontWeight: 300, fontSize: "0.4em", verticalAlign: "top", marginLeft: 10 }}>
            {lang === "ja" ? "年" : "years"}
          </span>
        </h1>
        <p style={{ fontFamily: "var(--serif-jp)", fontSize: 16, lineHeight: 2.2, maxWidth: 620, margin: "0 auto", color: "#2A2623", fontWeight: 300 }}>
          {lang === "ja"
            ? "ご購入の日から百年間。持ち主が変わっても、場所が変わっても。HOSHI Jewelleryは、お届けした一点に責任を持ち続けます。"
            : "From the day of purchase, for a hundred years. No matter who the piece passes to, or where in the world. HOSHI is responsible."}
        </p>
      </section>

      <section style={{ padding: "60px 40px 100px" }}>
        <div style={{ maxWidth: 1200, margin: "0 auto", display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 2 }}>
          {items.map((it) => (
            <div key={it.nJa} style={{ background: "var(--off-white)", padding: "56px 48px", borderTop: "1px solid rgba(12,12,12,0.08)" }}>
              <div style={{ display: "flex", alignItems: "baseline", gap: 28 }}>
                <div style={{ fontFamily: "var(--serif-display)", fontStyle: "italic", fontSize: 40, color: "#9C7E3A", fontWeight: 400 }}>
                  {it.nJa}
                </div>
                <div>
                  <h3 style={{ fontFamily: "var(--serif-jp)", fontWeight: 300, fontSize: 28, margin: 0, letterSpacing: "0.04em" }}>
                    {lang === "ja" ? it.ja : it.en}
                  </h3>
                  <p style={{ fontFamily: "var(--serif-jp)", fontSize: 14, lineHeight: 1.9, marginTop: 16, color: "#2A2623", fontWeight: 300, maxWidth: 420 }}>
                    {lang === "ja" ? it.body_ja : it.body_en}
                  </p>
                </div>
              </div>
            </div>
          ))}
        </div>
      </section>

      <section style={{ padding: "100px 40px", background: "var(--urushi)", color: "#F4EEE3", textAlign: "center" }}>
        <p style={{ fontFamily: "var(--serif-display)", fontStyle: "italic", fontSize: 36, fontWeight: 400, maxWidth: 800, margin: "0 auto", lineHeight: 1.4 }}>
          {lang === "ja" ? "「一つの宝飾品の生涯は、持ち主の生涯より長くあって良い。」" : "“A jewel may outlive its owner.”"}
        </p>
        <div style={{ fontFamily: "var(--sans)", fontSize: 10, letterSpacing: "0.4em", textTransform: "uppercase", marginTop: 28, color: "#C9A961" }}>
          — Maya Hoshino
        </div>
      </section>
    </main>
  );
}
window.PageWarranty = PageWarranty;