/* ============================================================ YUZU YATAI — Menú / Pedir en línea MenuCard (3 variants) · MenuPage · ItemModal · CartDrawer · Checkout ============================================================ */ /* ---------- MENU CARD (3 variants) ---------- */ function AddBtn({ onClick, label = "Agregar", compact }) { const [h, setH] = React.useState(false); if (compact) return ( ); return ( ); } function PriceTag({ value, size = 19 }) { return ( {YY.CLP(value)} ); } function MenuCard({ item, onAdd, variant = "stacked" }) { const [h, setH] = React.useState(false); const lift = { transform: h ? "translateY(-4px)" : "none", transition: "transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s", }; if (variant === "overlay") { return (
setH(true)} onMouseLeave={() => setH(false)} className="grain" style={{ position: "relative", overflow: "hidden", borderRadius: "var(--r-md)", aspectRatio: "3 / 4", background: "var(--ink)", boxShadow: h ? "var(--shadow-card)" : "var(--shadow-soft)", ...lift, }} >
{item.tags[0] && (
)}

{item.name}

{item.desc}

); } if (variant === "editorial") { return (
setH(true)} onMouseLeave={() => setH(false)} style={{ display: "flex", gap: 16, alignItems: "center", background: "var(--rice)", borderRadius: "var(--r-md)", padding: 12, boxShadow: h ? "var(--shadow-card)" : "var(--shadow-soft)", ...lift, }} >
{item.tags.map((t) => ( ))}

{item.name}

{item.desc}

); } // stacked (default) return (
setH(true)} onMouseLeave={() => setH(false)} style={{ display: "flex", flexDirection: "column", background: "var(--rice)", borderRadius: "var(--r-md)", overflow: "hidden", boxShadow: h ? "var(--shadow-card)" : "var(--shadow-soft)", ...lift, }} >
{item.tags[0] && (
)}

{item.name}

{item.desc}

); } /* ---------- MENU PAGE ---------- */ function FulfillmentToggle({ value, onChange, compact }) { return (
{[ { id: "retiro", label: "Retiro", I: IcStore }, { id: "delivery", label: "Delivery", I: IcBike }, ].map((o) => ( ))}
); } function MenuPage({ openItem, cartCount, cartTotal, onCart, fulfillment, setFulfillment, cardVariant, }) { const [cat, setCat] = React.useState("todos"); const tabs = [{ id: "todos", label: "Todo" }, ...YY.CATS]; const items = cat === "todos" ? YY.MENU : YY.MENU.filter((m) => m.cat === cat); const tabRef = React.useRef(null); // Layout: list is the default everywhere (easier to scan); the user can // switch to the gallery grid via the toggle. const [view, setView] = React.useState(null); const effectiveView = view ?? "list"; const variant = effectiveView === "list" ? "editorial" : cardVariant; // min(100%, …) keeps the track from exceeding the container on very narrow // phones, so a single column always fits instead of overflowing horizontally. const gridCols = effectiveView === "list" ? "repeat(auto-fill,minmax(min(100%,320px),1fr))" : "repeat(auto-fill,minmax(min(100%,260px),1fr))"; return (
{/* header */}
Menú · Pedir en línea

Arma tu pedido

{" "} {fulfillment === "retiro" ? "Listo en 20–30 min" : "Delivery 35–50 min · Puente Alto y alrededores"}
{/* sticky category tabs */}
{tabs.map((tb) => ( ))}
{/* layout toggle */}
{[ { id: "grid", I: IcGrid, label: "Grilla" }, { id: "list", I: IcRows, label: "Lista" }, ].map((o) => { const on = effectiveView === o.id; return ( ); })}
{/* grid */}
{cat === "todos" ? ( YY.CATS.map((c) => { const list = YY.MENU.filter((m) => m.cat === c.id); return (

{c.label} {list.length} platos

{list.map((m) => ( openItem(m)} variant={variant} /> ))}
); }) ) : (
{items.map((m) => ( openItem(m)} variant={variant} /> ))}
)}
); } /* ---------- ITEM MODAL (modifiers) ---------- */ function Stepper({ qty, setQty, big }) { const btn = { width: big ? 46 : 38, height: big ? 46 : 38, display: "grid", placeItems: "center", borderRadius: "11px 2px 11px 2px", background: "var(--rice-2)", color: "var(--ink)", }; return (
{qty}
); } function ItemModal({ item, onClose, onAdd }) { const [qty, setQty] = React.useState(1); const [tamano, setTamano] = React.useState("normal"); const [extras, setExtras] = React.useState([]); const [notes, setNotes] = React.useState(""); const narrow = useNarrow(); const M = YY.MODIFIERS; const tamPrice = M.tamano.options.find((o) => o.id === tamano).price; const extraPrice = extras.reduce( (s, id) => s + M.extras.options.find((o) => o.id === id).price, 0, ); const unit = item.price + tamPrice + extraPrice; const total = unit * qty; const toggleExtra = (id) => setExtras((x) => (x.includes(id) ? x.filter((e) => e !== id) : [...x, id])); const add = () => { onAdd({ uid: item.id + ":" + tamano + ":" + extras.slice().sort().join("-") + ":" + Date.now(), item, qty, tamano, extras: extras.slice(), notes, unit, }); onClose(); }; return (
{/* close — floats over the top-right corner */} {/* two columns on desktop, stacked on mobile */}
{/* image column */}
{item.tags[0] && (
{item.tags.map((t) => ( ))}
)}
{/* options column (scrolls) */}

{item.name}

{item.desc}

{/* tamaño */} {M.tamano.options.map((o) => ( setTamano(o.id)} label={o.label} price={o.price} /> ))} {/* extras */} {M.extras.options.map((o) => ( toggleExtra(o.id)} label={o.label} price={o.price} /> ))} {/* notas */}