/* === Bespoke page — interactive 4-step journey === */
function Bespoke({ setPage, openConsult, openWA }) {
  const D = window.MONILI;
  const [active, setActive] = useState(0);
  const step = D.bespoke[active];

  return (
    <main data-screen-label="Bespoke">
      {/* HERO */}
      <section className="bespoke-hero" data-screen-label="Bespoke Hero">
        {/* faint ornament */}
        <div aria-hidden style={{
          position: "absolute", inset: 0, opacity: .18, pointerEvents: "none",
          background: "radial-gradient(800px 400px at 80% 30%, rgba(228,206,148,0.4), transparent 60%), radial-gradient(600px 400px at 20% 80%, rgba(228,206,148,0.2), transparent 60%)"
        }}/>
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: 64, alignItems: "end" }}>
            <div>
              <span className="eyebrow" style={{ color: "var(--gold-soft)" }}>Bespoke · Since 2005</span>
              <h1>
                One stone.<br/>One sketch.<br/>One <em>masterpiece.</em>
              </h1>
              <p className="lede">
                A custom commission begins with a conversation. From that first sketch through to the final reveal,
                every step happens inside our own Dubai atelier — designers, CAD, casting, setting and polishing under one roof.
              </p>
              <div style={{ display: "flex", gap: 14, marginTop: 36, flexWrap: "wrap" }}>
                <button className="btn btn-gold" onClick={openConsult}>Start Your Commission <Icon name="arrow" size={14}/></button>
                <button className="btn btn-ghost" style={{ borderColor: "rgba(247,243,236,0.4)", color: "var(--ivory)" }} onClick={openWA}>
                  <Icon name="wa" size={14}/> Chat with a Designer
                </button>
              </div>
            </div>
            <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 16 }}>
              <Stat num="4–7" unit="days" label="Typical turnaround"/>
              <Stat num="1–2" unit="weeks" label="For intricate work"/>
              <Stat num="∞" label="Design revisions"/>
              <Stat num="0" label="Obligation" emerald/>
            </div>
          </div>
        </div>
      </section>

      {/* STEPPER */}
      <section className="section" data-screen-label="Bespoke Journey">
        <div className="container">
          <div className="section-head">
            <div className="section-head-left">
              <span className="eyebrow eyebrow-gold">The Four-Step Journey</span>
              <h2 className="section-title">From a quiet conversation, <em>to a piece you will keep forever.</em></h2>
            </div>
            <div style={{ display: "flex", alignItems: "center", gap: 12, color: "var(--charcoal)" }}>
              <span className="eyebrow">Click any step</span>
              <Icon name="arrow" size={14}/>
            </div>
          </div>

          <div className="bespoke-stepper">
            <div className="bespoke-stepper-rail">
              {D.bespoke.map((s, i) => (
                <button key={s.id} className={"stepper-item" + (active === i ? " active" : "")} onClick={() => setActive(i)}>
                  <span className="stepper-num">— {s.num} · {s.name}</span>
                  <span className="stepper-name">{s.name}</span>
                  <span className="stepper-blurb">{s.blurb}</span>
                </button>
              ))}
            </div>

            <div className="bespoke-stage" key={step.id} style={{ animation: "fadeUp .35s ease both" }}>
              <div className="bespoke-stage-img">
                <img src={step.img} alt={step.name} style={{ maxWidth: "62%", maxHeight: "82%", objectFit: "contain" }}/>
                <span style={{
                  position: "absolute", bottom: 16, left: 16, background: "var(--onyx)", color: "var(--ivory)",
                  padding: "6px 12px", fontSize: 10.5, letterSpacing: ".18em", textTransform: "uppercase"
                }}>{step.caption}</span>
                <span style={{
                  position: "absolute", top: 16, right: 16, fontFamily: "var(--serif)",
                  fontSize: 56, color: "rgba(20,17,15,0.08)", fontWeight: 500, lineHeight: 1
                }}>{step.num}</span>
              </div>
              <div>
                <span className="eyebrow eyebrow-gold">Step {step.num}</span>
                <h3 style={{ marginTop: 6 }}>{step.name}</h3>
              </div>
              <p>{step.body}</p>
              <div className="detail-grid">
                {step.details.map(d => (
                  <div key={d.label} className="detail">
                    <span className="detail-label">{d.label}</span>
                    <span className="detail-value">{d.value}</span>
                  </div>
                ))}
              </div>
              <div style={{ display: "flex", gap: 12, marginTop: 8, justifyContent: "space-between", alignItems: "center" }}>
                <div style={{ display: "flex", gap: 10 }}>
                  <button className="btn btn-quiet" disabled={active === 0} style={{ opacity: active === 0 ? .35 : 1 }} onClick={() => setActive(a => Math.max(0, a - 1))}>← Previous</button>
                  <button className="btn btn-quiet" disabled={active === 3} style={{ opacity: active === 3 ? .35 : 1 }} onClick={() => setActive(a => Math.min(3, a + 1))}>Next →</button>
                </div>
                {active === 3 ? (
                  <button className="btn btn-gold" onClick={openConsult}>Begin Your Commission <Icon name="arrow" size={14}/></button>
                ) : (
                  <button className="btn-link" onClick={() => setActive(a => Math.min(3, a + 1))}>
                    Continue to {D.bespoke[Math.min(3, active + 1)].name} <Icon name="arrow" size={14}/>
                  </button>
                )}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* REMODEL CTA */}
      <section className="section" style={{ background: "var(--pearl)", paddingTop: 96 }} data-screen-label="Remodel Old Gold">
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1.2fr", gap: 56, alignItems: "center" }}>
            <div style={{ position: "relative" }}>
              <div style={{ aspectRatio: "4/5", background: "var(--paper)", border: "1px solid var(--line)", display: "flex", alignItems: "center", justifyContent: "center", position: "relative" }}>
                <img src="media/products/bangle-cluster-diamond-dress.webp" alt="Remodelled gold bangle" style={{ width: "78%", height: "78%", objectFit: "contain" }}/>
                <span style={{ position: "absolute", bottom: 16, left: 16, background: "var(--champagne)", color: "var(--ink)", padding: "6px 12px", fontSize: 10.5, letterSpacing: ".18em", textTransform: "uppercase" }}>After</span>
              </div>
            </div>
            <div>
              <span className="eyebrow eyebrow-gold">Transform Your Old Gold</span>
              <h2 className="section-title">Inherited pieces, <em>reimagined for now.</em></h2>
              <p style={{ fontSize: 16.5, lineHeight: 1.7, color: "var(--charcoal)" }}>
                Many of our long-standing clients return to remodel inherited gold or pieces no longer worn.
                We weigh and value your gold transparently, then design something entirely new around it —
                so the story moves with the piece. Bring it in for a private appraisal; there is no obligation.
              </p>
              <ul style={{ listStyle: "none", padding: 0, margin: "24px 0 0 0", display: "grid", gap: 14 }}>
                {[
                  "Free, itemised gold valuation",
                  "Re-use your existing stones and metal",
                  "Designed and crafted entirely in our atelier",
                  "Original certificates retained where provided",
                ].map(t => (
                  <li key={t} style={{ display: "flex", gap: 12, alignItems: "center" }}>
                    <span style={{ width: 22, height: 22, border: "1px solid var(--emerald)", color: "var(--emerald)", display: "inline-flex", alignItems: "center", justifyContent: "center" }}>
                      <Icon name="check" size={12}/>
                    </span>
                    <span style={{ fontSize: 14.5, color: "var(--onyx)" }}>{t}</span>
                  </li>
                ))}
              </ul>
              <button className="btn btn-gold" style={{ marginTop: 28 }} onClick={openConsult}>
                Book a Remodel Appraisal <Icon name="arrow" size={14}/>
              </button>
            </div>
          </div>
        </div>
      </section>

      {/* FAQ */}
      <section className="section" data-screen-label="Bespoke FAQ">
        <div className="container-narrow">
          <div style={{ textAlign: "center", maxWidth: 640, margin: "0 auto 56px" }}>
            <span className="eyebrow eyebrow-gold">Common Questions</span>
            <h2 className="section-title" style={{ marginTop: 14 }}>The <em>practicalities.</em></h2>
          </div>
          <FAQList items={D.faqs}/>
        </div>
      </section>
    </main>
  );
}

function Stat({ num, unit, label, emerald }) {
  return (
    <div style={{
      padding: 24, background: "rgba(247,243,236,0.04)", border: "1px solid rgba(247,243,236,0.10)",
      display: "flex", flexDirection: "column", gap: 6,
    }}>
      <div style={{ fontFamily: "var(--serif)", fontSize: 44, lineHeight: 1, color: emerald ? "#7AD0A6" : "var(--gold-soft)", fontWeight: 500 }}>
        {num}
        {unit && <span style={{ fontFamily: "var(--sans)", fontSize: 13, marginLeft: 6, letterSpacing: ".06em", textTransform: "uppercase", opacity: .85 }}>{unit}</span>}
      </div>
      <div style={{ fontSize: 11, letterSpacing: ".18em", textTransform: "uppercase", color: "rgba(247,243,236,0.7)" }}>{label}</div>
    </div>
  );
}

function FAQList({ items }) {
  const [open, setOpen] = useState(0);
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 0, borderTop: "1px solid var(--line)" }}>
      {items.map((it, i) => (
        <div key={i} style={{ borderBottom: "1px solid var(--line)" }}>
          <button onClick={() => setOpen(o => o === i ? -1 : i)} style={{
            width: "100%", padding: "22px 0", background: "transparent", border: 0,
            display: "flex", justifyContent: "space-between", alignItems: "center", textAlign: "left",
            fontFamily: "var(--serif)", fontSize: 22, color: "var(--onyx)", fontWeight: 500,
          }}>
            <span>{it.q}</span>
            <span style={{ fontSize: 22, color: "var(--champagne-deep)", fontFamily: "var(--sans)", fontWeight: 400 }}>
              {open === i ? "—" : "+"}
            </span>
          </button>
          {open === i && (
            <div style={{ paddingBottom: 24, fontSize: 15, color: "var(--charcoal)", lineHeight: 1.65, maxWidth: 720, animation: "fadeUp .25s ease both" }}>
              {it.a}
            </div>
          )}
        </div>
      ))}
    </div>
  );
}

window.Bespoke = Bespoke;