// Top-level app: modals, mobile nav, tweaks
const { useState: useS, useEffect: useE } = React;

function ProductModal({ p, onClose }) {
  if (!p) return null;
  return (
    <div className="modal-bg" onClick={onClose}>
      <div className="modal" onClick={e => e.stopPropagation()}>
        <button className="close" onClick={onClose}><HJ_I.close /></button>
        <div className="img"><img src={p.img} alt={p.name}/></div>
        <div className="body">
          <div className="eyebrow gold">{p.tag} · {p.cat}</div>
          <h3>{p.name}</h3>
          <div className="sub">{p.sub}</div>
          <div className="price">{window.HJ_AED(p.price)}</div>
          <div className="details">
            <div><span>Material</span><b>18k Gold</b></div>
            <div><span>Setting</span><b>Hand-set in studio</b></div>
            <div><span>Lead time</span><b>2–3 weeks</b></div>
            <div><span>Warranty</span><b>2 years</b></div>
            <div><span>Delivery</span><b>Free UAE</b></div>
            <div><span>Certification</span><b>By piece</b></div>
          </div>
          <p style={{fontSize:13.5, color:"var(--muted)", lineHeight:1.65, margin:"4px 0 0"}}>
            Available ready or made to order. Customise initials, metal tone and stone
            in studio with our design team.
          </p>
          <div className="actions">
            <button className="cta-pill" style={{justifyContent:"center"}}>
              <span className="dot"></span>Add to bag · Shopify checkout
            </button>
            <button className="cta-pill ghost" style={{justifyContent:"center"}}>Personalise this piece  →</button>
            <button className="icon-btn" style={{justifyContent:"center", color:"var(--muted)"}}>
              <HJ_I.whatsapp /> Enquire via WhatsApp
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}

function AppointmentModal({ open, onClose }) {
  const [step, setStep] = useS(1);
  const [type, setType] = useS("Bespoke commission");
  const [date, setDate] = useS("Sat 30 May");
  const [time, setTime] = useS("11:00");
  const [name, setName] = useS("");
  const [done, setDone] = useS(false);
  useE(() => { if (!open) { setStep(1); setDone(false); setName(""); } }, [open]);
  if (!open) return null;

  return (
    <div className="modal-bg" onClick={onClose}>
      <div className="modal" onClick={e => e.stopPropagation()} style={{maxWidth:880}}>
        <button className="close" onClick={onClose}><HJ_I.close /></button>
        <div className="img" style={{background:"#1A1612", padding:0, position:"relative"}}>
          <img src="media/appointment-consultation-in-studio.webp" alt="" style={{height:"100%", objectFit:"cover", opacity:0.85}}/>
          <div style={{position:"absolute", inset:0, padding:36, display:"flex", flexDirection:"column", justifyContent:"space-between", color:"#F4EAD5", background:"linear-gradient(180deg, transparent 30%, rgba(26,22,18,0.65))"}}>
            <div>
              <div className="eyebrow" style={{color:"var(--gold)"}}>Private Appointment</div>
              <h3 style={{fontFamily:"Cormorant Garamond, serif", fontSize:40, fontStyle:"italic", marginTop:14, lineHeight:1.05}}>
                An hour with the designer.
              </h3>
            </div>
            <div style={{fontSize:13, opacity:0.85, lineHeight:1.6}}>
              Dubai Design District<br/>Building 2 · Studio 211<br/>
              <span style={{color:"var(--gold)"}}>+971 50 728 0604</span>
            </div>
          </div>
        </div>
        <div className="body" style={{padding:36}}>
          {!done && (
            <>
              <div style={{display:"flex", gap:8, marginBottom:18}}>
                {[1,2,3].map(s => (
                  <div key={s} style={{flex:1, height:3, background: s <= step ? "var(--gold)" : "var(--line)"}}></div>
                ))}
              </div>
              <div className="eyebrow gold">Step 0{step} of 03</div>
            </>
          )}

          {step === 1 && !done && (
            <>
              <h3 style={{fontStyle:"italic", fontSize:32, margin:"8px 0 4px"}}>What's the visit for?</h3>
              <p className="sub" style={{marginBottom:14}}>So we know who to put on the calendar with you.</p>
              <div style={{display:"grid", gap:8}}>
                {["Bespoke commission","Tennis archive viewing","Engagement & bridal","Repair · resize","Just looking"].map(o => (
                  <button key={o} onClick={() => setType(o)} className="tab" style={{textAlign:"left", padding:"14px 16px", background: type === o ? "var(--ink)" : "var(--paper)", color: type === o ? "var(--bg-2)" : "var(--ink)", borderColor: type === o ? "var(--ink)" : "var(--line)"}}>
                    {o}
                  </button>
                ))}
              </div>
              <button className="cta-pill" style={{justifyContent:"center", marginTop:18}} onClick={() => setStep(2)}>Continue  →</button>
            </>
          )}

          {step === 2 && !done && (
            <>
              <h3 style={{fontStyle:"italic", fontSize:32, margin:"8px 0 4px"}}>Pick a time.</h3>
              <p className="sub" style={{marginBottom:14}}>Mon–Fri 10–20 · Sat–Sun 10–16. We confirm by WhatsApp within an hour.</p>
              <div className="appt-form">
                <div className="row2">
                  <label>Date
                    <select value={date} onChange={e => setDate(e.target.value)}>
                      {["Fri 29 May","Sat 30 May","Sun 31 May","Mon 1 Jun","Tue 2 Jun","Wed 3 Jun","Thu 4 Jun"].map(d => <option key={d}>{d}</option>)}
                    </select>
                  </label>
                  <label>Time
                    <select value={time} onChange={e => setTime(e.target.value)}>
                      {["10:00","11:00","12:00","14:00","15:00","16:00","17:00","18:00"].map(t => <option key={t}>{t}</option>)}
                    </select>
                  </label>
                </div>
              </div>
              <div style={{display:"flex", gap:10, marginTop:18}}>
                <button className="cta-pill ghost" onClick={() => setStep(1)}>← Back</button>
                <button className="cta-pill" style={{flex:1, justifyContent:"center"}} onClick={() => setStep(3)}>Continue  →</button>
              </div>
            </>
          )}

          {step === 3 && !done && (
            <>
              <h3 style={{fontStyle:"italic", fontSize:32, margin:"8px 0 4px"}}>Your details.</h3>
              <p className="sub" style={{marginBottom:14}}>{type} · {date} · {time}</p>
              <div className="appt-form">
                <label>Full name
                  <input value={name} onChange={e => setName(e.target.value)} placeholder="Layla Al-Sayed"/>
                </label>
                <div className="row2">
                  <label>Mobile / WhatsApp
                    <input type="tel" placeholder="+971 ..."/>
                  </label>
                  <label>Email
                    <input type="email" placeholder="you@email.com"/>
                  </label>
                </div>
                <label>Anything to know
                  <input placeholder="A note, a piece you saw, a memory to carry..."/>
                </label>
              </div>
              <div style={{display:"flex", gap:10, marginTop:18}}>
                <button className="cta-pill ghost" onClick={() => setStep(2)}>← Back</button>
                <button className="cta-pill" style={{flex:1, justifyContent:"center"}} onClick={() => setDone(true)}><span className="dot"></span>Confirm appointment</button>
              </div>
            </>
          )}

          {done && (
            <div style={{textAlign:"center", padding:"36px 0", display:"flex", flexDirection:"column", alignItems:"center", gap:14}}>
              <div style={{width:64, height:64, borderRadius:"50%", border:"1px solid var(--gold)", display:"flex", alignItems:"center", justifyContent:"center", color:"var(--gold-deep)", fontSize:30}}>✓</div>
              <div className="eyebrow gold">Confirmed</div>
              <h3 style={{fontStyle:"italic", fontSize:36}}>See you {date}, at {time}.</h3>
              <p style={{color:"var(--muted)", maxWidth:340, fontSize:14, lineHeight:1.6}}>
                We've sent the studio details to your inbox. Mention "a short meeting at Hiba Jaber"
                at d3 security for parking.
              </p>
              <button className="cta-pill" onClick={onClose} style={{justifyContent:"center"}}>Lovely. Close.</button>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

function MobileNav({ open, onClose, onAppoint }) {
  if (!open) return null;
  const links = ["Shop", "Collections", "Customize", "Tennis Jewellery", "Heritage", "Gifts", "Stories", "About Hiba", "Press", "Find Us"];
  return (
    <div className="mobile-nav">
      <button className="close" style={{position:"absolute", top:22, right:22, background:"var(--paper)", border:"1px solid var(--line)", borderRadius:"50%", width:40, height:40, display:"flex", alignItems:"center", justifyContent:"center"}} onClick={onClose}><HJ_I.close /></button>
      {links.map(l => <a key={l} onClick={onClose}>{l}</a>)}
      <button className="cta-pill" style={{marginTop:20, justifyContent:"center"}} onClick={() => { onClose(); onAppoint(); }}>
        <span className="dot"></span>Book Appointment
      </button>
      <div style={{marginTop:30, fontSize:13, color:"var(--muted)", lineHeight:1.7}}>
        Dubai Design District<br/>Building 2 · Studio 211<br/>
        <a href="https://wa.me/971507280604" style={{color:"var(--gold-deep)"}}>WhatsApp +971 50 728 0604</a>
      </div>
    </div>
  );
}

// ─── Tweaks ────
const HJ_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": ["#B08B4C", "#8E6F38", "#F6F1E9", "#1A1612"],
  "headlineWeight": 400,
  "bgWarmth": 1,
  "density": "editorial",
  "heroVariant": "split"
}/*EDITMODE-END*/;

function applyTweaks(t) {
  const root = document.documentElement;
  if (t.palette) {
    root.style.setProperty("--gold", t.palette[0]);
    root.style.setProperty("--gold-deep", t.palette[1]);
    root.style.setProperty("--bg", t.palette[2]);
    root.style.setProperty("--ink", t.palette[3]);
  }
  if (t.bgWarmth != null) {
    const w = t.bgWarmth;
    // shift bg between cool gray and warm ivory
    const bgs = [
      ["#F4F4F2", "#FAFAF8", "#FFFFFE", "#D6D2CB", "#E2DDD4"],
      ["#F6F1E9", "#FBF8F2", "#FFFCF6", "#D9CFBE", "#E8DFCE"],
      ["#F5EBDA", "#FBF4E5", "#FFF7EB", "#D4C7AC", "#E5D9BD"],
    ];
    const idx = w === 0 ? 0 : w === 2 ? 2 : 1;
    if (!t.palette || t.palette[2] === "#F6F1E9") {
      root.style.setProperty("--bg", bgs[idx][0]);
    }
    root.style.setProperty("--bg-2", bgs[idx][1]);
    root.style.setProperty("--paper", bgs[idx][2]);
    root.style.setProperty("--line", bgs[idx][3]);
    root.style.setProperty("--line-2", bgs[idx][4]);
  }
  if (t.density) {
    if (t.density === "compact") {
      document.querySelectorAll(".section").forEach(s => s.style.padding = "70px 0");
    } else if (t.density === "airy") {
      document.querySelectorAll(".section").forEach(s => s.style.padding = "140px 0");
    } else {
      document.querySelectorAll(".section").forEach(s => s.style.padding = "");
    }
  }
}

function App() {
  const [t, setTweak] = useTweaks(HJ_DEFAULTS);
  const [openProd, setOpenProd] = useS(null);
  const [appt, setAppt] = useS(false);
  const [mnav, setMnav] = useS(false);

  useE(() => { applyTweaks(t); }, [t]);

  return (
    <>
      <Announce />
      <Header onAppoint={() => setAppt(true)} onMobileNav={() => setMnav(true)} />
      <main>
        <Hero onAppoint={() => setAppt(true)} onCustomize={() => document.getElementById("customize").scrollIntoView({ behavior: "smooth", block: "start" })} />
        <ProofMarquee />
        <CollectionRail />
        <FeaturedGrid onOpen={setOpenProd} />
        <Bespoke />
        <Founder />
        <Tennis onOpen={setOpenProd} />
        <Heritage />
        <Appointment onAppoint={() => setAppt(true)} />
        <Reviews />
        <Press />
        <Closing />
      </main>
      <Footer />

      <ProductModal p={openProd} onClose={() => setOpenProd(null)} />
      <AppointmentModal open={appt} onClose={() => setAppt(false)} />
      <MobileNav open={mnav} onClose={() => setMnav(false)} onAppoint={() => setAppt(true)} />

      <TweaksPanel title="Tweaks">
        <TweakSection title="Palette">
          <TweakColor
            label="House"
            value={t.palette}
            options={[
              ["#B08B4C", "#8E6F38", "#F6F1E9", "#1A1612"],  // champagne · ivory
              ["#C9A14A", "#9E7A2B", "#F8F3E8", "#1F1A14"],  // warm gold · ivory
              ["#9C6E3B", "#6E4B22", "#EFE7DA", "#1E1A14"],  // bronze
              ["#7B6A3F", "#534626", "#F1EDE2", "#1A1814"],  // olive gold
              ["#1A1612", "#3C342A", "#F6F1E9", "#1A1612"],  // monochrome ink
              ["#B83E4A", "#8A2E37", "#F6F1E9", "#1A1612"],  // ruby accent
            ]}
            onChange={(v) => setTweak("palette", v)}
          />
        </TweakSection>

        <TweakSection title="Background tone">
          <TweakRadio
            label="Warmth"
            value={t.bgWarmth}
            options={[
              { value: 0, label: "Cool" },
              { value: 1, label: "Ivory" },
              { value: 2, label: "Warm" },
            ]}
            onChange={(v) => setTweak("bgWarmth", v)}
          />
        </TweakSection>

        <TweakSection title="Layout density">
          <TweakRadio
            label="Spacing"
            value={t.density}
            options={[
              { value: "compact", label: "Compact" },
              { value: "editorial", label: "Editorial" },
              { value: "airy", label: "Airy" },
            ]}
            onChange={(v) => setTweak("density", v)}
          />
        </TweakSection>

        <TweakSection title="Quick actions">
          <TweakButton label="Open appointment flow" onClick={() => setAppt(true)} />
          <TweakButton label="Open product quickview" onClick={() => setOpenProd(window.HJ_DATA.featured[0])} />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);