// page_boutiques.jsx

function PageBoutiques() {
  const lang = useLang();
  return (
    <main style={{ background: "var(--off-white)" }}>
      <section style={{ padding: "120px 40px 60px", textAlign: "center" }}>
        <div className="hoshi-eyebrow">{lang === "ja" ? "店舗" : "Boutiques"}</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" }}>salons</em></> : <>Three <em style={{ fontStyle: "italic" }}>Salons</em></>}
        </h1>
      </section>

      <section style={{ padding: "60px 40px 160px" }}>
        <div style={{ maxWidth: 1400, margin: "0 auto", display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 2 }}>
          {BOUTIQUES.map((b, i) => (
            <div key={b.id} style={{ background: i % 2 === 0 ? "var(--paper)" : "var(--pearl-100)", padding: "64px 44px", aspectRatio: "3/4", position: "relative", overflow: "hidden", display: "flex", flexDirection: "column", justifyContent: "space-between" }}>
              <div>
                <div className="hoshi-eyebrow">{b.id === "ginza" ? (lang === "ja" ? "本店" : "Flagship") : (lang === "ja" ? "サロン" : "Salon")}</div>
                <h3 style={{ fontFamily: "var(--serif-jp)", fontWeight: 300, fontSize: 48, letterSpacing: "0.04em", lineHeight: 1.1, margin: "12px 0 0" }}>
                  {lang === "ja" ? b.nameJa : b.nameEn}
                </h3>
                <div style={{ fontFamily: "var(--serif-display)", fontStyle: "italic", fontSize: 18, color: "#5E5851", marginTop: 6 }}>
                  {lang === "ja" ? b.nameEn : b.nameJa}
                </div>
              </div>
              <div style={{ position: "absolute", top: "35%", right: -40, opacity: 0.4 }}>
                <PearlCanvas size={280} darkness={0.02} hueShift={-0.1} />
              </div>
              <div style={{ position: "relative", fontFamily: "var(--serif-jp)", fontSize: 13, lineHeight: 1.8, fontWeight: 300, color: "#2A2623" }}>
                <div>{lang === "ja" ? b.addressJa : b.addressEn}</div>
                <div style={{ marginTop: 12, opacity: 0.7 }}>{b.hours} · {b.phone}</div>
                <p style={{ margin: "20px 0 24px", lineHeight: 1.8 }}>{lang === "ja" ? b.note : b.noteEn}</p>
                <GhostLink onClick={() => alert(lang === "ja" ? "ご予約フォーム" : "Appointment form")}>
                  {lang === "ja" ? "来店予約" : "Reserve Visit"}
                </GhostLink>
              </div>
            </div>
          ))}
        </div>
      </section>
    </main>
  );
}
window.PageBoutiques = PageBoutiques;