/* ============================================================================= Curry & Kebab Restaurant — app.jsx JHOL format (restaurant-site skill) on the lite-site stack (no-build, Babel). One deliberate deviation from the starter contract (see PRD.md): the reservation form POSTs to the SaangCRM Supabase (anon INSERT-only). Every other part of the site stays network-silent. ============================================================================ */ const { useState, useEffect, useRef, useCallback } = React; const REDUCED = !!(window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches); /* ----- per-project config -------------------------------------------------- */ const BRAND = "Curry & Kebab"; const BRAND_FULL = "Curry & Kebab Restaurant"; const DEFAULT_LANG = "en"; const PHONE = "061 053 8058"; const PHONE_TEL = "tel:+66610538058"; const MAPS_URL = "https://www.google.com/maps/search/?api=1&query=" + encodeURIComponent("Curry & Kebab Restaurant, Charoen Krung 36 Alley, Bang Rak, Bangkok"); const IG_URL = "https://www.instagram.com/curry_kebab_restaurant/"; const FB_URL = "https://www.facebook.com/61578118597870"; const TIKTOK_URL = "https://www.tiktok.com/@currykebab2"; /* Reservations → SaangCRM (Supabase, publishable key: RLS = anon INSERT-only). */ const SUPA_URL = "https://zwyzqxdtmghfqunhdgil.supabase.co"; const SUPA_KEY = "sb_publishable_5-NTwOr5kySKQW6UcVXfaQ_mTdwspk-"; const RES_ENDPOINT = SUPA_URL + "/rest/v1/reservations"; const RES_SITE = "curry-kebab"; window.__RES_ENDPOINT = RES_ENDPOINT; // exposed for tests const SITE_URL = "https://curry-kebab-restaurant.vercel.app"; // must match index.html const GA_ID = null; const OG_LOCALE = { en: "en_US", th: "th_TH" }; /* Locale-specific title/description — Googlebot renders JS, so the ?lang=th URL (own hreflang alternate) indexes with the Thai snippet. Keywords chosen for what Thai diners actually type: cuisine terms + neighbourhood landmarks. */ const SEO_META = { en: { title: "Curry & Kebab Restaurant — Halal Pakistani & Indian, Bang Rak Bangkok", desc: "Family-run halal Pakistani & Indian restaurant opposite Central Bangrak, steps from BTS Saphan Taksin. Karahi, biryani, tandoori naan. Open daily 11:00–23:00. Book a table online.", }, th: { title: "Curry & Kebab — ร้านอาหารอินเดีย ปากีสถาน ฮาลาล บางรัก ใกล้ BTS สะพานตากสิน", desc: "ร้านอาหารอินเดียและปากีสถานฮาลาล ย่านบางรัก ถนนเจริญกรุง ใกล้ BTS สะพานตากสิน ตรงข้ามเซ็นทรัลบางรัก — ไก่การาฮี ข้าวหมกบิรยานี นานอบเตาทันดูร์ แกงกอร์มา เปิดทุกวัน 11:00–23:00 จองโต๊ะออนไลน์ได้", }, }; function initialLang() { try { const p = new URLSearchParams(window.location.search).get("lang"); if (p === "en" || p === "th") return p; return localStorage.getItem("site-lang") || DEFAULT_LANG; } catch { return DEFAULT_LANG; } } function enhanceSeo(lang) { try { const base = SITE_URL.replace(/\/$/, ""); const url = lang === DEFAULT_LANG ? base + "/" : base + "/?lang=" + lang; const set = (sel, attr, val) => { const el = document.querySelector(sel); if (el) el.setAttribute(attr, val); }; document.documentElement.lang = lang; set('link[rel="canonical"]', "href", url); set('meta[property="og:url"]', "content", url); set('meta[property="og:locale"]', "content", OG_LOCALE[lang] || "en_US"); const meta = SEO_META[lang] || SEO_META.en; document.title = meta.title; set('meta[name="description"]', "content", meta.desc); set('meta[property="og:title"]', "content", meta.title); set('meta[property="og:description"]', "content", meta.desc); set('meta[name="twitter:title"]', "content", meta.title); set('meta[name="twitter:description"]', "content", meta.desc); } catch {} } function loadAnalytics() { if (!GA_ID || document.getElementById("ga4-src")) return; const s = document.createElement("script"); s.id = "ga4-src"; s.async = true; s.src = "https://www.googletagmanager.com/gtag/js?id=" + GA_ID; document.head.appendChild(s); window.dataLayer = window.dataLayer || []; window.gtag = function () { window.dataLayer.push(arguments); }; window.gtag("js", new Date()); window.gtag("config", GA_ID); } /* ----- menu data (prices EXACTLY as printed on the client's menu card) ------ */ const KARAHI = [ { img: "assets/karahi-chicken.jpg", en: "Chicken Karahi", th: "ไก่การาฮี", half: "฿320", full: "฿600" }, { img: "assets/karahi-desi.jpg", en: "Desi Chicken Karahi", th: "ไก่บ้านการาฮี", half: "฿400", full: "฿800" }, { img: "assets/karahi-white.jpg", en: "White Chicken Karahi", th: "การาฮีไก่ขาว", half: "฿400", full: "฿800" }, { img: "assets/karahi-achari.jpg", en: "Chicken Achari Karahi", th: "ไก่อาจารีการาฮี", half: "฿400", full: "฿800" }, ]; const FAVES = [ { en: "Lamb Biryani", th: "ข้าวหมกบิรยานีแกะ" }, { en: "Mutton Pulao", th: "ข้าวปูเลาเนื้อแกะ" }, { en: "Chicken Korma", th: "แกงกอร์มาไก่" }, { en: "Rogni Naan", th: "โรกนีนาน" }, ]; /* ----- i18n ---------------------------------------------------------------- */ const DICT = { en: { nav: { story: "Our Story", menu: "Menu", gallery: "Gallery", visit: "Visit Us", resv: "Reservations", cta: "Book a table" }, hero: { alt: "Curry & Kebab Restaurant storefront on Charoen Krung, Bang Rak" }, resv: { eyebrow: "Reservations", title: "Book a table", body: "Reserve ahead and your table is waiting. We confirm every booking by phone.", name: "Your name", phone: "Phone number", party: "Guests", date: "Date", time: "Time", notes: "Anything else (optional)", submit: "Send reservation", sending: "Sending…", okT: "Reservation received!", okB: "Thank you — we will call you shortly to confirm your table.", errT: "Something went wrong", errB: "We could not send your reservation. Please call us instead:", phoneLine: "Prefer to talk? Call us at", errReq: "This field is required", errPhone: "Enter a valid phone number", errParty: "Must be 1–40", errDate: "Pick today or a future date", partyUnit: (n) => n + (n === 1 ? " guest" : " guests"), }, story: { eyebrow: "Our Story", title: "Good food, great vibes", body1: "Curry & Kebab is a family-run halal kitchen in the heart of Bang Rak — a few steps from Saphan Taksin BTS, opposite Central Bangrak. We cook authentic Pakistani and Indian food: karahi seared over a hard flame, biryani layered the slow way, naan pulled from the tandoor to your table.", body2: "Flavorful dishes, warm hospitality and a place you'll love to return to. Dine in, take away, or have it delivered.", }, menu: { eyebrow: "Our Menu", title: "This week's karahi picks", body: "Karahi is our signature — chicken seared in a blackened steel wok with tomato, ginger and green chilli. Half feeds two; full is for the table.", half: "Half", full: "Full", favesTitle: "House favourites — ask for today's price:", }, quote: { line: "“Good food brings people together.”", badges: ["Halal", "Dine-in", "Takeaway", "Delivery"], }, gallery: { eyebrow: "Gallery", title: "A look around" }, faq: { eyebrow: "FAQ", title: "Good to know", items: [ { q: "Is Curry & Kebab halal?", a: "Yes — we are a halal restaurant. Everything from our karahi to our biryani is prepared halal." }, { q: "What kind of food do you serve?", a: "Authentic Pakistani and North Indian cuisine: chicken karahi seared in a steel wok, dum biryani, chicken korma, kebabs, and naan baked fresh in the tandoor." }, { q: "Where are you located?", a: "Shop 19, Soi 50 (Charoen Krung 36 Alley), Bang Rak — a short walk from BTS Saphan Taksin, opposite Central Bangrak, near the Shangri-La and lebua hotels by the Chao Phraya river." }, { q: "What are your opening hours?", a: "Open every day, 11:00 AM to 11:00 PM." }, { q: "Do you take reservations?", a: "Yes — book a table right on this page and we confirm by phone, or call 061 053 8058." }, { q: "Do you offer takeaway or delivery?", a: "Yes — dine-in, takeaway and delivery are all available." }, ], }, visit: { title: "Let's Connect", addrL: "Address", addr1: "Shop 19, Soi 50, Charoen Krung 36 Alley,", addr2: "Khwaeng Bang Rak, Bang Rak, Bangkok 10500", addr3: "Opposite Central Bangrak · few steps from Saphan Taksin BTS", hoursL: "Timings", hours: "Open daily · 11:00 AM – 11:00 PM", contactL: "Contact Us", dir: "Get directions", copy: "Copy address", copied: "Copied ✓", followL: "Follow us", pins: ["Curry & Kebab", "BTS Saphan Taksin", "Central Bangrak"], rights: "© 2026 Curry & Kebab Restaurant", credit: "Site by Saang Studio", }, sticky: { call: "Call", book: "Book a table" }, }, th: { nav: { story: "เรื่องราวของเรา", menu: "เมนู", gallery: "แกลเลอรี", visit: "การเดินทาง", resv: "จองโต๊ะ", cta: "จองโต๊ะ" }, hero: { alt: "หน้าร้าน Curry & Kebab Restaurant ถนนเจริญกรุง บางรัก" }, resv: { eyebrow: "จองโต๊ะ", title: "จองโต๊ะล่วงหน้า", body: "จองล่วงหน้าแล้วมาถึงก็นั่งได้เลย ทุกการจองเราจะโทรยืนยันให้แน่นอน", name: "ชื่อของคุณ", phone: "เบอร์โทรศัพท์", party: "จำนวนคน", date: "วันที่", time: "เวลา", notes: "ข้อความเพิ่มเติม (ไม่บังคับ)", submit: "ส่งการจอง", sending: "กำลังส่ง…", okT: "ได้รับการจองแล้ว!", okB: "ขอบคุณค่ะ เราจะโทรกลับเพื่อยืนยันโต๊ะของคุณโดยเร็วที่สุด", errT: "ส่งไม่สำเร็จ", errB: "ระบบขัดข้อง กรุณาโทรจองโดยตรงที่", phoneLine: "สะดวกโทรมากกว่า? โทรหาเราที่", errReq: "กรุณากรอกข้อมูลนี้", errPhone: "กรุณากรอกเบอร์โทรที่ถูกต้อง", errParty: "ต้องเป็น 1–40", errDate: "เลือกวันนี้หรือวันในอนาคต", partyUnit: (n) => n + " คน", }, story: { eyebrow: "เรื่องราวของเรา", title: "อาหารดี บรรยากาศดี", body1: "Curry & Kebab คือครัวฮาลาลของครอบครัว ใจกลางบางรัก เดินไม่กี่ก้าวจาก BTS สะพานตากสิน ตรงข้ามเซ็นทรัล บางรัก เราทำอาหารปากีสถานและอินเดียต้นตำรับ ทั้งการาฮีผัดไฟแรงในกระทะเหล็ก บิรยานีอบชั้นแบบช้าๆ และนานร้อนๆ จากเตาทันดูร์ส่งตรงถึงโต๊ะ", body2: "รสชาติจัดจ้าน การต้อนรับอบอุ่น ที่ที่คุณจะอยากกลับมาอีก นั่งทานที่ร้าน สั่งกลับบ้าน หรือเดลิเวอรีก็ได้", }, menu: { eyebrow: "เมนูของเรา", title: "การาฮีเด็ดประจำสัปดาห์", body: "การาฮีคือเมนูเด็ดของเรา ไก่ผัดไฟแรงในกระทะเหล็กกับมะเขือเทศ ขิง และพริกเขียว ขนาดครึ่งทานได้สองคน ขนาดเต็มสำหรับทั้งโต๊ะ", half: "ครึ่ง", full: "เต็ม", favesTitle: "เมนูขึ้นชื่อของร้าน สอบถามราคาได้ที่ร้าน:", }, quote: { line: "“อาหารดีๆ ทำให้ผู้คนมาอยู่ด้วยกัน”", badges: ["ฮาลาล", "ทานที่ร้าน", "สั่งกลับบ้าน", "เดลิเวอรี"], }, gallery: { eyebrow: "แกลเลอรี", title: "ชมบรรยากาศร้าน" }, faq: { eyebrow: "คำถามที่พบบ่อย", title: "เรื่องน่ารู้ก่อนมา", items: [ { q: "ร้าน Curry & Kebab เป็นร้านฮาลาลไหม?", a: "ใช่ค่ะ เราเป็นร้านอาหารฮาลาล ทุกเมนูตั้งแต่ไก่การาฮีจนถึงข้าวหมกบิรยานีปรุงแบบฮาลาลทั้งหมด" }, { q: "ที่ร้านมีอาหารแบบไหนบ้าง?", a: "อาหารปากีสถานและอินเดียเหนือต้นตำรับ — ไก่การาฮีผัดกระทะเหล็กไฟแรง ข้าวหมกบิรยานี แกงกอร์มาไก่ เคบับ และนานอบสดจากเตาทันดูร์" }, { q: "ร้านอยู่ตรงไหน?", a: "ร้านที่ 19 ซอย 50 (ซอยเจริญกรุง 36) เขตบางรัก เดินไม่กี่นาทีจาก BTS สะพานตากสิน ตรงข้ามเซ็นทรัลบางรัก ใกล้โรงแรมแชงกรี-ลาและเลอบัว ริมแม่น้ำเจ้าพระยา" }, { q: "ร้านเปิดกี่โมง?", a: "เปิดทุกวัน 11:00 – 23:00 น." }, { q: "รับจองโต๊ะไหม?", a: "รับค่ะ จองผ่านหน้าเว็บนี้ได้เลย เราจะโทรยืนยันการจอง หรือโทร 061 053 8058" }, { q: "มีสั่งกลับบ้านหรือเดลิเวอรีไหม?", a: "มีครบค่ะ ทั้งนั่งทานที่ร้าน สั่งกลับบ้าน และเดลิเวอรี" }, ], }, visit: { title: "ติดต่อเรา", addrL: "ที่อยู่", addr1: "ร้านที่ 19 ซอย 50 ซอยเจริญกรุง 36", addr2: "แขวงบางรัก เขตบางรัก กรุงเทพฯ 10500", addr3: "ตรงข้ามเซ็นทรัล บางรัก · เดินไม่กี่ก้าวจาก BTS สะพานตากสิน", hoursL: "เวลาเปิด", hours: "เปิดทุกวัน · 11:00 – 23:00 น.", contactL: "ติดต่อ", dir: "นำทาง", copy: "คัดลอกที่อยู่", copied: "คัดลอกแล้ว ✓", followL: "ติดตามเรา", pins: ["Curry & Kebab", "BTS สะพานตากสิน", "เซ็นทรัล บางรัก"], rights: "© 2026 Curry & Kebab Restaurant", credit: "เว็บไซต์โดย Saang Studio", }, sticky: { call: "โทร", book: "จองโต๊ะ" }, }, }; window.__DICT = DICT; window.__REDUCED = REDUCED; /* ----- utils --------------------------------------------------------------- */ function goto(id) { const el = document.getElementById(id); if (!el) return; if (window.__lenis) window.__lenis.scrollTo(el, { offset: -64 }); else el.scrollIntoView({ behavior: REDUCED ? "auto" : "smooth" }); } const pad2 = (n) => String(n).padStart(2, "0"); const todayIso = () => { const n = new Date(); return `${n.getFullYear()}-${pad2(n.getMonth() + 1)}-${pad2(n.getDate())}`; }; /* half-hourly slots inside opening hours (last seating 22:00) */ const TIME_SLOTS = []; for (let h = 11; h <= 22; h++) { TIME_SLOTS.push(pad2(h) + ":00"); if (h < 22) TIME_SLOTS.push(pad2(h) + ":30"); } /* ----- Reveal -------------------------------------------------------------- */ function Reveal({ children, className = "", tag = "div", id, style }) { const ref = useRef(null); const [shown, setShown] = useState(REDUCED); useEffect(() => { if (REDUCED || shown) return; const el = ref.current; if (!el || !("IntersectionObserver" in window)) { setShown(true); return; } const io = new IntersectionObserver( (es) => es.forEach((e) => { if (e.isIntersecting) { setShown(true); io.disconnect(); } }), { root: null, rootMargin: "0px 0px -20% 0px", threshold: 0.01 } ); io.observe(el); return () => io.disconnect(); }, [shown]); const Tag = tag; return {children}; } /* ----- Nav ----------------------------------------------------------------- */ function Nav({ t, lang, toggleLang }) { const [scrolled, setScrolled] = useState(false); useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 24); onScroll(); window.addEventListener("scroll", onScroll, { passive: true }); return () => window.removeEventListener("scroll", onScroll); }, []); const links = ["story", "menu", "gallery", "visit", "resv"]; const ids = { story: "story", menu: "menu", gallery: "gallery", visit: "visit", resv: "reserve" }; return ( ); } /* ----- Hero: food film ending on the logo card; photo fallback (JHOL) ------- */ const PORTRAIT_Q = "(max-width: 767px)"; function Hero({ t }) { const videoRef = useRef(null); const [failed, setFailed] = useState(false); // The 16:9 film cover-cropped into a phone hero would slice the end-card // wordmark, so phones get a re-cut 1:2 master: food shots centre-cropped to // portrait, end card letterboxed on its own black so the wordmark survives. const [small, setSmall] = useState(() => !!(window.matchMedia && window.matchMedia(PORTRAIT_Q).matches)); useEffect(() => { if (!window.matchMedia) return; const mq = window.matchMedia(PORTRAIT_Q); const onChange = e => setSmall(e.matches); mq.addEventListener ? mq.addEventListener("change", onChange) : mq.addListener(onChange); return () => { mq.removeEventListener ? mq.removeEventListener("change", onChange) : mq.removeListener(onChange); }; }, []); useEffect(() => { if (REDUCED) return; const v = videoRef.current; if (!v) return; setFailed(false); v.muted = true; const p = v.play(); if (p && p.catch) p.catch(() => setFailed(true)); }, [small]); const showPhoto = REDUCED || failed; const film = small ? "assets/hero-portrait" : "assets/hero"; return (
{showPhoto ? ( {t.hero.alt} ) : ( )}
); } /* ----- Reservations (below hero — the one section allowed to POST) ---------- */ function Reservations({ t }) { const [status, setStatus] = useState("idle"); // idle | sending | ok | error const [errors, setErrors] = useState({}); const r = t.resv; const onSubmit = async (e) => { e.preventDefault(); if (status === "sending") return; const f = e.target; const name = f.name.value.trim(); const phone = f.phone.value.trim(); const party = Number(f.party.value); const date = f.date.value; const time = f.time.value; const notes = f.notes.value.trim(); const next = {}; if (!name) next.name = r.errReq; if (!phone) next.phone = r.errReq; else if (!/^[+0-9 ()-]{6,20}$/.test(phone)) next.phone = r.errPhone; if (!Number.isInteger(party) || party < 1 || party > 40) next.party = r.errParty; if (!date) next.date = r.errReq; else if (date < todayIso()) next.date = r.errDate; if (!time) next.time = r.errReq; setErrors(next); if (Object.keys(next).length) { const firstKey = ["name", "phone", "party", "date", "time"].find((k) => next[k]); const elt = firstKey && document.getElementById("r-" + firstKey); if (elt) elt.focus(); return; } if (f.website.value) { setStatus("ok"); return; } // honeypot: swallow bots silently setStatus("sending"); try { const res = await fetch(RES_ENDPOINT, { method: "POST", headers: { "Content-Type": "application/json", apikey: SUPA_KEY, Authorization: "Bearer " + SUPA_KEY, Prefer: "return=minimal", }, body: JSON.stringify({ name, phone, party_size: party, res_date: date, res_time: time, notes: notes || null, site: RES_SITE, }), }); if (!res.ok) throw new Error("HTTP " + res.status); setStatus("ok"); } catch { setStatus("error"); } }; return (

{r.eyebrow}

{r.title}

{r.body}

{status === "ok" ? (

{r.okT}

{r.okB}

) : (
{status === "error" && (

{r.errT}

{r.errB} {PHONE}

)}
{errors.name || ""}
{errors.phone || ""}
{errors.party || ""}
{errors.date || ""}
{errors.time || ""}