// page_bespoke.jsx

function PageBespoke() {
  const { go } = useRouter();
  const lang = useLang();
  const [step, setStep] = React.useState(0);
  const [form, setForm] = React.useState({ piece: "necklace", pearl: "akoya", metal: "pt950", budget: "5-10m", notes: "" });

  const steps = [
    { ja: "対話", en: "Dialogue", desc_ja: "来店またはリモートにて、約二時間。当主・星野麻耶がお客様のお話をうかがいます。", desc_en: "About two hours in boutique or remote. Maître Maya Hoshino listens." },
    { ja: "選石", en: "Sourcing", desc_ja: "原石・真珠の選定に一〜三ヶ月。必要であれば世界の産地を巡ります。", desc_en: "One to three months to source rough and pearls — travelling the globe if needed." },
    { ja: "図面", en: "Drawing", desc_ja: "鉛筆による原画、水彩、3Dモデル。当主が自ら引きます。", desc_en: "Pencil, watercolour, 3D — all drawn personally by the Maître." },
    { ja: "蝋・鋳造", en: "Wax & Cast", desc_ja: "蝋型を削り出し、プラチナを鋳造。鍛造のみで組む一点もある。", desc_en: "Carving wax, casting platinum. Some pieces are forged entirely by hand." },
    { ja: "石留・彫金", en: "Setting", desc_ja: "職人・小川と市川が、共に三〜六週間かけて仕上げる。", desc_en: "Ogawa and Ichikawa spend three to six weeks finishing." },
    { ja: "納品", en: "Delivery", desc_ja: "桐箱と和紙に包み、直接お届け、または世界どこへもFedExにて。", desc_en: "Wrapped in paulownia and washi; hand-delivered or sent worldwide via FedEx." },
  ];

  return (
    <main style={{ background: "var(--urushi)", color: "#F4EEE3" }}>
      {/* Hero */}
      <section style={{ padding: "140px 40px 100px", textAlign: "center", position: "relative", overflow: "hidden" }}>
        <div style={{ position: "absolute", top: "-20%", left: "50%", transform: "translateX(-50%)", opacity: 0.15 }}>
          <PearlCanvas size={700} darkness={0} hueShift={-0.1} />
        </div>
        <div style={{ position: "relative" }}>
          <div className="hoshi-eyebrow" style={{ color: "#C9A961" }}>{lang === "ja" ? "ビスポーク" : "Bespoke"}</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 }}>半年の、</span><em style={{ fontStyle: "italic" }}>dialogue</em></> : <>Six Months <em style={{ fontStyle: "italic" }}>of Dialogue</em></>}
          </h1>
          <p style={{ fontFamily: "var(--serif-jp)", fontSize: 16, lineHeight: 2.0, maxWidth: 620, margin: "32px auto 0", opacity: 0.85, fontWeight: 300 }}>
            {lang === "ja"
              ? "ビスポークはお話から始まります。石を決めることよりも先に、その一点が贈られる方・纏う方のことを、ゆっくりとお伺いしたい。"
              : "Bespoke begins with conversation. Before the stone, we would like to know the person."}
          </p>
        </div>
      </section>

      {/* Timeline */}
      <section style={{ padding: "60px 40px 120px" }}>
        <div style={{ maxWidth: 1300, margin: "0 auto" }}>
          <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 40, borderTop: "1px solid rgba(244,238,227,0.15)", borderBottom: "1px solid rgba(244,238,227,0.15)" }}>
            {steps.map((s, i) => (
              <button key={i} onClick={() => setStep(i)} style={{
                flex: 1, padding: "36px 20px", textAlign: "center",
                borderLeft: i === 0 ? "none" : "1px solid rgba(244,238,227,0.08)",
                background: step === i ? "rgba(201,169,97,0.12)" : "transparent",
                transition: "background 300ms",
              }}>
                <div className="hoshi-eyebrow" style={{ color: step === i ? "#C9A961" : "#8A8378" }}>
                  0{i + 1} · {lang === "ja" ? s.ja : s.en}
                </div>
                <div style={{ fontFamily: "var(--serif-display)", fontSize: 14, fontStyle: "italic", color: "#D6CBB8", marginTop: 10 }}>
                  {i === 0 ? "Day 1" : i === 1 ? "Mo 1–3" : i === 2 ? "Mo 3" : i === 3 ? "Mo 4" : i === 4 ? "Mo 5" : "Mo 6"}
                </div>
              </button>
            ))}
          </div>

          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 100, padding: "20px 40px" }}>
            <div>
              <div style={{ fontFamily: "var(--serif-display)", fontStyle: "italic", fontSize: 22, color: "#C9A961" }}>
                Chapter 0{step + 1}
              </div>
              <h3 style={{ fontFamily: "var(--serif-jp)", fontWeight: 300, fontSize: 56, margin: "12px 0 28px", letterSpacing: "0.04em" }}>
                {lang === "ja" ? steps[step].ja : steps[step].en}
              </h3>
              <p style={{ fontFamily: "var(--serif-jp)", fontSize: 16, lineHeight: 2.0, opacity: 0.85, fontWeight: 300 }}>
                {lang === "ja" ? steps[step].desc_ja : steps[step].desc_en}
              </p>
            </div>
            <div style={{ display: "grid", placeItems: "center", aspectRatio: "1/1", border: "1px solid rgba(201,169,97,0.2)" }}>
              <PearlCanvas size={280} darkness={0} hueShift={-0.1} />
            </div>
          </div>
        </div>
      </section>

      {/* Configurator */}
      <section style={{ padding: "120px 40px", background: "#050403" }}>
        <div style={{ maxWidth: 1100, margin: "0 auto" }}>
          <SectionHead eyebrowJa="ご相談フォーム" eyebrowEn="Request an Appointment" titleJa="最初の一歩" titleEn="The First Step" color="#F4EEE3" />
          <div style={{ marginTop: 64, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80 }}>
            <div style={{ display: "flex", flexDirection: "column", gap: 32 }}>
              <Field label={lang === "ja" ? "制作ご希望の品" : "Desired piece"}>
                <Radio v={form.piece} set={(v) => setForm({...form, piece: v})} opts={[
                  ["necklace", lang === "ja" ? "ネックレス" : "Necklace"],
                  ["ring", lang === "ja" ? "リング" : "Ring"],
                  ["earring", lang === "ja" ? "イヤリング" : "Earrings"],
                  ["tiara", lang === "ja" ? "ティアラ" : "Tiara"],
                  ["other", lang === "ja" ? "その他" : "Other"],
                ]} />
              </Field>
              <Field label={lang === "ja" ? "真珠" : "Pearl"}>
                <Radio v={form.pearl} set={(v) => setForm({...form, pearl: v})} opts={[
                  ["akoya", "Akoya"], ["tahiti", "Tahitian"], ["south", "South Sea"], ["golden", "Golden"], ["none", lang === "ja" ? "使わない" : "None"],
                ]} />
              </Field>
              <Field label={lang === "ja" ? "金属" : "Metal"}>
                <Radio v={form.metal} set={(v) => setForm({...form, metal: v})} opts={[
                  ["pt950", "Pt950"], ["pt1000", "Pt1000"], ["k18wg", "K18WG"], ["k18yg", "K18YG"],
                ]} />
              </Field>
              <Field label={lang === "ja" ? "ご予算（目安）" : "Budget (approx)"}>
                <Radio v={form.budget} set={(v) => setForm({...form, budget: v})} opts={[
                  ["1-5m", "¥1M–5M"], ["5-10m", "¥5M–10M"], ["10-30m", "¥10M–30M"], ["30m+", "¥30M+"], ["por", "POR"],
                ]} />
              </Field>
            </div>
            <div>
              <Field label={lang === "ja" ? "ご相談内容" : "Your story"}>
                <textarea
                  value={form.notes}
                  onChange={e => setForm({...form, notes: e.target.value})}
                  placeholder={lang === "ja" ? "贈る方との物語、お好きな形、ご希望の納期など…" : "The story, the form, the occasion…"}
                  style={{
                    width: "100%", minHeight: 220,
                    background: "transparent", color: "#F4EEE3",
                    border: "1px solid rgba(244,238,227,0.2)",
                    padding: 20,
                    fontFamily: "var(--serif-jp)", fontSize: 14, lineHeight: 1.8,
                    resize: "vertical",
                  }}
                />
              </Field>
              <div style={{ marginTop: 32, padding: 20, border: "1px solid rgba(201,169,97,0.2)", fontSize: 12, fontFamily: "var(--serif-jp)", lineHeight: 1.8, color: "#D6CBB8" }}>
                {lang === "ja" ? "想定見積もり：" : "Estimated range: "}
                <strong style={{ fontFamily: "var(--serif-display)", fontSize: 20, color: "#C9A961", fontStyle: "italic" }}>
                  {form.budget === "1-5m" ? " ¥1,000,000 – 5,000,000"
                    : form.budget === "5-10m" ? " ¥5,000,000 – 10,000,000"
                    : form.budget === "10-30m" ? " ¥10,000,000 – 30,000,000"
                    : form.budget === "30m+" ? " ¥30,000,000+"
                    : " Price on Request"}
                </strong>
              </div>
              <div style={{ marginTop: 32 }}>
                <SolidButton theme="dark" onClick={() => alert(lang === "ja" ? "ご相談を受け付けました。三営業日以内にご連絡いたします。" : "Request received. We will reply within 3 business days.")}>
                  {lang === "ja" ? "送信する" : "Submit Request"}
                </SolidButton>
              </div>
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}

function Field({ label, children }) {
  return (
    <div>
      <div className="hoshi-eyebrow" style={{ color: "#C9A961", marginBottom: 14 }}>{label}</div>
      {children}
    </div>
  );
}
function Radio({ v, set, opts }) {
  return (
    <div style={{ display: "flex", gap: 10, flexWrap: "wrap" }}>
      {opts.map(([k, label]) => (
        <button key={k} onClick={() => set(k)} style={{
          fontFamily: "var(--sans)", fontSize: 11, letterSpacing: "0.22em", textTransform: "uppercase",
          padding: "12px 18px",
          border: v === k ? "1px solid #C9A961" : "1px solid rgba(244,238,227,0.2)",
          color: v === k ? "#C9A961" : "#F4EEE3",
          background: v === k ? "rgba(201,169,97,0.08)" : "transparent",
        }}>{label}</button>
      ))}
    </div>
  );
}
window.PageBespoke = PageBespoke;