/* === Shared components: Nav, Footer, TrustStrip, WhatsApp FAB, Bottom CTA === */
const { useState, useEffect, useRef, useMemo } = React;

// ---------- Icons (lightweight inline) ----------
function Icon({ name, size = 18, ...props }) {
  const s = size;
  const stroke = "currentColor";
  switch (name) {
    case "arrow":
      return (
        <svg width={s} height={s} viewBox="0 0 24 24" fill="none" {...props}>
          <path d="M5 12h14M13 6l6 6-6 6" stroke={stroke} strokeWidth="1.4" strokeLinecap="square"/>
        </svg>
      );
    case "phone":
      return (
        <svg width={s} height={s} viewBox="0 0 24 24" fill="none" {...props}>
          <path d="M5 4h3l2 5-2.5 1.5a11 11 0 0 0 6 6L15 14l5 2v3a2 2 0 0 1-2.2 2A16 16 0 0 1 4 6.2 2 2 0 0 1 5 4Z" stroke={stroke} strokeWidth="1.4"/>
        </svg>
      );
    case "wa":
      return (
        <svg width={s} height={s} viewBox="0 0 24 24" fill="currentColor" {...props}>
          <path d="M20.4 3.6A11.7 11.7 0 0 0 12 0C5.4 0 0 5.4 0 12c0 2.1.6 4.2 1.7 6L0 24l6.2-1.6A11.9 11.9 0 0 0 12 24c6.6 0 12-5.4 12-12 0-3.2-1.3-6.2-3.6-8.4Zm-8.4 18.5c-1.8 0-3.6-.5-5.2-1.5l-.4-.2-3.7 1 1-3.6-.3-.4a9.9 9.9 0 0 1-1.5-5.3c0-5.5 4.5-10 10-10a9.9 9.9 0 0 1 9.9 10c0 5.5-4.5 10-9.9 10Zm5.5-7.5c-.3-.2-1.8-.9-2.1-1-.3-.1-.5-.2-.7.2s-.8 1-1 1.2c-.2.2-.4.2-.7.1-1.7-.9-2.9-1.6-4.1-3.7-.3-.6.3-.5.9-1.7.1-.2 0-.4 0-.5 0-.2-.7-1.7-1-2.3-.2-.6-.5-.5-.7-.5h-.6c-.2 0-.5.1-.8.4-.3.3-1 1-1 2.5s1 2.9 1.2 3.1c.2.2 2.1 3.2 5.1 4.5.7.3 1.3.5 1.7.6.7.2 1.4.2 1.9.1.6-.1 1.8-.7 2.1-1.4.3-.7.3-1.3.2-1.4l-.4-.2Z"/>
        </svg>
      );
    case "search":
      return (
        <svg width={s} height={s} viewBox="0 0 24 24" fill="none" {...props}>
          <circle cx="11" cy="11" r="6.5" stroke={stroke} strokeWidth="1.4"/>
          <path d="m20 20-4-4" stroke={stroke} strokeWidth="1.4" strokeLinecap="square"/>
        </svg>
      );
    case "pin":
      return (
        <svg width={s} height={s} viewBox="0 0 24 24" fill="none" {...props}>
          <path d="M12 22s7-6.2 7-12a7 7 0 0 0-14 0c0 5.8 7 12 7 12Z" stroke={stroke} strokeWidth="1.4"/>
          <circle cx="12" cy="10" r="2.5" stroke={stroke} strokeWidth="1.4"/>
        </svg>
      );
    case "star":
      return (
        <svg width={s} height={s} viewBox="0 0 24 24" fill="currentColor" {...props}>
          <path d="M12 2 14.6 9h7.1l-5.8 4.2 2.2 7.1L12 16l-6.1 4.3 2.2-7L2.3 9h7.1L12 2Z"/>
        </svg>
      );
    case "diamond":
      return (
        <svg width={s} height={s} viewBox="0 0 24 24" fill="none" {...props}>
          <path d="M6 9 12 3l6 6-6 12L6 9Z" stroke={stroke} strokeWidth="1.2" strokeLinejoin="round"/>
          <path d="M2 9h20" stroke={stroke} strokeWidth="1.2"/>
          <path d="M9 9 12 3l3 6-3 12-3-12Z" stroke={stroke} strokeWidth="1.2" strokeLinejoin="round"/>
        </svg>
      );
    case "check":
      return (
        <svg width={s} height={s} viewBox="0 0 24 24" fill="none" {...props}>
          <path d="m5 12 4 4 10-10" stroke={stroke} strokeWidth="1.6" strokeLinecap="square"/>
        </svg>
      );
    case "calendar":
      return (
        <svg width={s} height={s} viewBox="0 0 24 24" fill="none" {...props}>
          <rect x="3" y="5" width="18" height="16" stroke={stroke} strokeWidth="1.4"/>
          <path d="M3 9h18M8 3v4M16 3v4" stroke={stroke} strokeWidth="1.4"/>
        </svg>
      );
    case "menu":
      return (
        <svg width={s} height={s} viewBox="0 0 24 24" fill="none" {...props}>
          <path d="M4 7h16M4 12h16M4 17h16" stroke={stroke} strokeWidth="1.4"/>
        </svg>
      );
    case "close":
      return (
        <svg width={s} height={s} viewBox="0 0 24 24" fill="none" {...props}>
          <path d="m6 6 12 12M18 6 6 18" stroke={stroke} strokeWidth="1.4" strokeLinecap="square"/>
        </svg>
      );
    case "mail":
      return (
        <svg width={s} height={s} viewBox="0 0 24 24" fill="none" {...props}>
          <rect x="3" y="5" width="18" height="14" stroke={stroke} strokeWidth="1.4"/>
          <path d="m3 6 9 7 9-7" stroke={stroke} strokeWidth="1.4"/>
        </svg>
      );
    default: return null;
  }
}

// ---------- Brand mark ----------
function BrandMark({ size = 28, white = false }) {
  // Original mark: stacked diamond rosette in a circle, with wordmark in serif caps
  const stroke = white ? "var(--ivory)" : "var(--onyx)";
  return (
    <div className="nav-logo" aria-label="Monili Jewellers">
      <svg width={size} height={size} viewBox="0 0 48 48" fill="none">
        <circle cx="24" cy="24" r="22" stroke={stroke} strokeWidth="1.2"/>
        <path d="M24 11 18 22h12L24 11Z" stroke={stroke} strokeWidth="1" strokeLinejoin="round"/>
        <path d="M24 37 18 22h12l-6 15Z" stroke={stroke} strokeWidth="1" strokeLinejoin="round"/>
        <path d="M21 22 24 11l3 11M21 22l3 15 3-15" stroke={stroke} strokeWidth=".6"/>
      </svg>
      <div style={{ display: "flex", flexDirection: "column", lineHeight: 1 }}>
        <span className="nav-logo-mark" style={{ color: stroke }}>Monili</span>
        <span className="nav-logo-sub">Jewellers · Dubai</span>
      </div>
    </div>
  );
}

// ---------- Top Nav ----------
function Nav({ page, setPage, openConsult, openWA }) {
  const links = [
    ["home", "Home"],
    ["collections", "Collections"],
    ["bespoke", "Bespoke"],
    ["showrooms", "Showrooms"],
    ["heritage", "Heritage"],
    ["visit", "Visit"],
  ];
  return (
    <header className="nav">
      <div className="nav-inner">
        <div className="nav-left">
          <div onClick={() => setPage("home")} style={{ cursor: "pointer" }}>
            <BrandMark size={32}/>
          </div>
        </div>
        <nav className="nav-links">
          {links.map(([id, label]) => (
            <button
              key={id}
              className={"nav-link" + (page === id ? " active" : "")}
              onClick={() => setPage(id)}
            >{label}</button>
          ))}
        </nav>
        <div className="nav-right">
          <button className="nav-icon-btn" onClick={openWA} title="WhatsApp our concierge">
            <Icon name="wa" size={16}/>
          </button>
          <button className="nav-icon-btn" title="Visit a showroom" onClick={() => setPage("showrooms")}>
            <Icon name="pin" size={16}/>
          </button>
          <button className="btn btn-gold" onClick={openConsult}>
            Book a Private Consultation
            <Icon name="arrow" size={14}/>
          </button>
        </div>
      </div>
    </header>
  );
}

// ---------- Trust strip ----------
function TrustStrip() {
  return (
    <div className="trust">
      <div className="container">
        <div className="trust-row">
          <div className="trust-item">
            <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
              <div style={{ display: "flex", alignItems: "center", gap: 6, color: "var(--champagne)" }}>
                {[0,1,2,3,4].map(i => <Icon key={i} name="star" size={13}/>)}
              </div>
              <div className="trust-label">5.0 on Tripadvisor · 107 reviews</div>
            </div>
          </div>
          <div className="trust-item">
            <span className="trust-num">GIA · IGI</span>
            <div className="trust-label">Certified diamonds<br/>with every purchase</div>
          </div>
          <div className="trust-item">
            <span className="trust-num">20<span style={{fontSize:18, marginLeft:2}}>yrs</span></span>
            <div className="trust-label">In Dubai's Gold &amp; Diamond Park · since 2005</div>
          </div>
          <div className="trust-item">
            <span className="trust-num">3</span>
            <div className="trust-label">Private showrooms<br/>across Dubai</div>
          </div>
        </div>
      </div>
    </div>
  );
}

// ---------- WhatsApp FAB ----------
function WhatsAppFAB({ onClick }) {
  return (
    <button className="fab-wa" onClick={onClick} aria-label="Chat on WhatsApp">
      <Icon name="wa" size={26}/>
      <span className="fab-wa-tooltip">Concierge on WhatsApp</span>
    </button>
  );
}

// ---------- Sticky bottom bar (mobile/CTA) ----------
function BottomBar({ visible, openConsult, openWA }) {
  return (
    <div className={"bottom-bar" + (visible ? " visible" : "")}>
      <div className="bottom-bar-text">
        <strong>Book a Private Consultation</strong>
        <span className="accent" style={{marginLeft:8}}>·</span>
        <span style={{marginLeft:8, opacity:.8}}>No obligation, no pressure.</span>
      </div>
      <div className="bottom-bar-cta">
        <button className="btn btn-ghost" style={{borderColor:"rgba(247,243,236,0.4)", color:"var(--ivory)"}} onClick={openWA}>
          <Icon name="wa" size={14}/> WhatsApp
        </button>
        <button className="btn btn-gold" onClick={openConsult}>
          Book Now <Icon name="arrow" size={14}/>
        </button>
      </div>
    </div>
  );
}

// ---------- Footer ----------
function Footer({ setPage, openConsult }) {
  const D = window.MONILI;
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-grid">
          <div>
            <div className="footer-brand-line">Monili Jewellers</div>
            <p style={{ fontSize: 13.5, lineHeight: 1.65, color: "rgba(247,243,236,0.65)", maxWidth: 360 }}>
              Custom masterpieces, crafted in Dubai since 2005. Certified diamonds, bespoke design,
              and no-pressure guidance from our in-house designers.
            </p>
            <div style={{ display: "flex", gap: 10, marginTop: 18 }}>
              <span className="gia-badge" style={{ borderColor: "var(--gold-soft)", color: "var(--gold-soft)", background: "transparent" }}>
                <Icon name="check" size={12}/> GIA &amp; IGI certified
              </span>
            </div>
          </div>
          <div>
            <h4>Discover</h4>
            <a onClick={() => setPage("collections")}>Collections</a>
            <a onClick={() => setPage("bespoke")}>Bespoke Design</a>
            <a onClick={() => setPage("heritage")}>Heritage</a>
            <a onClick={() => setPage("showrooms")}>Showrooms</a>
            <a onClick={openConsult}>Book a Consultation</a>
          </div>
          <div>
            <h4>Showrooms</h4>
            {D.showrooms.map(s => (
              <a key={s.id} onClick={() => setPage("showrooms")}>{s.name}</a>
            ))}
            <a href={`mailto:onlinesales@monilijewellers.com`}>onlinesales@monilijewellers.com</a>
            <a href={`mailto:info@monilijewellers.com`}>info@monilijewellers.com</a>
          </div>
          <div>
            <h4>Care</h4>
            <a>Care &amp; repair</a>
            <a>Delivery &amp; returns</a>
            <a>FAQ</a>
            <a>Resize &amp; remodel</a>
            <a href="https://www.tripadvisor.com/Attraction_Review-g295424-d20295063-Reviews-Monili_Jewellers-Dubai_Emirate_of_Dubai.html" target="_blank" rel="noreferrer">Tripadvisor · 5.0 / 107</a>
          </div>
        </div>
        <div className="footer-meta">
          <span>© Monili Jewellers FZCO · Trading since 2005 · Dubai, UAE</span>
          <span style={{ opacity: .6 }}>Monili Jewellers FZCO · Designed and assembled in Dubai</span>
        </div>
      </div>
    </footer>
  );
}

// ---------- Consultation Modal ----------
function ConsultModal({ open, onClose }) {
  const D = window.MONILI;
  const [step, setStep] = useState(0);
  const [form, setForm] = useState({
    name: "", email: "", phone: "",
    showroom: "gold-diamond-park",
    interest: "engagement",
    date: "",
    notes: "",
    advisor: "",
  });
  const interests = [
    ["engagement", "Engagement Ring"],
    ["bespoke", "Bespoke / Custom Design"],
    ["remodel", "Remodel My Gold"],
    ["gift", "Gift / Milestone"],
    ["browse", "Just Browsing"],
  ];
  useEffect(() => { if (open) setStep(0); }, [open]);

  if (!open) return null;
  const upd = (k, v) => setForm(f => ({ ...f, [k]: v }));
  const canSubmit = form.name && (form.email || form.phone);

  return (
    <div style={{
      position: "fixed", inset: 0, zIndex: 100,
      background: "rgba(20, 17, 15, 0.55)", backdropFilter: "blur(4px)",
      display: "flex", alignItems: "center", justifyContent: "center", padding: 24,
    }} onClick={onClose}>
      <div style={{
        background: "var(--ivory)", width: "100%", maxWidth: 720, maxHeight: "92vh",
        overflow: "auto", border: "1px solid var(--line)",
        animation: "fadeUp .35s ease both",
      }} onClick={e => e.stopPropagation()}>
        <div style={{ padding: "22px 28px", borderBottom: "1px solid var(--line)", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
          <div>
            <div className="eyebrow eyebrow-gold">Step {step + 1} of 2</div>
            <div className="serif" style={{ fontSize: 26, marginTop: 4 }}>
              {step === 0 ? "Book a Private Consultation" : step === 1 ? "Tell us about your visit" : "We'll be in touch within one day."}
            </div>
          </div>
          <button className="nav-icon-btn" onClick={onClose}><Icon name="close" size={16}/></button>
        </div>

        <div style={{ padding: 28 }}>
          {step === 0 && (
            <div className="form">
              <div className="field">
                <label>Which showroom would you prefer?</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>Preferred date</label>
                  <input type="date" value={form.date} onChange={e => upd("date", e.target.value)} />
                </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 style={{ display: "flex", justifyContent: "flex-end", marginTop: 12 }}>
                <button className="btn btn-gold" onClick={() => setStep(1)}>
                  Continue <Icon name="arrow" size={14}/>
                </button>
              </div>
            </div>
          )}
          {step === 1 && (
            <div className="form">
              <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>Phone</label>
                  <input value={form.phone} onChange={e => upd("phone", e.target.value)} placeholder="+971 …"/>
                </div>
              </div>
              <div className="field">
                <label>Email</label>
                <input value={form.email} onChange={e => upd("email", e.target.value)} placeholder="you@email.com" type="email"/>
              </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.5, margin: 0 }}>
                Your consultation is complimentary and there is no obligation to proceed. We'll confirm your appointment by phone or WhatsApp.
              </p>
              <div style={{ display: "flex", justifyContent: "space-between", marginTop: 12 }}>
                <button className="btn btn-ghost" onClick={() => setStep(0)}>← Back</button>
                <button className="btn btn-gold" disabled={!canSubmit} style={{ opacity: canSubmit ? 1 : .4 }} onClick={() => setStep(2)}>
                  Confirm Booking <Icon name="check" size={14}/>
                </button>
              </div>
            </div>
          )}
          {step === 2 && (
            <div style={{ display: "flex", flexDirection: "column", gap: 18, alignItems: "flex-start" }}>
              <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: 30, lineHeight: 1.1 }}>
                Thank you, {form.name.split(" ")[0] || "we'll be in touch"}.
              </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-gold" onClick={onClose}>Close</button>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

// expose
Object.assign(window, {
  Icon, BrandMark, Nav, TrustStrip, WhatsAppFAB, BottomBar, Footer, ConsultModal,
});