// page_bridal.jsx

function PageBridal() {
  const { go } = useRouter();
  const lang = useLang();
  const bridalItems = PRODUCTS.filter(p => p.collection === "akatsuki");

  return (
    <main>
      <section style={{
        position: "relative",
        height: "70vh",
        minHeight: 560,
        background: "linear-gradient(180deg, #FBF8F2 0%, #F4EEE3 100%)",
        overflow: "hidden",
        display: "flex", alignItems: "center", justifyContent: "center", textAlign: "center",
      }}>
        <div style={{ position: "absolute", top: "-10%", right: "-5%", opacity: 0.55 }}>
          <PearlCanvas size={560} darkness={0.01} hueShift={-0.3} />
        </div>
        <div style={{ position: "absolute", bottom: "-15%", left: "-8%", opacity: 0.4 }}>
          <PearlCanvas size={420} darkness={0.02} hueShift={-0.1} />
        </div>
        <div style={{ position: "relative", padding: "0 40px" }}>
          <div className="hoshi-eyebrow">{lang === "ja" ? "ブライダル" : "Bridal"}</div>
          <h1 style={{ fontFamily: "var(--serif-display)", fontSize: "clamp(56px, 7vw, 128px)", fontWeight: 400, lineHeight: 1.05, margin: "20px 0 28px", letterSpacing: "-0.01em" }}>
            {lang === "ja"
              ? <><span style={{ fontFamily: "var(--serif-jp)", fontWeight: 300 }}>はじまりの、</span><em style={{ fontStyle: "italic" }}>light</em></>
              : <>The First <em style={{ fontStyle: "italic" }}>Light</em></>}
          </h1>
          <p style={{ fontFamily: "var(--serif-jp)", fontSize: 16, lineHeight: 2.0, maxWidth: 560, margin: "0 auto", color: "#2A2623", fontWeight: 300 }}>
            {lang === "ja"
              ? "結納、婚約、婚礼。そして、その先の人生へ。四代が積み重ねてきた婚礼のための、真珠とダイヤの一章。"
              : "Engagement, marriage, and the life that follows. A bridal chapter in pearl and diamond, held across four generations."}
          </p>
        </div>
      </section>

      {/* Three paths */}
      <section style={{ padding: "120px 40px", background: "var(--off-white)" }}>
        <div style={{ maxWidth: 1300, margin: "0 auto", display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 2 }}>
          {[
            { eyebrowJa: "婚約指輪", eyebrowEn: "Engagement", titleJa: "曙光", titleEn: "Shokō", descJa: "Dカラー以上、IF〜VVS2、3EXのみを使用した婚約指輪。", descEn: "Engagement rings in D-or-above, IF–VVS2, 3EX diamonds exclusively.", bg: "#FBF8F2", dark: 0.02, hue: -0.25 },
            { eyebrowJa: "結婚指輪", eyebrowEn: "Wedding", titleJa: "永々", titleEn: "Ei-Ei", descJa: "職人による手打ちの鎚目、またはミラーポリッシュの結婚指輪。", descEn: "Wedding bands with hand-hammered or mirror-polished finish.", bg: "#F1ECE3", dark: 0.04, hue: 0 },
            { eyebrowJa: "花嫁真珠", eyebrowEn: "Bridal Pearls", titleJa: "白妙", titleEn: "Shirotae", descJa: "代々、母から娘へ贈られる白真珠の連。", descEn: "White strands passed from mother to daughter.", bg: "#EFE8DB", dark: 0.04, hue: -0.1 },
          ].map((item, i) => (
            <div key={i} style={{ background: item.bg, padding: "72px 48px", aspectRatio: "1/1.25", position: "relative", overflow: "hidden", display: "flex", flexDirection: "column", justifyContent: "space-between" }}>
              <div>
                <div className="hoshi-eyebrow">{lang === "ja" ? item.eyebrowJa : item.eyebrowEn}</div>
                <h3 style={{ fontFamily: "var(--serif-jp)", fontWeight: 300, fontSize: 56, lineHeight: 1.1, margin: "16px 0 0", letterSpacing: "0.04em" }}>
                  {lang === "ja" ? item.titleJa : item.titleEn}
                </h3>
                <div style={{ fontFamily: "var(--serif-display)", fontStyle: "italic", fontSize: 20, color: "#5E5851", marginTop: 4 }}>
                  {lang === "ja" ? item.titleEn : item.titleJa}
                </div>
              </div>
              <div style={{ position: "absolute", right: -30, top: "40%", transform: "translateY(-50%)", opacity: 0.8 }}>
                <PearlCanvas size={260} darkness={item.dark} hueShift={item.hue} />
              </div>
              <div style={{ position: "relative", maxWidth: 260 }}>
                <p style={{ fontFamily: "var(--serif-jp)", fontSize: 13, lineHeight: 1.8, color: "#2A2623", margin: "0 0 20px" }}>
                  {lang === "ja" ? item.descJa : item.descEn}
                </p>
                <GhostLink onClick={() => go("collection", "akatsuki")}>
                  {lang === "ja" ? "見る" : "Explore"}
                </GhostLink>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* Bridal products */}
      <section style={{ padding: "120px 40px 160px", background: "var(--paper)" }}>
        <div style={{ maxWidth: 1400, margin: "0 auto" }}>
          <SectionHead eyebrowJa="花嫁の一点" eyebrowEn="For the Bride" titleJa="婚礼の品々" titleEn="Bridal Pieces" align="center" />
          <div style={{ marginTop: 80, display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 48 }}>
            {bridalItems.map(p => (
              <article key={p.id}>
                <ProductThumb product={p} onClick={() => go("pdp", p.id)} />
                <div style={{ marginTop: 20 }}>
                  <div className="hoshi-eyebrow">{lang === "ja" ? p.categoryJa : p.categoryEn}</div>
                  <div style={{ fontFamily: "var(--serif-jp)", fontSize: 20, fontWeight: 300, marginTop: 6 }}>{lang === "ja" ? p.nameJa : p.nameEn}</div>
                  <div style={{ fontFamily: "var(--serif-display)", fontStyle: "italic", fontSize: 15, color: "#5E5851", marginTop: 4 }}>{formatPrice(p, lang)}</div>
                </div>
              </article>
            ))}
          </div>
          <div style={{ marginTop: 80, textAlign: "center" }}>
            <SolidButton onClick={() => go("boutiques")}>
              {lang === "ja" ? "来店予約" : "Reserve a Bridal Appointment"}
            </SolidButton>
          </div>
        </div>
      </section>
    </main>
  );
}
window.PageBridal = PageBridal;