/* ============================================================ Nhà hàng Chay — Story + Experience + Menu ============================================================ */ /* ---------- SECTION 2 — STORY ---------- */ const STORY_CARDS = [ { t: 'Rau nấm tươi', d: 'Nguyên liệu quen thuộc, chế biến cân bằng.' }, { t: 'Vị chay sáng tạo', d: 'Pate, hàu và bò chay được biến tấu từ nấm.' }, { t: 'Không gian ấm', d: 'Lịch sự, dễ chịu cho bữa ăn chậm rãi.' }, ]; function StorySection() { const lotusRef = useReveal({ once: true, threshold: 0.1 }); return (
{/* Ảnh hoa sen làm BACKDROP lớn bên trái Story, vượt nhẹ lên Hero. Decorative: alt rỗng + aria-hidden + pointer-events none; nằm sau chữ, không che chữ. */}

Câu chuyện

 Chay nhẹ nhàng, vị vẫn tròn đầy. Chúng tôi tạo nên một không gian chay gần gũi, nơi mỗi món ăn được chăm chút từ nguyên liệu tự nhiên, hương vị cân bằng và cách trình bày tinh tế.
{STORY_CARDS.map((c, i) => ( 0{i + 1}

{c.t}

{c.d}

 ))}
); } /* ---------- SECTION 3 — EXPERIENCE (emerald) ---------- */ const EXP_CARDS = [ { t: 'Khai vị', d: 'Pate nấm, đậu hũ sốt tắc, rau củ kho quẹt.' }, { t: 'Món chính', d: 'Pasta sò chay, Pad Thái chay, cơm chiên.' }, { t: 'Món nấm', d: 'Hàu chay và bò chay chế biến từ nấm.' }, { t: 'Thức uống', d: 'Trà đậu đen và nước ép trái cây tươi.' }, ]; function ExperienceSection() { const lineRef = useReveal({ threshold: 0.3 }); return (
); } /* ========================================================= MENU IMAGE SYSTEM & DISH LIGHTBOX - image rỗng -> KHÔNG render , không broken image - Click card để xem chi tiết món (modal/lightbox, a11y, ESC/backdrop) ========================================================= */ /* Mỗi món: id, category, name, description, image, imageAlt, detail, note(optional). image: "" -> chưa có ảnh thật -> hiển thị khung ornament, không . */ const MENU_ITEMS = [ // --- Khai vị --- { id: 'banh-mi-pate-nam', category: 'Khai vị', name: 'Bánh mì Pate nấm', featured: true, description: 'Pate nấm béo thơm, dùng cùng bánh mì giòn.', image: 'assets/images/vegetarian-samples/menu/banh-mi-pate-nam.png', imageAlt: 'Bánh mì pate nấm chay', detail: 'Pate làm từ nấm, vị béo bùi tự nhiên, gợi hương quen thuộc nhưng nhẹ hơn.', note: 'Món dễ làm khách không ăn chay trường thấy bất ngờ.' }, { id: 'banh-duc-chay', category: 'Khai vị', name: 'Bánh Đúc Chay', description: 'Chua ngọt hài hòa, mở vị nhẹ nhàng.', image: 'assets/images/vegetarian-samples/menu/banh-duc-chay.png', imageAlt: 'Bánh đúc chay từ nước cốt dừa', detail: 'Bánh đúc được làm từ nước cốt dừa tươi 🥥 nên cốt bánh mềm mịn, thơm dịu. Phần nhân nấm xào cùng rau củ 🥕🍄 dậy mùi đậm đà vừa đủ, ăn kèm nước mắm chay pha từ nước dừa xiêm tươi mang đến vị chua – cay – mặn – ngọt hài hòa, thanh mát 💧' }, { id: 'goi-sun-tac', category: 'Khai vị', name: 'Gỏi Sụn Tắc', description: 'Vị Việt thân quen, hợp để chia sẻ.', image: 'assets/images/vegetarian-samples/menu/goi-sun-tac.png', imageAlt: 'Gỏi sụn tắc chay', detail: 'Rong sụn, ớt chuông, bắp chuối, đậu phộng & mè trắng.' }, // --- Món chính --- { id: 'pasta-so-chay', category: 'Món chính', name: 'Pasta sò chay', description: 'Biến tấu món Ý theo tinh thần chay.', image: 'assets/images/vegetarian-samples/menu/pasta-so-chay.png', imageAlt: 'Pasta sò chay từ nấm và rau củ', detail: 'Pasta sốt nhẹ cùng "sò" chay, vừa lạ miệng vừa cân bằng.' }, { id: 'mien-tron-chay', category: 'Món chính', name: 'Miến trộn chay', description: 'Nhẹ, cân bằng, hợp bữa trưa.', image: 'assets/images/vegetarian-samples/menu/mien-tron-chay.png', imageAlt: 'Miến trộn chay', detail: 'Miến dai trộn rau củ và nấm, vị thanh, dễ dùng khi muốn ăn nhẹ.' }, { id: 'pad-thai-chay', category: 'Món chính', name: 'Pad Thái chay', description: 'Mì xào kiểu Thái, chua cay nhẹ.', image: 'assets/images/vegetarian-samples/menu/pad-thai-chay.png', imageAlt: 'Pad Thái chay', detail: 'Mì xào kiểu Thái đậm vị vừa phải, giữ tinh thần chay sáng tạo.' }, { id: 'com-chien-rau-cu', category: 'Món chính', name: 'Cơm chiên rau củ', description: 'Món cơm thân thuộc cho nhóm khách.', image: 'assets/images/vegetarian-samples/menu/com-chien-rau-cu.png', imageAlt: 'Cơm chiên rau củ', detail: 'Cơm chiên thơm tơi cùng rau củ, dễ gọi khi đi cùng gia đình hoặc bạn bè.' }, // --- Món nấm --- { id: 'chan-nam-la-han-xao-sa-te', category: 'Món nấm', name: 'Chân Nấm La Hán Xào Sa Tế', description: 'Kết cấu thú vị, vị chay mới lạ.', image: 'assets/images/vegetarian-samples/menu/chan-nam-la-han-xao-sa-te.png', imageAlt: 'Chân nấm La Hán xào sa tế chay', detail: 'Sài Gòn những ngày mưa này, còn gì tuyệt vời hơn khi được thưởng thức một bữa cơm nóng hổi, nghi ngút hương nồng từ gừng, sả, ớt, ngũ vị kết hợp với các loại nấm, rau, củ, quả xanh sạch, giúp bạn đánh thức giác quan, xua tan sự mệt mỏi của cơ thể và hơn nữa, là một sự trải nghiệm mới mẻ tại nhà hàng, gần gũi và thân thuộc như đang dùng bữa tại ngôi nhà thương yêu của mình.' }, { id: 'dau-hu-nam-kho-mang', category: 'Món nấm', name: 'Đậu Hũ Nấm Kho Măng', description: 'Ẩm Thực Chay Thanh Đạm – Hương Sắc Măng Rừng Tự Nhiên.', image: 'assets/images/vegetarian-samples/menu/dau-hu-nam-kho-mang.png', imageAlt: 'Đậu hũ nấm kho măng chay', detail: 'Măng rừng tự nhiên – những búp măng non được thu hái cẩn thận và phơi khô theo phương pháp truyền thống, không qua ngâm tẩm hóa chất bảo quản. Nhờ vậy, măng giữ được vị ngọt tự nhiên và hàm lượng dinh dưỡng cao, an toàn hơn so với măng thường.' }, { id: 'nam-dui-ga-boc-banh-da', category: 'Món nấm', name: 'Nấm Đùi Gà Bọc Bánh Đa', featured: true, description: 'Nấm bào ngư giòn nhẹ, áo muối tiêu kiểu Hong Kong.', image: 'assets/images/vegetarian-samples/menu/nam-dui-ga-boc-banh-da.png', imageAlt: 'Nấm đùi gà bọc bánh đa chay', detail: 'Nấm đùi gà, bánh đa, bánh phồng, hành tím (kèm rau càng cua & sốt tương tắc).' }, // --- Lẩu / Xúp --- { id: 'rau-rung-xao-toi', category: 'Lẩu / Xúp', name: 'Rau rừng xào tỏi', description: 'Rau rừng tươi, xào tỏi thơm.', image: '', imageAlt: 'Rau rừng xào tỏi chay', detail: 'Rau rừng xào nhanh lửa với tỏi, giữ độ giòn ngọt tự nhiên.' }, { id: 'lau-sa-te-chay', category: 'Lẩu / Xúp', name: 'Lẩu sa tế chay', description: 'Nước lẩu sa tế ấm, hợp để chia sẻ.', image: 'assets/images/vegetarian-samples/menu/lau-sa-te-chay.png', imageAlt: 'Lẩu sa tế chay', detail: 'Nước lẩu cay ấm dùng cùng nấm và rau củ tươi, hợp cho nhóm bạn hoặc gia đình.' }, { id: 'lau-tomyum-kem-beo', category: 'Lẩu / Xúp', name: 'Lẩu Tomyum kem béo', featured: true, description: 'Chua cay, hậu vị béo mềm, hợp nhóm 2 người trở lên.', image: '', imageAlt: 'Lẩu Tomyum kem béo chay', detail: 'Tomyum chua cay đặc trưng, thêm lớp kem béo mềm; dùng cùng nấm và rau củ, hợp nhóm bạn.' }, { id: 'xup-chay', category: 'Lẩu / Xúp', name: 'Xúp chay', description: 'Sánh nhẹ, ấm bụng, khởi đầu cho bữa ăn.', image: '', imageAlt: 'Xúp chay', detail: 'Xúp sánh nhẹ, ấm bụng — một khởi đầu dịu dàng trước những món chính.' }, // --- Thức uống --- { id: 'tra-dau-den', category: 'Thức uống', name: 'Trà đậu đen', description: 'Thanh mát, nhẹ nhàng.', image: 'assets/images/vegetarian-samples/menu/tra-dau-den.png', imageAlt: 'Trà đậu đen thanh mát', detail: 'Trà đậu đen rang thanh mát, hậu vị nhẹ, cân bằng bữa ăn.' }, { id: 'nuoc-ep-trai-cay-tuoi', category: 'Thức uống', name: 'Nước ép trái cây tươi', description: 'Tươi, dễ uống, hợp với bữa chay.', image: 'assets/images/vegetarian-samples/menu/nuoc-ep-trai-cay-tuoi.png', imageAlt: 'Nước ép trái cây tươi', detail: 'Nước ép trái cây tươi theo mùa, dễ uống và hợp tinh thần bữa ăn lành.' }, // --- Tráng miệng --- { id: 'che-troi-nuoc', category: 'Tráng miệng', name: 'Chè Trôi Nước Ngọt Lành', featured: true, description: 'Chè trôi nước, biểu trưng cho sự viên mãn, trôi chảy và hanh thông.', image: 'assets/images/vegetarian-samples/menu/che-troi-nuoc.svg', imageAlt: 'Chè trôi nước ngọt lành chay', detail: 'Được gian bếp của chúng tôi chế biến dẻo thơm, vị ngọt thanh quyện cùng gừng ấm nóng. Mỗi bát chè là lời gửi gắm ước nguyện một năm mới bình an và đủ đầy cho gia đình.' }, ]; const MENU_CATS = MENU_ITEMS.reduce((acc, m) => (acc.includes(m.category) ? acc : [...acc, m.category]), []); /* ---- Một card món: click để mở modal. Không có ảnh thật -> khung ornament tinh tế, không img ---- */ function DishCard({ dish, index, onOpen }) { return ( ); } /* ---- Lightbox/modal xem chi tiết món ---- */ function DishModal({ dish, onClose }) { const open = !!dish; useLockBodyScroll(open); const closeRef = useRef(null); useEffect(() => { if (!open) return; const onKey = (e) => { if (e.key === 'Escape') onClose(); }; document.addEventListener('keydown', onKey); if (closeRef.current) closeRef.current.focus(); return () => document.removeEventListener('keydown', onKey); }, [open, onClose]); if (!open) return null; return (
e.stopPropagation()} >
{dish.image ? {dish.imageAlt} : (
Hình ảnh món ăn đang được bổ sung
)}
{dish.category}

{dish.name}

); } /* ---------- SECTION 4 — MENU ---------- */ function MenuSection() { const [cat, setCat] = useState(MENU_CATS[0]); const [activeDish, setActiveDish] = useState(null); const items = MENU_ITEMS.filter((m) => m.category === cat); return ( ); } Object.assign(window, { StorySection, ExperienceSection, MenuSection });