); } // ─── Nav ───────────────────────────────────────────────────────────────── function Nav({ lang, setLang, t }) { const [scrolled, setScrolled] = useState(false); useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 24); window.addEventListener("scroll", onScroll, { passive: true }); return () => window.removeEventListener("scroll", onScroll); }, []); return ( ); } // ─── Hero ─────────────────────────────────────────────────────────────── const POPULAR_CHIPS = [ { id: "how-to-use" }, { id: "best-spot" }, { id: "kids" }, { id: "vs-pills" }, { id: "when-effect", th: "ออกฤทธิ์ยังไง?", en: "How does it activate?" }, { id: "ship-time" }]; function Hero({ lang, t, query, setQuery, onPopular }) { const popular = POPULAR_CHIPS. map((c) => { const item = FAQ_ITEMS.find((it) => it.id === c.id); if (!item) return null; const label = lang === "th" ? c.th || item.q_th : c.en || item.q_en; return { id: item.id, label }; }). filter(Boolean); return (

{t.chip}

{t.hero_h1_a}
{t.hero_h1_b}

{t.hero_sub}

setQuery(e.target.value)} placeholder={t.search_placeholder} aria-label="Search FAQ" /> {query && }

{t.popular_label}

{popular.map((c) => )}

); } // ─── Sidebar (categories) ─────────────────────────────────────────────── function Sidebar({ lang, t, categories, counts, active, setActive }) { return ( ); } // ─── Mobile category strip ────────────────────────────────────────────── function CategoryStrip({ lang, t, categories, counts, active, setActive }) { return (

{categories.map((cat) => )}

); } // ─── Glass-pill FAQ row (accordion) ───────────────────────────────────── function FAQRow({ item, lang, t, open, onToggle, highlight }) { const ref = useRef(null); const skuClass = `sku-${item.sku === "all" ? "revive" : item.sku}`; const question = lang === "th" ? item.q_th : item.q_en; const answer = lang === "th" ? item.a_th : item.a_en; return (

);} // ─── FAQ section ──────────────────────────────────────────────────────── function FAQList({ lang, t, items, active, setActive, openId, setOpenId, query, highlight, categories, counts }) { // group by category const grouped = useMemo(() => { const map = {}; items.forEach((it) => { if (!map[it.category]) map[it.category] = []; map[it.category].push(it); }); return map; }, [items]); if (items.length === 0) { return (

{t.no_results_h}

{t.no_results_p}

{t.no_results_cta}

); } return (

{categories.map((cat) => { const list = grouped[cat.id]; if (!list || list.length === 0) return null; return (

{lang === "th" ? cat.th : cat.en}

{list.length}

{list.map((item) => setOpenId(openId === item.id ? null : item.id)} highlight={highlight} /> )}

); })}

); } // ─── Footer CTA ───────────────────────────────────────────────────────── function FooterCTA({ t, lang }) { return (

{t.cta_h}

{t.cta_p}

{t.cta_btn} {t.cta_shopee} {t.cta_lazada}

); } function Footer({ t }) { return ( ); } // ─── Highlighter ──────────────────────────────────────────────────────── function makeHighlighter(query) { if (!query || query.length < 1) return (s) => s; const q = query.trim().toLowerCase(); if (!q) return (s) => s; return (s) => { const lower = s.toLowerCase(); const idx = lower.indexOf(q); if (idx < 0) return s; return s.slice(0, idx) + `${s.slice(idx, idx + q.length)}` + s.slice(idx + q.length); }; } // ─── Main App ─────────────────────────────────────────────────────────── const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "palette": "revive", "density": "comfortable", "motion": true, "glass": "subtle", "showHeroPatches": true } /*EDITMODE-END*/; function App() { const [lang, setLang] = useState("th"); const [query, setQuery] = useState(""); const [active, setActive] = useState("all"); const [openId, setOpenId] = useState(null); // Tweaks (useTweaks returns [values, setTweak]) const [t, setTweak] = window.useTweaks ? window.useTweaks(TWEAK_DEFAULTS) : [TWEAK_DEFAULTS, () => {}]; const strings = STRINGS[lang]; // Filter logic const filtered = useMemo(() => { const q = query.trim().toLowerCase(); return FAQ_ITEMS.filter((it) => { if (active !== "all" && it.category !== active) return false; if (!q) return true; const hay = `${it.q_th} ${it.q_en} ${it.a_th} ${it.a_en}`.toLowerCase(); return hay.includes(q); }); }, [query, active]); const counts = useMemo(() => { const c = { all: FAQ_ITEMS.length }; FAQ_CATEGORIES.forEach((cat) => { c[cat.id] = FAQ_ITEMS.filter((it) => it.category === cat.id).length; }); return c; }, []); const highlight = useMemo(() => makeHighlighter(query), [query]); // Apply tweak data attrs to body useEffect(() => { document.body.dataset.palette = t.palette; document.body.dataset.density = t.density; document.body.dataset.motion = t.motion ? "on" : "off"; document.body.dataset.glass = t.glass; document.body.dataset.heroPatches = t.showHeroPatches ? "on" : "off"; }, [t.palette, t.density, t.motion, t.glass, t.showHeroPatches]); // Open popular question handler const handlePopular = (id) => { const it = FAQ_ITEMS.find((x) => x.id === id); if (!it) return; setActive("all"); setQuery(""); setOpenId(id); setTimeout(() => { const el = document.getElementById(`faq-${id}`); if (el) { const top = el.getBoundingClientRect().top + window.scrollY - 90; window.scrollTo({ top, behavior: "smooth" }); } }, 60); }; // Scroll to category on change const handleSetActive = (id) => { setActive(id); setOpenId(null); if (id !== "all") { setTimeout(() => { const el = document.getElementById(`cat-${id}`); if (el) { const top = el.getBoundingClientRect().top + window.scrollY - 90; window.scrollTo({ top, behavior: "smooth" }); } }, 60); } }; const aurOpacity = t.glass === "heavy" ? 1 : t.glass === "subtle" ? 0.75 : 0.45; return ( <>