{t.avail.months[view.m]} {view.y}

{t.avail.dow.map((d, i) => {d})}

{cells.map((d, i) => { if (!d) return

; const cellDate = new Date(view.y, view.m, d); cellDate.setHours(0, 0, 0, 0); const past = cellDate < today; const state = past ? "past" : dateState(view.y, view.m, d); const iso = `${view.y}-${String(view.m + 1).padStart(2, "0")}-${String(d).padStart(2, "0")}`; const isSel = selected && selected.iso === iso; const label = past ? `${d} (past)` : `${d} ${t.avail.months[view.m]} — ${t.avail[state]}`; return ( ); })}

{t.avail.open} {t.avail.hold} {t.avail.booked}

); } function Availability({ t, selected, onSelect }) { const [msg, setMsg] = useState({ text: "", ok: false }); return (

{t.avail.eyebrow}

{t.avail.title}

{t.avail.body}

setMsg({ text, ok })} />
{msg.text}

{t.avail.asideT}

{t.avail.asideB}

); } /* ----- Enquiry (demo, no backend) ------------------------------------------ */ function Enquiry({ t, selected }) { const [submitted, setSubmitted] = useState(false); const [errors, setErrors] = useState({}); const onSubmit = (e) => { e.preventDefault(); const f = e.target; const name = f.name.value.trim(); const contact = f.contact.value.trim(); const countRaw = f.count.value.trim(); const count = Number(countRaw); const next = {}; if (!name) next.name = t.form.errReq; if (!contact) next.contact = t.form.errReq; if (!countRaw || !Number.isInteger(count) || count < 1 || count > 500) next.count = t.form.errCount; setErrors(next); if (Object.keys(next).length) { const firstKey = ["name", "contact", "count"].find((k) => next[k]); const elt = firstKey && document.getElementById("f-" + firstKey); if (elt) elt.focus(); return; } setSubmitted(true); // demo only — NO network }; if (submitted) { return (

{t.form.okT}

{t.form.okB}

); } return (

{t.form.eyebrow}

{t.form.title}

{t.form.date}

{t.form.name}
{errors.name || ""}

{t.form.contact}
{errors.contact || ""}

{t.form.type}

{t.form.count}
{errors.count || ""}

{t.form.msg} </div> <button className="btn btn--accent btn--block" type="submit">{t.form.submit}</button> </form> </Reveal> </div> </section> ); } /* ----- Map ----------------------------------------------------------------- */ function StylizedMap({ t }) { const pins = [ { x: 56, y: 52, label: t.map.pins[0] }, { x: 70, y: 64, label: t.map.pins[1] }, { x: 34, y: 44, label: t.map.pins[2] }, ]; return ( <div className="mapcanvas" aria-label="Stylized map"> <svg viewBox="0 0 100 70" preserveAspectRatio="xMidYMid slice" aria-hidden="true"> <rect width="100" height="70" fill="#EAF0E6" /> <rect x="8" y="10" width="26" height="18" rx="2" fill="#E3EAD9" /> <rect x="64" y="40" width="30" height="22" rx="2" fill="#E3EAD9" /> <path d="M0 24 C 25 20, 45 34, 70 30 S 100 26, 100 30 L100 36 C 75 36, 50 40, 25 38 S 0 32, 0 32 Z" fill="#BBD7E6" opacity=".8" /> <path d="M0 50 H100" stroke="#fff" strokeWidth="3.2" /> <path d="M48 0 V70" stroke="#fff" strokeWidth="2.4" /> </svg> {pins.map((p, i) => ( <button key={i} className="pin" style={{ left: p.x + "%", top: p.y + "%" }} aria-label={p.label}> <svg className="pin__dot" viewBox="0 0 24 24" aria-hidden="true"> <path d="M12 2C7.6 2 4 5.6 4 10c0 6 8 12 8 12s8-6 8-12c0-4.4-3.6-8-8-8Z" fill={i === 0 ? "var(--accent-2)" : "var(--accent)"} /> <circle cx="12" cy="10" r="3" fill="#fff" /> </svg> <span className="pin__label">{p.label}</span> </button> ))} </div> ); } function MapBlock({ t }) { const [copied, setCopied] = useState(false); const address = t.map.addrL.replace(/\s*\[.*?\]\s*/g, ""); const copy = async () => { try { if (navigator.clipboard && navigator.clipboard.writeText) await navigator.clipboard.writeText(address); else throw new Error("no clipboard"); } catch { const el = document.getElementById("addr-line"); if (el && window.getSelection) { const range = document.createRange(); range.selectNodeContents(el); const sel = window.getSelection(); sel.removeAllRanges(); sel.addRange(range); } } setCopied(true); setTimeout(() => setCopied(false), 2000); }; return ( <section className="section" id="contact"> <div className="wrap"> <Reveal> <p className="eyebrow">{t.map.eyebrow}</p> <h2 style={{ fontSize: "clamp(28px,4vw,44px)", marginBottom: 24 }}>{t.map.title}</h2> </Reveal> <Reveal className="mapwrap"> <StylizedMap t={t} /> <div className="mapside"> <div className="addr"> <h3 style={{ fontSize: 20, marginBottom: 6 }}>{t.map.addrT}</h3> <p id="addr-line" className="muted" style={{ marginBottom: 12 }}>{t.map.addrL}</p> <div style={{ display: "flex", gap: 10, flexWrap: "wrap" }}> <a className="btn btn--accent" href={MAPS_URL} target="_blank" rel="noopener noreferrer">{t.map.dir}</a> <button className="copybtn" data-copied={copied} onClick={copy}>{copied ? t.map.copied : t.map.copy}</button> </div> </div> <div className="chips">{t.map.chips.map((c, i) => <span key={i} className="chip">{c}</span>)}</div> <div className="addr"> <h3 style={{ fontSize: 18 }}>{t.contact.title}</h3> <p style={{ margin: "6px 0" }}>{t.contact.phoneL}: <a href={PHONE_TEL}>{PHONE}</a></p> <p style={{ margin: 0 }} className="muted">{t.contact.lineL}: <span className="confirm">{t.contact.lineSoon}</span></p> </div> </div> </Reveal> </div> </section> ); } /* ----- Sticky + Footer ----------------------------------------------------- */ function StickyCta({ t }) { return ( <div className="sticky" role="region" aria-label="Quick contact"> <a className="call" href={PHONE_TEL}>📞 {t.contact.call}</a> {LINE_ID ? ( <a className="line" href={`https://line.me/ti/p/~${LINE_ID}`} target="_blank" rel="noopener noreferrer">💬 {t.contact.line}</a> ) : ( <a className="line" data-confirm="true" href={PHONE_TEL} aria-label="LINE coming soon, call instead">💬 {t.contact.lineSoon}</a> )} </div> ); } function Footer({ t }) { return ( <footer className="footer"> <div className="nav__name" style={{ fontSize: 20, letterSpacing: ".16em" }}>{BRAND}</div> <p style={{ margin: "10px 0 6px", opacity: .85 }}>{t.footer.tag}</p> <p style={{ margin: 0, opacity: .7, fontSize: 13 }}>{t.footer.rights} · {PHONE}</p> <span className="demobadge">Demo · sample data</span> </footer> ); } /* ----- App ----------------------------------------------------------------- */ function App() { const [lang, setLang] = useState(initialLang); const [selected, setSelected] = useState(null); const t = DICT[lang]; useEffect(() => { loadAnalytics(); }, []); useEffect(() => { try { localStorage.setItem("site-lang", lang); } catch {} // keep the URL locale in sync so it's shareable/crawlable (?lang=th), no reload try { const params = new URLSearchParams(window.location.search); if (lang === DEFAULT_LANG) params.delete("lang"); else params.set("lang", lang); const qs = params.toString(); window.history.replaceState(null, "", window.location.pathname + (qs ? "?" + qs : "") + window.location.hash); } catch {} enhanceSeo(lang); }, [lang]); useEffect(() => { if (REDUCED || typeof Lenis === "undefined") return; const lenis = new Lenis({ duration: 1.1, smoothWheel: true }); window.__lenis = lenis; let raf; const loop = (time) => { lenis.raf(time); raf = requestAnimationFrame(loop); }; raf = requestAnimationFrame(loop); return () => { cancelAnimationFrame(raf); lenis.destroy(); window.__lenis = null; }; }, []); const toggleLang = useCallback(() => setLang((l) => (l === "th" ? "en" : "th")), []); return ( <div className="has-sticky"> <Nav t={t} lang={lang} toggleLang={toggleLang} /> <Hero t={t} /> <About t={t} /> <Chef t={t} /> <Offer t={t} /> <Gallery t={t} /> <Availability t={t} selected={selected} onSelect={setSelected} /> <Enquiry t={t} selected={selected} /> <MapBlock t={t} /> <StickyCta t={t} /> <Footer t={t} /> </div> ); } ReactDOM.createRoot(document.getElementById("root")).render(<App />);

{BRAND}

{t.about.title}

{t.offer.title}

{it.t}

{t.gallery.title}

{t.avail.title}

{t.avail.asideT}

{t.form.okT}

{t.form.title}