/* global React, ReactDOM, useTweaks, TweaksPanel, TweakSection, TweakRadio, TweakColor, TweakToggle, TweakSelect */
// Flashy Jewellery — root app
const { useState, useEffect, useRef } = React;
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
"theme": "gold",
"heroVariant": "single",
"displayFont": "Cormorant Garamond",
"showWhatsApp": true,
"engagementOpen": "all"
}/*EDITMODE-END*/;
function App() {
const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
const [bag, setBag] = useState([]);
const [drawerOpen, setDrawerOpen] = useState(false);
const [quickView, setQuickView] = useState(null);
const [bookingOpen, setBookingOpen] = useState(false);
const [bookingPrefill, setBookingPrefill] = useState(null);
const [toast, setToast] = useState("");
const engageRef = useRef(null);
// Apply theme + font
useEffect(() => {
document.documentElement.dataset.theme = t.theme || "gold";
document.documentElement.style.setProperty("--serif", `"${t.displayFont}", Georgia, serif`);
}, [t.theme, t.displayFont]);
const onOpenQuick = (p) => setQuickView(p);
const onAdd = (p) => {
setBag(prev => {
const existing = prev.find(i => i.p.id === p.id);
if (existing) return prev.map(i => i.p.id === p.id ? { ...i, qty: i.qty + 1 } : i);
return [...prev, { p, qty: 1 }];
});
setQuickView(null);
setToast(`${p.name.split(" ").slice(0, 3).join(" ")}… added to bag`);
setTimeout(() => setToast(""), 2400);
setTimeout(() => setDrawerOpen(true), 350);
};
const onQty = (id, q) => setBag(prev => q < 1 ? prev.filter(i => i.p.id !== id) : prev.map(i => i.p.id === id ? { ...i, qty: q } : i));
const onRemove = (id) => setBag(prev => prev.filter(i => i.p.id !== id));
const openBooking = (prefill = null) => {
setBookingPrefill(prefill && prefill.cat ? prefill : null);
setBookingOpen(true);
setQuickView(null);
};
const scrollToShop = () => {
if (engageRef.current) {
const top = engageRef.current.getBoundingClientRect().top + window.scrollY - 64;
window.scrollTo({ top, behavior: "smooth" });
}
};
return (
);
}
ReactDOM.createRoot(document.getElementById("root")).render();