// page_vip.jsx

function PageVIP() {
  const lang = useLang();
  const [email, setEmail] = React.useState("");
  const [code, setCode] = React.useState("");

  return (
    <main style={{ background: "#030302", color: "#F4EEE3", minHeight: "100vh", display: "flex", alignItems: "center" }}>
      <div style={{ maxWidth: 1200, margin: "0 auto", padding: "120px 40px", display: "grid", gridTemplateColumns: "1fr 1fr", gap: 120, alignItems: "center", width: "100%" }}>
        <div>
          <div className="hoshi-eyebrow" style={{ color: "#C9A961" }}>{lang === "ja" ? "VIPサロン" : "VIP Salon"}</div>
          <h1 style={{ fontFamily: "var(--serif-display)", fontSize: "clamp(48px, 5.5vw, 96px)", fontWeight: 400, lineHeight: 1.05, margin: "24px 0 32px", letterSpacing: "-0.01em" }}>
            {lang === "ja" ? <><span style={{ fontFamily: "var(--serif-jp)", fontWeight: 300 }}>お得意様、</span><em style={{ fontStyle: "italic" }}>par privilège.</em></> : <>Par <em style={{ fontStyle: "italic" }}>Privilège</em></>}
          </h1>
          <p style={{ fontFamily: "var(--serif-jp)", fontSize: 15, lineHeight: 2.2, maxWidth: 460, opacity: 0.82, fontWeight: 300 }}>
            {lang === "ja"
              ? "長くお付き合いをいただくお客様へ、特別なサロンをご用意しております。先行お披露目、年一度の「星会」、保管庫の開錠。——すべて招待制にて。"
              : "For long-standing clients: preview access, the annual \"Hoshi-kai,\" vault openings. By invitation only."}
          </p>
          <div style={{ marginTop: 48, fontFamily: "var(--serif-jp)", fontSize: 12, color: "#8A8378", lineHeight: 1.8 }}>
            {lang === "ja" ? "招待コードは、担当の販売員よりお渡ししております。" : "Codes are issued by your personal advisor."}
          </div>
        </div>

        <div style={{ border: "1px solid rgba(201,169,97,0.2)", padding: 64, background: "rgba(20,18,15,0.6)" }}>
          <div style={{ fontFamily: "var(--serif-display)", fontStyle: "italic", fontSize: 18, color: "#C9A961", marginBottom: 32, letterSpacing: "0.1em" }}>
            ✦ Maison Privée
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 24 }}>
            <div>
              <div className="hoshi-eyebrow" style={{ color: "#C9A961", marginBottom: 12 }}>{lang === "ja" ? "メールアドレス" : "Email"}</div>
              <input
                type="email"
                value={email}
                onChange={e => setEmail(e.target.value)}
                style={{ width: "100%", background: "transparent", border: 0, borderBottom: "1px solid rgba(244,238,227,0.3)", padding: "10px 0", color: "#F4EEE3", fontFamily: "var(--serif-jp)", fontSize: 15, letterSpacing: "0.04em" }}
                placeholder="you@example.com"
              />
            </div>
            <div>
              <div className="hoshi-eyebrow" style={{ color: "#C9A961", marginBottom: 12 }}>{lang === "ja" ? "招待コード" : "Invitation Code"}</div>
              <input
                value={code}
                onChange={e => setCode(e.target.value)}
                style={{ width: "100%", background: "transparent", border: 0, borderBottom: "1px solid rgba(244,238,227,0.3)", padding: "10px 0", color: "#F4EEE3", fontFamily: "var(--serif-display)", fontSize: 20, letterSpacing: "0.4em", textAlign: "center" }}
                placeholder="— — — —"
              />
            </div>
            <button onClick={() => alert(lang === "ja" ? "認証中…" : "Verifying…")} style={{
              marginTop: 32,
              padding: "20px 32px",
              background: "#C9A961", color: "#030302",
              fontFamily: "var(--sans)", fontSize: 11, letterSpacing: "0.36em", textTransform: "uppercase",
              fontWeight: 500,
            }}>
              {lang === "ja" ? "サロンへ入る" : "Enter the Salon"}
            </button>
            <div style={{ fontFamily: "var(--sans)", fontSize: 10, letterSpacing: "0.3em", textTransform: "uppercase", color: "#8A8378", textAlign: "center", marginTop: 8 }}>
              {lang === "ja" ? "コードをお忘れの方はこちら" : "Lost your code?"}
            </div>
          </div>
        </div>
      </div>
    </main>
  );
}
window.PageVIP = PageVIP;