/* ========================================================================= app.jsx — 2B Pak Kong Au owner-direct single-page site ========================================================================= */ const { useState, useEffect, useRef } = React; const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "theme": "natural", "accent": "default", "corners": "soft" }/*EDITMODE-END*/; const ACCENTS = { default: null, forest: ["oklch(0.50 0.072 152)","oklch(0.36 0.07 152)","oklch(0.93 0.03 150)"], clay: ["oklch(0.585 0.082 55)","oklch(0.45 0.07 50)","oklch(0.93 0.035 60)"], ocean: ["oklch(0.555 0.084 232)","oklch(0.43 0.08 240)","oklch(0.93 0.035 232)"], bronze: ["oklch(0.545 0.062 62)","oklch(0.42 0.06 62)","oklch(0.93 0.028 70)"] }; /* ===================================================================== */ function App(){ const [t, setTweak] = useTweaks(TWEAK_DEFAULTS); const initialLang = (()=>{ try{ if(window.__LANG__==='en'||window.__LANG__==='zh') return window.__LANG__; const path = location.pathname.toLowerCase(); if(/(^|\/)en(\/|$)/.test(path)) return 'en'; if(/(^|\/)zh(\/|$)/.test(path)) return 'zh'; const p=new URLSearchParams(location.search).get('lang'); if(p==='en'||p==='zh') return p; }catch(e){} return 'zh'; })(); const [lang, setLang] = useState(initialLang); /* keep the URL in sync so the visible link is always shareable in the current language */ const changeLang = (l)=>{ setLang(l); try{ history.replaceState(null,'', '/'+l+'/'); }catch(e){} }; const [faq, setFaq] = useState(0); const [contact, setContact] = useState(false); const [navOpen, setNavOpen] = useState(false); const [light, setLight] = useState(null); const C = window.SITE.t(lang); const D = window.SITE.data; /* apply theme + accent + corners to */ useEffect(()=>{ const r = document.documentElement; r.setAttribute('data-theme', t.theme || 'natural'); r.setAttribute('data-lang', lang); r.lang = C.locale; const a = ACCENTS[t.accent]; if(a){ r.style.setProperty('--accent',a[0]); r.style.setProperty('--accent-ink',a[1]); r.style.setProperty('--accent-soft',a[2]); } else { r.style.removeProperty('--accent'); r.style.removeProperty('--accent-ink'); r.style.removeProperty('--accent-soft'); } if(t.corners==='sharp'){ r.style.setProperty('--radius','2px'); r.style.setProperty('--radius-lg','3px'); } else { r.style.removeProperty('--radius'); r.style.removeProperty('--radius-lg'); } },[t.theme,t.accent,t.corners,lang]); const photo = (k)=> D.photos.find(p=>p.k===k)?.src; const scrollTo = (id)=>{ setNavOpen(false); document.getElementById(id)?.scrollIntoView({behavior:'smooth'}); }; return ( <>