// ============ 玄境 sections ============ const { NAV, ARTS, PRODUCTS, BRANCHES, HEXAGRAMS, TESTI } = window.DATA; // reveal-on-scroll wrapper function Reveal({ children, delay = 0, as: Tag = 'div', className = '', style = {} }) { const ref = useRef(null); useEffect(() => { const el = ref.current; const io = new IntersectionObserver((es) => { es.forEach(e => { if (e.isIntersecting) { setTimeout(() => el.classList.add('in'), delay); io.unobserve(el); } }); }, { threshold: 0.16 }); io.observe(el); return () => io.disconnect(); }, [delay]); return {children}; } // section heading (brush title + en sub + red divider) function Heading({ cn, en, enMain, color = '#F4ECD3', size = 64, sub }) { const lang = useLang(); if (lang === 'en' && enMain) { return (

{enMain}

); } return (
{sub &&
{sub}
}

{cn}

{en &&
{en}
}
); } /* ---------------- NAV ---------------- */ function Nav({ cartCount, onCart, lang, setLang }) { return ( ); } /* ---------------- HERO ---------------- */ function HeroDragon() { const wrapRef = useRef(null); const bgRef = useRef(null); const specRef = useRef(null); const canvasRef = useRef(null); const target = useRef({ x: 0, y: 0, mx: 0, my: 0, over: 0 }); const cur = useRef({ x: 0, y: 0, mx: 0, my: 0, over: 0 }); // mouse / scroll parallax + scale-light tracking useEffect(() => { const wrap = wrapRef.current; const onMove = (e) => { const r = wrap.getBoundingClientRect(); target.current.x = ((e.clientX - r.left) / r.width - 0.5) * 2; target.current.y = ((e.clientY - r.top) / r.height - 0.5) * 2; target.current.mx = e.clientX - r.left; target.current.my = e.clientY - r.top; target.current.over = 1; }; const onLeave = () => { target.current.x = 0; target.current.y = 0; target.current.over = 0; }; wrap.addEventListener('mousemove', onMove); wrap.addEventListener('mouseleave', onLeave); let raf; const tick = () => { const t = target.current, c = cur.current; c.x += (t.x - c.x) * 0.06; c.y += (t.y - c.y) * 0.06; c.mx += (t.mx - c.mx) * 0.18; c.my += (t.my - c.my) * 0.18; c.over += (t.over - c.over) * 0.08; const sc = window.scrollY || 0; const tf = `scale(1.12) translate(${c.x * -16}px, ${c.y * -12 + sc * 0.12}px)`; if (bgRef.current) bgRef.current.style.transform = tf; if (specRef.current) { specRef.current.style.transform = tf; specRef.current.style.opacity = c.over * 0.9; specRef.current.style.setProperty('--mx', (c.mx + 40) + 'px'); specRef.current.style.setProperty('--my', (c.my + 40) + 'px'); } raf = requestAnimationFrame(tick); }; tick(); return () => { cancelAnimationFrame(raf); wrap.removeEventListener('mousemove', onMove); wrap.removeEventListener('mouseleave', onLeave); }; }, []); // rising gold embers useEffect(() => { const cv = canvasRef.current; const ctx = cv.getContext('2d'); let w, h, raf; const resize = () => { const r = cv.getBoundingClientRect(); w = cv.width = r.width; h = cv.height = r.height; }; resize(); const ro = new ResizeObserver(resize); ro.observe(cv); const N = 46; const P = Array.from({ length: N }, () => ({ x: Math.random() * w, y: Math.random() * h, r: Math.random() * 1.8 + 0.6, sp: Math.random() * 0.5 + 0.18, dr: (Math.random() - 0.5) * 0.4, a: Math.random() * 0.6 + 0.2, tw: Math.random() * Math.PI * 2, })); const draw = () => { ctx.clearRect(0, 0, w, h); for (const p of P) { p.y -= p.sp; p.x += p.dr + Math.sin(p.tw += 0.02) * 0.15; if (p.y < -6) { p.y = h + 6; p.x = Math.random() * w; } const tw = 0.6 + Math.sin(p.tw) * 0.4; ctx.beginPath(); ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2); ctx.fillStyle = `rgba(255,${200 + Math.floor(Math.random() * 20)},120,${p.a * tw})`; ctx.shadowBlur = 8; ctx.shadowColor = 'rgba(255,196,90,0.9)'; ctx.fill(); } raf = requestAnimationFrame(draw); }; draw(); return () => { cancelAnimationFrame(raf); ro.disconnect(); }; }, []); return (
{/* specular layer — glowing gold scales under the cursor */}
{/* drifting qi mist */}
{/* pulsing qi glow near dragon pearl */}
); } function Hero() { const lang = useLang(); const en = lang === 'en'; return (
{/* hero text block */}
{en ? 'Heir to orthodox Daoism · Reading the mysteries of heaven and earth' : '傳承道家正統　洞悉天地玄机'}

{en ? 'The Great Way,' : '大道至简'}

{en ? 'Made Simple' : '萬物歸宗'}

{en ? 'Through the Daoist principles of yin-yang and the five elements, aided by the arts of Zi Wei and the Eight Trigrams, we part the fog of fate — to help you find your true heart, move with heaven\u2019s timing, and reach the union of self and cosmos.' : <>以道家陰陽五行之理，輔以紫微八卦之術。
為您撥開命理迷霧，尋得本心，順應天時，達至天人合一之境。}

{en ? 'Ask Your Future' : '叩問前程'} →
); } /* ---------------- MASTER ---------------- */ function Master() { const lang = useLang(); const en = lang === 'en'; return (
{en ? 'About the Master' : '關于道長'} {en ? 'Master Xuanyin' : '玄隱山人'}
{en ? 'Maoshan Shangqing Lineage · Bearer of the “Jia” Generation' : '茅山上清派 · 嘉字輩傳人'}
{en ? 'The Dao endures · To save and ferry all' : '道炁長存 · 濟世度人'}

{en ? <>A son of the Dao from his earliest years, he entered the altars of Maoshan, ascended the platform and received the sacred registers, taking his place in the Shangqing lineage of the “Jia” generation. For over twenty years he has pored over the scriptures of the Three Caverns and the secret essentials of cinnabar and talisman. Heir to teachings passed mouth to ear, he is master above all of the secretly transmitted Da Liu Ren oracle, of consecrated talismans and charms, and of feng shui for the dwellings of the living and the dead — reading the courses of the stars above, the dragon-veins and waters below, and the unseen that lies between. To cultivate the Dao is to cultivate the heart; these arts are no means of profit, but a raft to ferry others across. Heaven’s secrets may be glimpsed, yet good and ill remain each soul’s to keep — may every seeker tell right from wrong and do good, for only so is fortune truly courted and harm escaped. : <>道號玄隱山人，夙具道緣，入茅山道場，登壇受籙，列上清嘉字之輩。參研三洞經法、丹符秘要二十余載。
承師門口耳秘傳，尤精大六壬神課、靈符符籙、陰陽宅風水之秘術——上窺星躔垣局，下察龍脈砂水，中通幽明鬼神。
修道即修心，數術非為斂財，實乃度人之舟筏。天機雖可洞見，善惡終須自持；願緣主明辨是非、積德行善，方得趨吉避凶，福澤綿長。}

); } /* ---------------- 今日玄机 (draw fortune) ---------------- */ function Today() { const lang = useLang(); const en = lang === 'en'; const [shaking, setShaking] = useState(false); const [result, setResult] = useState(null); const [flying, setFlying] = useState(null); const draw = () => { if (shaking || flying) return; setResult(null); setShaking(true); const hex = HEXAGRAMS[Math.floor(Math.random() * HEXAGRAMS.length)]; setTimeout(() => { setShaking(false); setFlying(hex); setTimeout(() => { setFlying(null); setResult(hex); }, 1050); }, 1000); }; return (

{en ? <>Still your mind and breathe; a sincere heart draws true.
Touch the lot-tube to draw today’s Yijing verse and divine counsel, cast just for you. : <>凝神靜氣，心誠則靈。
觸動簽筒，抽取屬于您今日的《易經》爻辭與神明啟示。}

{flying &&
{flying.name}
}
{shaking ? (en ? 'The tube is shaking\u2026' : '簽筒搖動中……') : (flying ? (en ? 'A lot flies out\u2026' : '一签飞出……') : (result ? (en ? '\u2014 Tap the tube to draw again \u2014' : '— 點擊簽筒可再求一签 —') : (en ? 'Tap the tube to seek today\u2019s oracle' : '輕觸簽筒，求取今日玄机')))}
{result && (
{result.gua}
{en ? result.nameEn : result.name + '卦'}
{en ? result.judgeEn : result.judge}
{en ? <>“{result.lineEn}” : <>「{result.line}」}

{en ? result.textEn : result.text}

)} {en ? 'Get a Full Reading' : '專業解簽'} →
); } /* ---------------- 本命流年 (zodiac) ---------------- */ function Natal() { const lang = useLang(); const en = lang === 'en'; const elEn = { 水: 'Water', 土: 'Earth', 木: 'Wood', 火: 'Fire', 金: 'Metal' }; const [active, setActive] = useState(null); return (

{en ? <>The year is Bing-Wu — its stem is Fire, its branch the Horse.
Each of the twelve signs holds its own making; touch a jade tablet to explore the turning fortunes of your year. : <>歲在丙午，天干屬火，地支屬馬。
十二生肖各具造化，觸動玉牌，探尋您本命之年的流轉玄机。}

{BRANCHES.map((b, i) => ( ))}
{active === null ? (en ? '\u2014 Touch a tablet to flip and read its verdict \u2014' : '— 触动玉牌，翻看本命流年批语 —') : (en ? `Viewing \u201C${BRANCHES[active].animalEn}\u201D · tap to close` : `已观「${BRANCHES[active].zhi}」· 再触可收`)}
); } /* ---------------- 玄門數術 (arts cards) ---------------- */ function Arts() { const lang = useLang(); const en = lang === 'en'; return (

{en ? 'Carrying the essence of the Quanzhen and Zhengyi schools, we ease your troubles through the arts of the Yijing.' : '秉承全真與正一之精髓，以易學數術為您排憂解難。'}

); } /* ---------------- helpers for booking ---------------- */ const PROD_IMG = { luopan: 'assets/art-qimen.jpg', wuxing: 'assets/art-wuxing.jpg', ziwei: 'assets/art-ziwei.jpg' }; function ProductArt({ kind }) { return ; } function ProductRow({ p, addToCart }) { const lang = useLang(); const en = lang === 'en'; const [opt, setOpt] = useState(0); const [qty, setQty] = useState(1); return (

{en ? p.titleEn : p.title}

{en ? p.tagEn : p.tag}
{p.priceText}
{p.body.map((b, i) => { const lead = en ? b.leadEn : b.lead; const text = en ? b.textEn : b.text; return

{lead && {lead}{en ? ' — ' : '：'}}{text}

; })}
{qty}
); } /* ---------------- 订阅服务 ---------------- */ function Booking({ addToCart }) { return (
{PRODUCTS.map(p => )}
); } /* ---------------- 靈符符籙 ---------------- */ function Talisman() { const lang = useLang(); const en = lang === 'en'; return (

{en ? <>Each talisman is hand-drawn and consecrated by the Master to your wish.
Wealth, love, peace, career — the fee is set by the charm you request. : <>每一道靈符皆由道長親手繪製、開光加持，依願而成。
求財、姻緣、平安、事業……潤金依所求符籙而定。}

{TALISMANS.map((t) => (
{t.glyph}

{en ? t.nameEn : t.name}

{en ? t.descEn : t.desc}

))}
{en ? 'Enquire · Custom Talisman' : '咨詢定製 · 求符'} →

{en ? <>Tell the Master your wish; the fee is quoted once the charm is set. Add WeChat . : <>將所求告知道長，定符後告知潤金。敬加微信 。}

); } /* ---------------- 填写表单 ---------------- */ /* ---------------- 八字命盘 ---------------- */ function BaziChart({ data }) { const lang = useLang(); const en = lang === 'en'; const elEn = data.elEn; const [grow, setGrow] = useState(false); useEffect(() => { const t = setTimeout(() => setGrow(true), 120); return () => clearTimeout(t); }, []); const max = Math.max(...Object.values(data.count), 1); return (
{en ? 'Chart Cast · The Four Pillars' : '命盤既成 · 八字四柱'}
{en ? 'Stems reveal, branches conceal · the flow of the five elements below' : '天干透象，地支藏机 · 五行之气如下流转'}
{data.pillars.map(p => (
{en ? p.labelEn : p.label}
{p.ganChar}
{p.zhiChar}
{en ? `${p.animalEn} · ${p.subEn}` : `${p.animal} · ${p.sub}`}
))}
{['木', '火', '土', '金', '水'].map(el => (
{en ? elEn[el] : el}
{data.count[el]}
))}

{en ? data.verdictEn : data.verdict}

); } /* ---------------- 填写表单 ---------------- */ function FormSection({ toast }) { const lang = useLang(); const en = lang === 'en'; const ff = en ? { fontFamily: 'var(--font-en-serif)' } : null; const [form, setForm] = useState({ dob: '', city: '', email: '', q: '', gender: '' }); const [pref, setPref] = useState([]); const [method, setMethod] = useState(''); const [pay, setPay] = useState([]); const [chart, setChart] = useState(null); const [submitting, setSubmitting] = useState(false); const tog = (arr, set, v) => set(arr.includes(v) ? arr.filter(x => x !== v) : [...arr, v]); const submit = async (e) => { e.preventDefault(); if (!form.dob || !form.city || !form.email || !form.q || !form.gender) { toast(en ? 'Please fill in all required fields ✦' : '請填寫所有必填項 ✦'); return; } const d = new Date(form.dob); if (isNaN(d)) { toast(en ? 'Please enter a valid birth time ✦' : '請填寫有效的出生時間 ✦'); return; } setSubmitting(true); try { const res = await window.api('/api/inquiry', { dob: form.dob, city: form.city, email: form.email, q: form.q, gender: form.gender, pref, method, pay }); setChart(res.chart || window.BAZI.computeBazi(d)); toast(en ? 'Your chart is cast · the Master will read it in person ✦' : '命盤推演既成 · 道長將親為詳批 ✦'); } catch (err) { // 后端未就绪也不影响体验：用本地引擎出盘 setChart(window.BAZI.computeBazi(d)); toast(en ? 'Chart cast (saved locally · connect backend to notify the Master) ✦' : '命盤已成 · 暫存本地，後端接通後自動通知道長 ✦'); } finally { setSubmitting(false); } }; return (
setForm({ ...form, dob: e.target.value })} />
setForm({ ...form, city: e.target.value })} style={ff} />
{[['male', 'Male', '男'], ['female', 'Female', '女']].map(([v, enL, cn]) => (
setForm({ ...form, gender: v })} style={{ ...ff, marginTop: 0 }}> {en ? enL : cn}
))}
setForm({ ...form, email: e.target.value })} style={ff} />