/* === Showrooms, Heritage, Visit pages === */

function Showrooms({ openConsult, openWA }) {
  const D = window.MONILI;
  const [activeId, setActiveId] = useState(D.showrooms[0].id);
  const active = D.showrooms.find(s => s.id === activeId);

  return (
    <main data-screen-label="Showrooms">
      <section className="page-head">
        <div className="container">
          <span className="eyebrow eyebrow-gold">Visit · Three Showrooms</span>
          <h1>Come and <em>be received.</em></h1>
          <p className="lede">
            Our flagship sits inside Gold &amp; Diamond Park — Dubai's jewellery district.
            Two further boutiques sit inside Souk Madinat Jumeirah, by the water.
          </p>
        </div>
      </section>

      <div className="subnav">
        <div className="container subnav-inner">
          {D.showrooms.map(s => (
            <button key={s.id} className={"subnav-link" + (activeId === s.id ? " active" : "")} onClick={() => setActiveId(s.id)}>
              {s.name}{s.flagship ? " · Flagship" : ""}
            </button>
          ))}
        </div>
      </div>

      {/* Active showroom detail */}
      <section className="section" key={activeId} style={{ animation: "fadeUp .35s ease both" }}>
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: 48, alignItems: "start" }}>
            <div>
              <div style={{ position: "relative", aspectRatio: "4/3", overflow: "hidden", border: "1px solid var(--line)" }}>
                <img src={active.img} alt={active.name} style={{ width: "100%", height: "100%", objectFit: "cover" }}/>
                {active.flagship && (
                  <span style={{ position: "absolute", top: 18, left: 18, background: "var(--champagne)", color: "var(--ink)", padding: "6px 12px", fontSize: 10.5, letterSpacing: ".22em", textTransform: "uppercase", fontWeight: 600 }}>
                    Flagship
                  </span>
                )}
              </div>
              {/* Map block */}
              <MapBlock showroom={active}/>
            </div>
            <div>
              <span className="eyebrow eyebrow-gold">{active.label || "Showroom"}</span>
              <h2 className="serif" style={{ fontSize: 46, fontWeight: 400, lineHeight: 1.05, margin: "12px 0 0 0", letterSpacing: "-0.012em" }}>
                {active.name}
              </h2>
              <p style={{ fontSize: 16, color: "var(--charcoal)", lineHeight: 1.65, marginTop: 18 }}>
                {active.flagship
                  ? "Our original showroom and design atelier, opened in 2005 and the home of our in-house factory. The full bespoke team — designers, setters, polishers — works here under one roof."
                  : "A quieter, intimate showroom inside Souk Madinat Jumeirah — convenient for guests staying along Jumeirah Beach. Personalised viewings by appointment or walk-in."}
              </p>

              <div style={{ marginTop: 32, borderTop: "1px solid var(--line)" }}>
                <DetailRow label="Address" value={<span>{active.shop}<br/>{active.address}</span>}/>
                <DetailRow label="Hours" value={active.hours} icon="calendar"/>
                <DetailRow label="Phone" value={<a href={`tel:${active.phoneRaw}`} style={{ color: "var(--onyx)", borderBottom: "1px solid var(--line)" }}>{active.phone}</a>} icon="phone"/>
                {active.mobile && <DetailRow label="Mobile / WhatsApp" value={active.mobile} icon="wa"/>}
                <DetailRow label="Email" value={<a href="mailto:onlinesales@monilijewellers.com" style={{ color: "var(--onyx)" }}>onlinesales@monilijewellers.com</a>} icon="mail"/>
              </div>

              <div style={{ display: "flex", gap: 12, marginTop: 36, flexWrap: "wrap" }}>
                <button className="btn btn-gold" onClick={openConsult}>Book a Viewing <Icon name="arrow" size={14}/></button>
                <a className="btn btn-ghost" href={`tel:${active.phoneRaw}`}>
                  <Icon name="phone" size={14}/> Call This Showroom
                </a>
                <button className="btn btn-ghost" onClick={openWA}>
                  <Icon name="wa" size={14}/> WhatsApp
                </button>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* All three at-a-glance */}
      <section style={{ background: "var(--pearl)", padding: "80px 0", borderTop: "1px solid var(--line)" }} data-screen-label="All Showrooms">
        <div className="container">
          <div className="section-head">
            <div className="section-head-left">
              <span className="eyebrow eyebrow-gold">At a Glance</span>
              <h2 className="section-title">Three doors. <em>One house.</em></h2>
            </div>
          </div>
          <div className="showroom-row">
            {D.showrooms.map(s => (
              <div key={s.id} className="showroom-card" onClick={() => { setActiveId(s.id); window.scrollTo({ top: 0, behavior: "smooth" }); }}>
                <div className="showroom-card-frame">
                  <img src={s.img} alt={s.name}/>
                  <span className={"showroom-card-flag" + (s.flagship ? " flagship" : "")}>
                    {s.flagship ? "Flagship" : s.label}
                  </span>
                </div>
                <div className="showroom-card-body">
                  <div className="showroom-card-name">{s.name}</div>
                  <div className="showroom-card-addr">{s.shop}<br/>{s.address}</div>
                  <div className="showroom-card-hours"><Icon name="calendar" size={14}/> {s.hours}</div>
                  <div className="showroom-card-cta">
                    <a href={`tel:${s.phoneRaw}`} onClick={e => e.stopPropagation()}><Icon name="phone" size={12}/> Call</a>
                    <a onClick={e => { e.stopPropagation(); setActiveId(s.id); window.scrollTo({ top: 0, behavior: "smooth" }); }}><Icon name="pin" size={12}/> Detail</a>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>
    </main>
  );
}

function DetailRow({ label, value, icon }) {
  return (
    <div style={{ padding: "18px 0", borderBottom: "1px solid var(--line)", display: "grid", gridTemplateColumns: "140px 1fr", gap: 24, alignItems: "start" }}>
      <span className="eyebrow" style={{ display: "inline-flex", gap: 8, alignItems: "center", paddingTop: 2, color: "var(--charcoal)" }}>
        {icon && <Icon name={icon} size={13}/>} {label}
      </span>
      <span style={{ fontSize: 15, color: "var(--onyx)", lineHeight: 1.6 }}>{value}</span>
    </div>
  );
}

function MapBlock({ showroom }) {
  const mapQuery = encodeURIComponent(showroom.mapQuery || `${showroom.name} ${showroom.shop} ${showroom.address}`);
  const mapUrl = showroom.mapUrl || `https://www.google.com/maps/search/?api=1&query=${mapQuery}`;
  return (
    <div style={{ marginTop: 18, background: "var(--pearl)", aspectRatio: "16/7", position: "relative", overflow: "hidden", border: "1px solid var(--line)" }}>
      <iframe
        title={`Google Maps for ${showroom.name}`}
        src={`https://www.google.com/maps?q=${mapQuery}&z=16&output=embed`}
        loading="lazy"
        referrerPolicy="no-referrer-when-downgrade"
        style={{ width: "100%", height: "100%", border: 0, display: "block", filter: "grayscale(.1) contrast(1.04)" }}
      />
      <div style={{ position: "absolute", bottom: 14, left: 14, right: 14, display: "flex", justifyContent: "space-between", alignItems: "flex-end", gap: 16 }}>
        <div style={{ background: "var(--paper)", border: "1px solid var(--line)", padding: "10px 14px", maxWidth: 320 }}>
          <div className="eyebrow eyebrow-gold" style={{ fontSize: 10 }}>Map · Google</div>
          <div style={{ fontSize: 12.5, color: "var(--onyx)", marginTop: 2 }}>{showroom.address}</div>
        </div>
        <a className="btn btn-quiet" href={mapUrl} target="_blank" rel="noopener" style={{ background: "var(--paper)" }}>
          <Icon name="pin" size={14}/> Open in Maps
        </a>
      </div>
    </div>
  );
}

// === Heritage page ===
function Heritage({ setPage, openConsult }) {
  return (
    <main data-screen-label="Heritage">
      <section className="heritage-hero">
        <div className="heritage-hero-left">
          <span className="eyebrow eyebrow-gold">Our House · Since 2005</span>
          <h1 className="display" style={{ fontSize: "clamp(48px, 6vw, 88px)", margin: "20px 0 0 0", color: "var(--onyx)" }}>
            Two friends.<br/>One <em style={{ color: "var(--champagne-deep)", fontStyle: "italic" }}>workshop.</em><br/>Twenty years on.
          </h1>
          <p style={{ fontSize: 17, lineHeight: 1.7, color: "var(--charcoal)", marginTop: 24, maxWidth: 520 }}>
            Monili Jewellers was founded in Gold &amp; Diamond Park in 2005 by Panky Karamchandani and Vipul Gor.
            Two decades later, the founders are still on the floor — and every piece is still finished
            in our own Dubai atelier. The same simple promise: certified diamonds, considered design,
            no pressure to decide today.
          </p>
          <div style={{ display: "flex", gap: 14, marginTop: 32, flexWrap: "wrap" }}>
            <button className="btn btn-gold" onClick={openConsult}>Meet a Designer <Icon name="arrow" size={14}/></button>
            <button className="btn btn-ghost" onClick={() => setPage("showrooms")}>Visit the Flagship</button>
          </div>
        </div>
        <div className="heritage-hero-right">
          <img src="media/store/store-about-feature.webp" alt="The Monili showroom and atelier"/>
        </div>
      </section>

      <div className="heritage-stats">
        <Hstat num="2005" label="Founded" desc="Dubai · Gold &amp; Diamond Park"/>
        <Hstat num="20" suffix="yrs" label="In business" desc="Founder-led, every year"/>
        <Hstat num="3" label="Showrooms" desc="Across Dubai"/>
        <Hstat num="GIA · IGI" label="Certification" desc="Every diamond purchase" small/>
      </div>

      {/* Founders */}
      <section className="section">
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 56 }}>
            {[
              {
                name: "Panky Karamchandani",
                role: "Co-founder",
                bio: "Panky entered the Dubai jewellery trade in 2002. Four years later, he and Vipul opened a single workshop in Gold & Diamond Park with one principle: under one roof, by hand, by people you can call by name.",
              },
              {
                name: "Vipul Gor",
                role: "Co-founder",
                bio: "Vipul has been in the UAE since 2001 and looks after our design and production floor. Most of the senior craftsmen still working with us began alongside him in 2005.",
              },
            ].map(p => (
              <div key={p.name}>
                <div style={{ aspectRatio: "4/5", background: "var(--pearl)", border: "1px solid var(--line)", marginBottom: 20, display: "flex", alignItems: "flex-end", padding: 24, position: "relative", overflow: "hidden" }}>
                  {/* placeholder portrait */}
                  <div aria-hidden style={{
                    position: "absolute", inset: 0,
                    background: "repeating-linear-gradient(135deg, rgba(20,17,15,0.04) 0 1px, transparent 1px 18px)",
                  }}/>
                  <div style={{
                    position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center",
                    fontFamily: "var(--mono)", fontSize: 11, color: "rgba(20,17,15,0.35)", letterSpacing: ".18em", textTransform: "uppercase",
                  }}>portrait · awaiting supply</div>
                  <div style={{ position: "relative", zIndex: 2, background: "var(--paper)", border: "1px solid var(--line)", padding: "8px 14px" }}>
                    <span className="eyebrow eyebrow-gold" style={{ fontSize: 10 }}>{p.role}</span>
                  </div>
                </div>
                <h3 className="serif" style={{ fontSize: 30, lineHeight: 1.1, margin: 0, fontWeight: 500 }}>{p.name}</h3>
                <p style={{ fontSize: 15, color: "var(--charcoal)", lineHeight: 1.65, marginTop: 12 }}>{p.bio}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* In-house process */}
      <section className="section" style={{ background: "var(--onyx)", color: "var(--ivory)" }}>
        <div className="container">
          <div className="section-head">
            <div className="section-head-left">
              <span className="eyebrow" style={{ color: "var(--gold-soft)" }}>Under One Roof</span>
              <h2 className="section-title" style={{ color: "var(--ivory)" }}>Design, set and polish — <em style={{ color: "var(--gold-soft)" }}>all in our Dubai atelier.</em></h2>
              <p style={{ fontSize: 16, lineHeight: 1.65, color: "rgba(247,243,236,0.75)", marginTop: 18, maxWidth: 540 }}>
                We do not outsource. Designers, casters, setters, polishers and engravers all sit
                within our walls in Gold &amp; Diamond Park. It is how we keep promises on turnaround,
                quality and aftercare.
              </p>
            </div>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 0, borderTop: "1px solid rgba(255,255,255,0.12)" }}>
            {[
              ["In-house designers", "From sketch to CAD render"],
              ["Master setters", "Pavé, prong and bezel work"],
              ["GIA / IGI", "Certificates with every diamond"],
              ["Aftercare", "Repairs in ~1 working day"],
            ].map(([h, d], i) => (
              <div key={h} style={{ padding: "32px 24px", borderRight: i < 3 ? "1px solid rgba(255,255,255,0.12)" : "none", display: "flex", flexDirection: "column", gap: 8 }}>
                <span className="eyebrow" style={{ color: "var(--gold-soft)" }}>0{i + 1}</span>
                <span className="serif" style={{ fontSize: 24, lineHeight: 1.15 }}>{h}</span>
                <span style={{ fontSize: 13.5, color: "rgba(247,243,236,0.7)" }}>{d}</span>
              </div>
            ))}
          </div>
        </div>
      </section>
    </main>
  );
}

function Hstat({ num, suffix, label, desc, small }) {
  return (
    <div className="heritage-stat">
      <span className="heritage-stat-num" style={small ? { fontSize: 32 } : null}>
        {num}{suffix && <span style={{ fontSize: 20, marginLeft: 6, color: "var(--champagne-deep)" }}>{suffix}</span>}
      </span>
      <span className="heritage-stat-label">{label}</span>
      <span className="heritage-stat-desc" dangerouslySetInnerHTML={{ __html: desc }}/>
    </div>
  );
}

// === Visit / Contact page ===
function Visit({ openConsult, openWA }) {
  const D = window.MONILI;
  const [submitted, setSubmitted] = useState(false);
  const [form, setForm] = useState({
    name: "", email: "", phone: "",
    showroom: "gold-diamond-park",
    interest: "engagement",
    date: "", advisor: "", notes: "",
  });
  const interests = [
    ["engagement", "Engagement Ring"],
    ["bespoke", "Bespoke / Custom Design"],
    ["remodel", "Remodel My Gold"],
    ["gift", "Gift / Milestone"],
    ["browse", "Just Browsing"],
  ];
  const upd = (k, v) => setForm(f => ({ ...f, [k]: v }));
  const canSubmit = form.name && (form.email || form.phone);

  return (
    <main data-screen-label="Visit">
      <section className="page-head">
        <div className="container">
          <span className="eyebrow eyebrow-gold">Visit · Book · Enquire</span>
          <h1>Plan a <em>private visit.</em></h1>
          <p className="lede">
            Every consultation is private, complimentary and without obligation.
            Pick a showroom, tell us what you're after, and we'll confirm by phone or WhatsApp within one working day.
          </p>
        </div>
      </section>

      <section className="section" style={{ paddingTop: 0 }}>
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "1.3fr 1fr", gap: 56, alignItems: "start" }}>
            <div style={{ background: "var(--paper)", border: "1px solid var(--line)", padding: 40 }}>
              {!submitted ? (
                <div className="form">
                  <h3 className="serif" style={{ fontSize: 30, margin: "0 0 8px 0", fontWeight: 500 }}>Request an Appointment</h3>
                  <p style={{ fontSize: 14, color: "var(--charcoal)", margin: 0, lineHeight: 1.55 }}>
                    Required fields are marked. We confirm every appointment in person — never auto-booked.
                  </p>

                  <div className="field" style={{ marginTop: 12 }}>
                    <label>Showroom</label>
                    <div className="field-chips">
                      {D.showrooms.map(s => (
                        <button key={s.id} className={"chip chip-gold" + (form.showroom === s.id ? " active" : "")} onClick={() => upd("showroom", s.id)}>
                          {s.name}{s.flagship ? " · Flagship" : ""}
                        </button>
                      ))}
                    </div>
                  </div>

                  <div className="field">
                    <label>What brings you in?</label>
                    <div className="field-chips">
                      {interests.map(([id, label]) => (
                        <button key={id} className={"chip" + (form.interest === id ? " active" : "")} onClick={() => upd("interest", id)}>{label}</button>
                      ))}
                    </div>
                  </div>

                  <div className="form-row">
                    <div className="field">
                      <label>Your name *</label>
                      <input value={form.name} onChange={e => upd("name", e.target.value)} placeholder="Full name"/>
                    </div>
                    <div className="field">
                      <label>Advisor (optional)</label>
                      <select value={form.advisor} onChange={e => upd("advisor", e.target.value)}>
                        <option value="">No preference</option>
                        <option value="deepak">Deepak</option>
                        <option value="rahul">Rahul</option>
                        <option value="imran">Imran</option>
                      </select>
                    </div>
                  </div>

                  <div className="form-row">
                    <div className="field">
                      <label>Email *</label>
                      <input value={form.email} onChange={e => upd("email", e.target.value)} type="email" placeholder="you@email.com"/>
                    </div>
                    <div className="field">
                      <label>Phone</label>
                      <input value={form.phone} onChange={e => upd("phone", e.target.value)} placeholder="+971 …"/>
                    </div>
                  </div>

                  <div className="field">
                    <label>Preferred date</label>
                    <input type="date" value={form.date} onChange={e => upd("date", e.target.value)}/>
                  </div>

                  <div className="field">
                    <label>Anything we should know?</label>
                    <textarea value={form.notes} onChange={e => upd("notes", e.target.value)} placeholder="A budget range, a stone you have in mind, an old piece to remodel — anything helps us prepare."/>
                  </div>

                  <p style={{ fontSize: 12, color: "var(--charcoal)", lineHeight: 1.55, margin: 0 }}>
                    By submitting, you agree we may contact you to confirm. We will never share your details.
                  </p>

                  <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginTop: 8, flexWrap: "wrap", gap: 10 }}>
                    <span className="gia-badge"><Icon name="check" size={12}/> Complimentary · No obligation</span>
                    <button className="btn btn-gold" disabled={!canSubmit} style={{ opacity: canSubmit ? 1 : .4 }} onClick={() => setSubmitted(true)}>
                      Request Appointment <Icon name="arrow" size={14}/>
                    </button>
                  </div>
                </div>
              ) : (
                <div style={{ display: "flex", flexDirection: "column", gap: 18, alignItems: "flex-start", padding: 20 }}>
                  <div style={{ width: 56, height: 56, border: "1px solid var(--emerald)", color: "var(--emerald)", display: "inline-flex", alignItems: "center", justifyContent: "center" }}>
                    <Icon name="check" size={24}/>
                  </div>
                  <div className="serif" style={{ fontSize: 32, lineHeight: 1.1, fontWeight: 500 }}>
                    Thank you{form.name ? ", " + form.name.split(" ")[0] : ""}.
                  </div>
                  <p style={{ color: "var(--charcoal)", lineHeight: 1.6, margin: 0, maxWidth: 480 }}>
                    A private appointment request has been logged for{" "}
                    <strong style={{ color: "var(--onyx)" }}>{D.showrooms.find(s => s.id === form.showroom).name}</strong>
                    {form.date ? <> on <strong style={{ color: "var(--onyx)" }}>{new Date(form.date).toLocaleDateString("en-GB", { weekday: "long", day: "numeric", month: "long" })}</strong></> : null}.
                    One of our advisors will confirm by phone or WhatsApp within one working day.
                  </p>
                  <button className="btn btn-ghost" onClick={() => { setSubmitted(false); setForm({ ...form, name: "", email: "", phone: "", notes: "", date: "" }); }}>
                    Submit another request
                  </button>
                </div>
              )}
            </div>

            <aside style={{ display: "flex", flexDirection: "column", gap: 24 }}>
              <div style={{ background: "var(--pearl)", border: "1px solid var(--line)", padding: 28 }}>
                <span className="eyebrow eyebrow-gold">Prefer to message?</span>
                <h3 className="serif" style={{ fontSize: 24, margin: "10px 0 12px 0", fontWeight: 500, lineHeight: 1.15 }}>
                  Speak to a designer on WhatsApp.
                </h3>
                <p style={{ fontSize: 13.5, color: "var(--charcoal)", lineHeight: 1.55, margin: 0 }}>
                  Send a photo, a sketch, or a question. One of our advisors typically replies within the hour during showroom hours.
                </p>
                <button className="btn btn-gold" style={{ marginTop: 18, background: "#25D366", borderColor: "#25D366", color: "#06291A" }} onClick={openWA}>
                  <Icon name="wa" size={14}/> WhatsApp the Concierge
                </button>
              </div>

              <div style={{ background: "var(--paper)", border: "1px solid var(--line)", padding: 28 }}>
                <span className="eyebrow eyebrow-gold">Call a Showroom</span>
                <div style={{ display: "flex", flexDirection: "column", marginTop: 14 }}>
                  {D.showrooms.map(s => (
                    <a key={s.id} href={`tel:${s.phoneRaw}`} style={{ padding: "14px 0", borderBottom: "1px solid var(--line)", display: "grid", gridTemplateColumns: "1fr auto", gap: 16, alignItems: "center" }}>
                      <span>
                        <div style={{ fontSize: 13, color: "var(--onyx)", fontWeight: 500 }}>{s.name}</div>
                        <div style={{ fontSize: 12, color: "var(--charcoal)" }}>{s.hours}</div>
                      </span>
                      <span style={{ fontFamily: "var(--mono)", fontSize: 13, color: "var(--onyx)" }}>{s.phone}</span>
                    </a>
                  ))}
                </div>
                <div style={{ display: "flex", flexDirection: "column", gap: 8, marginTop: 20 }}>
                  <a href="mailto:onlinesales@monilijewellers.com" style={{ fontSize: 13, color: "var(--onyx)", display: "flex", alignItems: "center", gap: 8 }}>
                    <Icon name="mail" size={14}/> onlinesales@monilijewellers.com
                  </a>
                  <a href="mailto:info@monilijewellers.com" style={{ fontSize: 13, color: "var(--onyx)", display: "flex", alignItems: "center", gap: 8 }}>
                    <Icon name="mail" size={14}/> info@monilijewellers.com
                  </a>
                </div>
              </div>

              <div style={{ background: "var(--onyx)", color: "var(--ivory)", padding: 28 }}>
                <div style={{ display: "flex", gap: 6, color: "var(--champagne)", marginBottom: 8 }}>
                  {[0,1,2,3,4].map(i => <Icon key={i} name="star" size={14}/>)}
                </div>
                <div className="serif" style={{ fontSize: 22, lineHeight: 1.2, fontWeight: 500 }}>
                  5.0 from 107 Tripadvisor reviews · #11 of 905 Shopping in Dubai.
                </div>
                <p style={{ fontSize: 12.5, color: "rgba(247,243,236,0.7)", marginTop: 12, lineHeight: 1.55 }}>
                  Verified independently. The relationship is the conversion — read for yourself before you visit.
                </p>
              </div>
            </aside>
          </div>
        </div>
      </section>
    </main>
  );
}

Object.assign(window, { Showrooms, Heritage, Visit });