/* global React, ReactDOM, Header, Hero, ProductGrid, CategoryChips, BranchModal, CartDrawer, CheckoutSheet, Confirmation, AuthModal, Footer, UpsellStrip, MAKMAI_DATA */ const useState = React.useState; const useMemo = React.useMemo; const useEffect = React.useEffect; const BRANCHES = window.MAKMAI_DATA.BRANCHES; const CATEGORIES = window.MAKMAI_DATA.CATEGORIES; const PRODUCTS = window.MAKMAI_DATA.PRODUCTS; function App() { const [lang, setLang] = useState("th"); const [branch, setBranch] = useState(BRANCHES[0]); const [category, setCategory] = useState("all"); const [cart, setCart] = useState([]); const [favs, setFavs] = useState(new Set()); const [user, setUser] = useState(null); const [toast, setToast] = useState(null); // ── view flags ────────────────────────────────────────────────────── // branch modal may be opened from header OR from within checkout. // We never close checkout when opening branch from within it — // both can be true simultaneously; BranchModal renders last so it sits on top. const [view, setView] = useState({ branch: false, cart: false, checkout: false, success: false, auth: false, branchFromCheckout: false, // flag: branch modal was triggered from checkout }); // ── derived ───────────────────────────────────────────────────────── const filtered = useMemo(() => category === "all" ? PRODUCTS : PRODUCTS.filter(p => p.cat === category), [category]); const featured = useMemo(() => PRODUCTS.filter(p => p.featured), []); // Upsell — salads / protein / shots when cart has juices/smoothies const upsell = useMemo(() => { const inCartIds = new Set(cart.map(c => c.id)); const has = cats => cart.some(c => cats.includes(c.cat)); let pool = []; if (has(["juice", "smoothie", "tea", "coffee"])) pool = PRODUCTS.filter(p => ["meal","hpns","fruit"].includes(p.cat)); else if (cart.length > 0) pool = PRODUCTS.filter(p => ["juice","smoothie","tea"].includes(p.cat)); return pool.filter(p => !inCartIds.has(p.id)).slice(0, 5); }, [cart]); const cartCount = cart.reduce((s, i) => s + i.qty, 0); // ── toast helper ───────────────────────────────────────────────────── function showToast(msg, kind = "success") { setToast({ msg, kind }); clearTimeout(showToast._t); showToast._t = setTimeout(() => setToast(null), 2200); } // ── cart actions ───────────────────────────────────────────────────── function addToCart(p) { setCart(cur => { const existing = cur.find(i => i.id === p.id); if (existing) return cur.map(i => i.id === p.id ? { ...i, qty: i.qty + 1 } : i); return [...cur, { ...p, qty: 1 }]; }); showToast(lang === "th" ? "🌱 เพิ่มในตะกร้าแล้ว" : "🌱 Added to bag"); setView(v => ({ ...v, cart: true })); } function removeOne(id) { setCart(cur => cur.map(i => i.id === id ? { ...i, qty: i.qty - 1 } : i).filter(i => i.qty > 0)); } function toggleFav(id) { setFavs(cur => { const next = new Set(cur); next.has(id) ? next.delete(id) : next.add(id); return next; }); } // ── checkout flow ──────────────────────────────────────────────────── const proceedToCheckout = () => setView(v => ({ ...v, cart: false, checkout: true })); const confirmOrder = () => setView(v => ({ ...v, checkout: false, success: true })); const finishOrder = () => { setCart([]); setView({ branch: false, cart: false, checkout: false, success: false, auth: false, branchFromCheckout: false }); }; // Change branch from within CheckoutSheet: // Keep checkout open, open BranchModal on top (BranchModal renders last in JSX → higher stack) const changeBranchFromCheckout = () => setView(v => ({ ...v, branch: true, branchFromCheckout: true })); const handleBranchChange = (b) => { setBranch(b); setView(v => ({ ...v, branch: false, branchFromCheckout: false })); if (view.branchFromCheckout) { showToast(lang === "th" ? `เปลี่ยนเป็น ${b.name_th} แล้ว` : `Switched to ${b.name_en}`); } }; const closeBranchModal = () => setView(v => ({ ...v, branch: false, branchFromCheckout: false })); // ── auth ───────────────────────────────────────────────────────────── const handleAuthSuccess = (u) => { setUser(u); setView(v => ({ ...v, auth: false })); showToast(lang === "th" ? `ยินดีต้อนรับ ${u.name} 🌱` : `Welcome back, ${u.name} 🌱`); }; const handleLogout = () => { setUser(null); showToast(lang === "th" ? "ออกจากระบบแล้ว" : "Signed out"); }; return (
setView(v => ({ ...v, branch: true }))} onOpenCart={() => setView(v => ({ ...v, cart: true }))} lang={lang} onToggleLang={() => setLang(l => l === "th" ? "en" : "th")} user={user} onOpenAuth={() => setView(v => ({ ...v, auth: true }))} onLogout={handleLogout} />
{ document.getElementById("menu-section")?.scrollIntoView({ behavior: "smooth" }); }} /> {/* Featured row */}
{lang === "th" ? "ซิกเนเจอร์ · เมนูแนะนำ" : "Signature · Bestsellers"}

{lang === "th" ? "แก้วโปรดของลูกค้า" : "What our regulars love"}

{lang === "th" ? "ดูทั้งหมด →" : "See all →"}
{/* Full menu */} {/* Why Makmai strip */}
{[ { th: "สดใหม่ทุกวัน", en: "Daily-fresh", desc_th: "ผลิตวันต่อวัน", desc_en: "Pressed daily, never bulked" }, { th: "ไม่ใส่น้ำตาล", en: "Zero added sugar", desc_th: "หวานจากผลไม้จริง", desc_en: "Sweetness from fruit only" }, { th: "ส่งภายในวัน", en: "Same-day delivery", desc_th: "สั่งก่อน 14:00", desc_en: "Order by 2pm" }, { th: "Zero waste", en: "Zero waste", desc_th: "ไม่ต้องตุนผลไม้", desc_en: "No bulk produce going bad" }, ].map(f => (
{lang === "th" ? f.th : f.en}
{lang === "th" ? f.desc_th : f.desc_en}
))}
); } ReactDOM.createRoot(document.getElementById("root")).render();