// Pickle Master — Social, Private, Contact, Login, Account Pages (Light Theme) // ─── SOCIAL PAGE ───────────────────────────────────────────── function SocialPage({ lang, setPage, addToCart, user }) { const t = window.LANG[lang]; const { useState, useEffect } = React; const [added, setAdded] = useState(false); const [pageImgs, setPageImgs] = useState({}); const price = user ? 160 : 200; useEffect(() => { window.fetchSiteContent().then(d => { if (d.page_images) setPageImgs(d.page_images); }); }, []); function book() { addToCart({ name: t.nav_social, detail: lang==='EN'?'Open session — next available':'開放課節 — 下一個可用時段', price, qty:1 }); setAdded(true); setTimeout(() => setAdded(false), 2000); } return (
{/* Hero — group of HK players */}
{t.social_title}

{t.social_hero}

{t.social_desc}

{/* How it works */}
{t.social_how_title}
{[ { num:'01', title:t.social_s1_title, body:t.social_s1 }, { num:'02', title:t.social_s2_title, body:t.social_s2 }, { num:'03', title:t.social_s3_title, body:t.social_s3 }, ].map(({ num, title, body }) => (
{num}
{title}
{body}
))}
{/* Pricing + CTA */}
{t.social_price_title}
{[ { label:t.social_nonmember, price:'HK$200', sub:lang==='EN'?'per session':'每節' }, { label:t.social_member, price:'HK$160', sub:lang==='EN'?'per session (DINK/FLEX)':'每節（DINK/FLEX）' }, ].map(({ label, price:p, sub }) => (
{label}
{p}
{sub}
))}
); } // ─── PRIVATE PAGE ───────────────────────────────────────────── function PrivatePage({ lang, setPage }) { const t = window.LANG[lang]; const { useState, useEffect } = React; const [pageImgs, setPageImgs] = useState({}); useEffect(() => { window.fetchSiteContent().then(d => { if (d.page_images) setPageImgs(d.page_images); }); }, []); const partners = ['LVMH','UNIQLO','SCMP','UBS','Richemont']; const offerings = [ { title:t.private_w1_title, body:t.private_w1 }, { title:t.private_w2_title, body:t.private_w2 }, { title:t.private_w3_title, body:t.private_w3 }, ]; return (
{/* Hero — 1-on-1 coaching */}
{t.private_title}

{t.private_hero}

{t.private_desc}

{/* Partners */}
{t.private_trusted}
{partners.map(p => (
{p}
))}
{/* Offerings */}
{t.private_what_title}
{offerings.map(({ title, body }) => (
{title}
{body}
))}
{t.private_class_price}
); } // ─── CONTACT PAGE ───────────────────────────────────────────── function ContactPage({ lang }) { const t = window.LANG[lang]; const { useState, useEffect } = React; const [form, setForm] = useState({ name:'', email:'', subject:'', message:'' }); const [sent, setSent] = useState(false); const [loading, setLoading] = useState(false); const [error, setError] = useState(null); const [siteContent, setSiteContent] = useState(window.PM_CONTENT || {}); useEffect(() => { window.fetchSiteContent().then(d => setSiteContent(prev => ({ ...prev, ...d }))); }, []); async function submit(e) { e.preventDefault(); setLoading(true); setError(null); const res = await window.API.post('/api/contact', form); setLoading(false); if (res.error) { setError(res.error); return; } setSent(true); } return (
{/* Hero */}
{t.contact_title}

{t.contact_hero}

{sent ? (
{t.contact_sent}
) : (
{[ { key:'name', label:t.contact_name, type:'text', ph:'Wing-Sze Lam' }, { key:'email', label:t.contact_email, type:'email', ph:'you@example.com' }, { key:'subject', label:t.contact_subject, type:'text', ph:lang==='EN'?'Court enquiry':'場地查詢' }, ].map(({ key, label, type, ph }) => (
{label}
setForm(f=>({...f,[key]:e.target.value}))} style={{ width:'100%', padding:'12px 14px', border:'1.5px solid #D6CBBA', borderRadius:6, fontFamily:"'DM Sans',sans-serif", fontSize:14, color:'#1A1208', background:'#fff', outline:'none', boxSizing:'border-box' }} />
))}
{t.contact_message}