// Eva — Bespoke page

function PageBespoke({ go, openConsult }) {
  const { useState } = React;
  const [step, setStep] = useState(1);
  const [data, setData] = useState({
    piece: "Engagement ring",
    occasion: "Proposal",
    metal: "18K Yellow Gold",
    stone: "natural",
    carat: "1.0",
    budget: 15000,
    timeline: "Under a week",
    refDesc: "",
    name: "",
    contact: "",
    waOk: true,
  });
  const [submitted, setSubmitted] = useState(false);

  const pieces = ["Engagement ring", "Wedding band", "Statement ring", "Earrings", "Necklace / pendant", "Bracelet / bangle"];
  const occasions = ["Proposal", "Wedding", "Anniversary", "Birthday", "Reset of an heirloom", "Just because"];
  const metals = ["18K Yellow Gold", "18K Rose Gold", "18K White Gold", "Platinum"];
  const timelines = ["Under 24 hours", "Under a week", "2–4 weeks", "Take the time it needs"];

  return (
    <main className="evaPage evaBespokePage">
      {/* HERO */}
      <section className="evaBespokeHero">
        <div className="evaBespokeHero__media">
          <img src="media/hero-2.webp" alt="" />
          <div className="evaBespokeHero__veil" />
        </div>
        <div className="evaBespokeHero__copy">
          <SectionEyebrow light>Bespoke at Eva</SectionEyebrow>
          <h1 className="evaH1 evaH1--light">
            Your piece, drawn at the velvet,<br/>
            <em>finished in under 24 hours.</em>
          </h1>
          <p className="evaLede evaLede--light">
            Most studios "make to order" and quote four weeks. Eva keeps a master jeweller, a CAD station, casting and a setter under one roof in Gold &amp; Diamond Park — so a ring agreed at noon can sit on a finger by dinner.
          </p>
          <div className="evaBespokeHero__stat">
            <div><strong>50+</strong><span>bespoke pieces a month</span></div>
            <div><strong>under 24h</strong><span>typical turnaround</span></div>
            <div><strong>60 years</strong><span>of family craft (Mamiya, 1966)</span></div>
          </div>
        </div>
      </section>

      {/* HOW IT WORKS */}
      <section className="evaSection">
        <SectionEyebrow>How it works</SectionEyebrow>
        <h2 className="evaH2">Four steps. One day.</h2>
        <div className="evaHowGrid">
          {[
            { n: "01", t: "Consult", d: "A private 45-minute appointment — in the boutique or by video. We talk stones, metals, story, fit. Bring a sketch, an heirloom, a Pinterest board." },
            { n: "02", t: "Design", d: "By the end of the session you'll see a hand sketch. By the evening, a photoreal CAD render to approve — usually after one or two revisions." },
            { n: "03", t: "Craft", d: "Cast, set, polish — all on-site. Diamonds set by a master setter; rhodium plating done in-house. Nothing leaves Gold & Diamond Park." },
            { n: "04", t: "Deliver", d: "Hand-delivered in the boutique, or sent by insured courier worldwide — free. Comes with a GIA, IGI or HRD certificate where applicable." },
          ].map(s => (
            <div key={s.n} className="evaHowCard">
              <div className="evaHowCard__n">{s.n}</div>
              <h3>{s.t}</h3>
              <p>{s.d}</p>
            </div>
          ))}
        </div>
      </section>

      {/* QUOTE */}
      <section className="evaSection evaSection--champagne evaSection--tight">
        <figure className="evaPullQuote">
          <div className="evaPullQuote__mark">"</div>
          <blockquote>Vicky was helpful and understood exactly what we wanted and created the most stunning ring.</blockquote>
          <figcaption>A T · 5 June 2025 · Tripadvisor 5★</figcaption>
        </figure>
      </section>

      {/* REQUEST A CUSTOM DESIGN — FORM */}
      <section className="evaSection evaForm__section" id="custom-design">
        <div className="evaForm__head">
          <SectionEyebrow>Request a custom design</SectionEyebrow>
          <h2 className="evaH2">Tell us what you have in mind.</h2>
          <p className="evaLede">No commitment. We'll come back within the hour with a sketch direction, a stone option, and an indicative price — by WhatsApp, the way you want it.</p>
        </div>

        {submitted ? (
          <div className="evaForm__done">
            <div className="evaForm__doneSeal"><DiamondGlyph size={32} color="var(--gold)" /></div>
            <h3>Thank you, {data.name.split(" ")[0] || "friend"}.</h3>
            <p>Your brief is with the bench. One of our master jewellers will reach you on WhatsApp within the hour — likely from <strong>{window.EVA_FACTS.whatsappDisplay}</strong>.</p>
            <button className="evaBtn evaBtn--gold" onClick={() => { setSubmitted(false); setStep(1); }}>Start another brief</button>
          </div>
        ) : (
          <div className="evaForm">
            <div className="evaForm__progress">
              {[1, 2, 3].map(n => (
                <div key={n} className={"evaForm__progressDot " + (n === step ? "is-on" : n < step ? "is-done" : "")}>
                  <span>{n}</span>
                  <em>{n === 1 ? "The piece" : n === 2 ? "Stone & feel" : "Your details"}</em>
                </div>
              ))}
            </div>

            {step === 1 && (
              <div className="evaForm__step">
                <label className="evaForm__label">What is it?</label>
                <div className="evaForm__chips">
                  {pieces.map(o => (
                    <button key={o} className={"evaChip " + (data.piece === o ? "is-on" : "")} onClick={() => setData({ ...data, piece: o })}>{o}</button>
                  ))}
                </div>
                <label className="evaForm__label">For what occasion?</label>
                <div className="evaForm__chips">
                  {occasions.map(o => (
                    <button key={o} className={"evaChip " + (data.occasion === o ? "is-on" : "")} onClick={() => setData({ ...data, occasion: o })}>{o}</button>
                  ))}
                </div>
                <label className="evaForm__label">Reference (optional)</label>
                <textarea rows={3} value={data.refDesc} onChange={(e) => setData({ ...data, refDesc: e.target.value })} placeholder="A few words about the look you're after — or a Pinterest link, an Instagram post, a sketch description…" />
                <div className="evaForm__actions">
                  <button className="evaBtn evaBtn--gold" onClick={() => setStep(2)}>Continue →</button>
                </div>
              </div>
            )}

            {step === 2 && (
              <div className="evaForm__step">
                <label className="evaForm__label">Metal</label>
                <div className="evaForm__chips">
                  {metals.map(m => (
                    <button key={m} className={"evaChip " + (data.metal === m ? "is-on" : "")} onClick={() => setData({ ...data, metal: m })}>{m}</button>
                  ))}
                </div>

                <label className="evaForm__label">Diamond</label>
                <div className="evaForm__chips">
                  <button className={"evaChip " + (data.stone === "natural" ? "is-on" : "")} onClick={() => setData({ ...data, stone: "natural" })}>Natural · GIA-grade</button>
                  <button className={"evaChip " + (data.stone === "lab" ? "is-on" : "")} onClick={() => setData({ ...data, stone: "lab" })}>Lab-grown · IGI</button>
                  <button className={"evaChip " + (data.stone === "either" ? "is-on" : "")} onClick={() => setData({ ...data, stone: "either" })}>Open to both</button>
                  <button className={"evaChip " + (data.stone === "coloured" ? "is-on" : "")} onClick={() => setData({ ...data, stone: "coloured" })}>Coloured / fancy</button>
                </div>

                <div className="evaForm__row">
                  <div>
                    <label className="evaForm__label">Centre stone (ct)</label>
                    <select value={data.carat} onChange={(e) => setData({ ...data, carat: e.target.value })}>
                      {["0.5","0.7","1.0","1.5","2.0","2.5","3.0","3.5+","Unsure"].map(c => <option key={c}>{c}</option>)}
                    </select>
                  </div>
                  <div>
                    <label className="evaForm__label">Timeline</label>
                    <select value={data.timeline} onChange={(e) => setData({ ...data, timeline: e.target.value })}>
                      {timelines.map(t => <option key={t}>{t}</option>)}
                    </select>
                  </div>
                </div>

                <label className="evaForm__label">Indicative budget — AED <strong>{data.budget.toLocaleString("en-AE")}</strong></label>
                <input
                  type="range"
                  min="2000"
                  max="200000"
                  step="500"
                  value={data.budget}
                  onChange={(e) => setData({ ...data, budget: +e.target.value })}
                  className="evaForm__range"
                />
                <div className="evaForm__rangeLabels"><span>AED 2,000</span><span>AED 200,000+</span></div>

                <div className="evaForm__actions">
                  <button className="evaBtn evaBtn--ghost" onClick={() => setStep(1)}>← Back</button>
                  <button className="evaBtn evaBtn--gold" onClick={() => setStep(3)}>Continue →</button>
                </div>
              </div>
            )}

            {step === 3 && (
              <div className="evaForm__step">
                <div className="evaForm__row">
                  <div>
                    <label className="evaForm__label">Your name</label>
                    <input value={data.name} onChange={(e) => setData({ ...data, name: e.target.value })} placeholder="Full name" />
                  </div>
                  <div>
                    <label className="evaForm__label">WhatsApp / phone</label>
                    <input value={data.contact} onChange={(e) => setData({ ...data, contact: e.target.value })} placeholder="+971 …" />
                  </div>
                </div>
                <label className="evaForm__check">
                  <input type="checkbox" checked={data.waOk} onChange={(e) => setData({ ...data, waOk: e.target.checked })} />
                  <span>Reply by WhatsApp — usually fastest.</span>
                </label>
                <div className="evaForm__brief">
                  <div className="evaForm__briefHead">Your brief</div>
                  <ul>
                    <li><span>Piece</span><strong>{data.piece}</strong></li>
                    <li><span>Occasion</span><strong>{data.occasion}</strong></li>
                    <li><span>Metal</span><strong>{data.metal}</strong></li>
                    <li><span>Stone</span><strong>{data.stone === "lab" ? "Lab-grown · IGI" : data.stone === "natural" ? "Natural · GIA" : data.stone === "coloured" ? "Coloured / fancy" : "Open"}</strong></li>
                    <li><span>Centre</span><strong>{data.carat} ct</strong></li>
                    <li><span>Budget</span><strong>AED {data.budget.toLocaleString("en-AE")}</strong></li>
                    <li><span>Timeline</span><strong>{data.timeline}</strong></li>
                  </ul>
                </div>
                <div className="evaForm__actions">
                  <button className="evaBtn evaBtn--ghost" onClick={() => setStep(2)}>← Back</button>
                  <button className="evaBtn evaBtn--gold" onClick={() => setSubmitted(true)} disabled={!data.name || !data.contact}>Send my brief →</button>
                </div>
              </div>
            )}
          </div>
        )}
      </section>

      {/* IN-HOUSE STRIP */}
      <section className="evaSection evaSection--dark evaSection--tight">
        <div className="evaInhouse">
          <div className="evaInhouse__copy">
            <SectionEyebrow light>Made in Gold &amp; Diamond Park</SectionEyebrow>
            <h2 className="evaH2 evaH2--light">Every step under one roof.</h2>
            <p className="evaLede evaLede--light">CAD, casting, setting, polishing, plating. No outsourced contractors, no shipping a half-finished ring across town. It's the only way to honestly promise 24 hours.</p>
          </div>
          <ul className="evaInhouse__chips">
            <li>CAD &amp; rendering</li>
            <li>Wax printing</li>
            <li>Casting</li>
            <li>Diamond setting</li>
            <li>Hand polish</li>
            <li>Rhodium plating</li>
            <li>Laser engraving</li>
            <li>Certification handling</li>
          </ul>
        </div>
      </section>
    </main>
  );
}

window.PageBespoke = PageBespoke;