// Top-level app: modals, mobile nav, tweaks const { useState: useS, useEffect: useE } = React; function ProductModal({ p, onClose }) { if (!p) return null; return (
e.stopPropagation()}>
{p.name}/
{p.tag} · {p.cat}

{p.name}

{p.sub}
{window.HJ_AED(p.price)}
Material18k Gold
SettingHand-set in studio
Lead time2–3 weeks
Warranty2 years
DeliveryFree UAE
CertificationBy piece

Available ready or made to order. Customise initials, metal tone and stone in studio with our design team.

); } 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 (
e.stopPropagation()} style={{maxWidth:880}}>
Private Appointment

An hour with the designer.

Dubai Design District
Building 2 · Studio 211
+971 50 728 0604
{!done && ( <>
{[1,2,3].map(s => (
))}
Step 0{step} of 03
)} {step === 1 && !done && ( <>

What's the visit for?

So we know who to put on the calendar with you.

{["Bespoke commission","Tennis archive viewing","Engagement & bridal","Repair · resize","Just looking"].map(o => ( ))}
)} {step === 2 && !done && ( <>

Pick a time.

Mon–Fri 10–20 · Sat–Sun 10–16. We confirm by WhatsApp within an hour.

)} {step === 3 && !done && ( <>

Your details.

{type} · {date} · {time}

)} {done && (
Confirmed

See you {date}, at {time}.

We've sent the studio details to your inbox. Mention "a short meeting at Hiba Jaber" at d3 security for parking.

)}
); } 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 (
{links.map(l => {l})}
Dubai Design District
Building 2 · Studio 211
WhatsApp +971 50 728 0604
); } // ─── 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 ( <>
setAppt(true)} onMobileNav={() => setMnav(true)} />
setAppt(true)} onCustomize={() => document.getElementById("customize").scrollIntoView({ behavior: "smooth", block: "start" })} /> setAppt(true)} />