/* app.jsx — App principal, routing, tweaks */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
"primary": "#8C6FAE",
"displayFont": "cormorant",
"density": "regular",
"showGold": true,
"brunchMode": false,
"productLayout": "editorial",
"heroVariant": "full"
}/*EDITMODE-END*/;
function App() {
const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
const [route, setRoute] = React.useState('landing');
const [cart, setCart] = React.useState([]);
const [lastOrder, setLastOrder] = React.useState(null);
const [cartOpen, setCartOpen] = React.useState(false);
const [detailProduct, setDetailProduct] = React.useState(null);
const [detailOpen, setDetailOpen] = React.useState(false);
const [checkoutOpen, setCheckoutOpen] = React.useState(false);
const [toast, setToast] = React.useState(null);
const [orderInfo, setOrderInfo] = React.useState(null);
const [ready, setReady] = React.useState(false);
const [loadErr, setLoadErr] = React.useState(false);
// ── Cargar el menú REAL desde la API antes de renderizar ───────
React.useEffect(() => {
let alive = true;
Promise.all([window.loadMenuData(), window.loadSiteContent ? window.loadSiteContent() : Promise.resolve()])
.then(() => { if (alive) setReady(true); })
.catch(() => { if (alive) { setLoadErr(true); setReady(true); } });
return () => { alive = false; };
}, []);
// ── Apply tweaks to document.body / :root ──────────────────────
React.useEffect(() => {
document.body.classList.toggle('brunch-mode', !!t.brunchMode);
document.body.classList.toggle('no-gold', !t.showGold);
document.body.classList.remove('density-compact', 'density-airy');
if (t.density === 'compact') document.body.classList.add('density-compact');
if (t.density === 'airy') document.body.classList.add('density-airy');
document.body.classList.remove('display-dm', 'display-italiana', 'display-playfair');
if (t.displayFont === 'dm') document.body.classList.add('display-dm');
if (t.displayFont === 'italiana') document.body.classList.add('display-italiana');
if (t.displayFont === 'playfair') document.body.classList.add('display-playfair');
// Override --plum at root for signature color tweak
document.documentElement.style.setProperty('--plum', t.primary);
// Variante apenas más honda del MISMO lila (hover/peso) — sin caer en ciruela
document.documentElement.style.setProperty('--plum-deep', shade(t.primary, -0.16));
}, [t]);
// Track route → top
React.useEffect(() => { window.scrollTo({ top: 0 }); }, [route]);
const cartCount = cart.reduce((s, i) => s + i.qty, 0);
const cartTotal = cart.reduce((s, i) => s + i.unitPrice * i.qty, 0);
// ── Cart actions ──────────────────────────────────────────────
const addToCart = (cartItem) => {
const uid = Date.now() + '-' + Math.random().toString(36).slice(2, 6);
const item = { uid, ...cartItem };
setCart((prev) => [...prev, item]);
showToast(`${cartItem.name} añadido`);
};
const quickAdd = (product) => {
const variant = product.variants[0];
const cartItem = {
productId: product.id,
name: product.name,
img: product.img,
variantId: variant?.id || null,
variantLabel: variant?.label || null,
modIds: [],
modLabels: [],
unitPrice: variant?.price || product.price,
qty: 1,
};
addToCart(cartItem);
};
const updateQty = (uid, qty) => {
if (qty <= 0) return removeItem(uid);
setCart((prev) => prev.map((i) => i.uid === uid ? { ...i, qty } : i));
};
const removeItem = (uid) => setCart((prev) => prev.filter((i) => i.uid !== uid));
const openDetail = (product) => {
setDetailProduct(product);
setDetailOpen(true);
};
const closeDetail = () => {
setDetailOpen(false);
setTimeout(() => setDetailProduct(null), 240);
};
const handleCheckout = () => {
setCartOpen(false);
setTimeout(() => setCheckoutOpen(true), 280);
};
const completeCheckout = (info) => {
setLastOrder([...cart]);
setCart([]);
setCheckoutOpen(false);
// Confirmación CLARA (pantalla), no un toast fugaz.
const data = (info && typeof info === 'object') ? info : { orderId: info };
setOrderInfo(data);
};
const repeatOrder = () => {
if (lastOrder) {
setCart([...lastOrder]);
showToast('Pedido restaurado');
setCartOpen(true);
}
};
// Toast
const showToast = (msg) => {
setToast(msg);
setTimeout(() => setToast(null), 2400);
};
// ── Pantalla de carga (mientras llega el menú real) ────────────
if (!ready) {
return (
Alexandra Castro
Preparando la carta…
);
}
return (
<>
setCartOpen(true)}
/>
{route === 'landing' && (
)}
{route === 'menu' && (
)}
setCartOpen(true)} />
setCartOpen(false)}
onUpdateQty={updateQty}
onRemove={removeItem}
onCheckout={handleCheckout}
/>
setCheckoutOpen(false)}
items={cart}
total={cartTotal}
onComplete={completeCheckout}
/>
setOrderInfo(null)}
/>
setCartOpen(true)}
route={route}
setRoute={setRoute}
/>
{toast && }
setTweak('primary', v)}
/>
setTweak('displayFont', v)}
/>
setTweak('density', v)}
/>
setTweak('showGold', v)}
/>
setTweak('brunchMode', v)}
/>
setTweak('productLayout', v)}
/>
setTweak('heroVariant', v)}
/>
);
}
// ── Toast (subtle) ────────────────────────────────────────────────
const Toast = ({ message }) => (
{message}
);
// ── Helper: shade a hex color ────────────────────────────────────
function shade(hex, amount) {
const c = hex.replace('#', '');
const num = parseInt(c.length === 3 ? c.split('').map((x) => x + x).join('') : c, 16);
let r = (num >> 16) & 255, g = (num >> 8) & 255, b = num & 255;
r = Math.max(0, Math.min(255, r + Math.round(255 * amount)));
g = Math.max(0, Math.min(255, g + Math.round(255 * amount)));
b = Math.max(0, Math.min(255, b + Math.round(255 * amount)));
return '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
}
ReactDOM.createRoot(document.getElementById('root')).render();