// Trình gợi ý xe ("Find your bike") — quiz 3 bước trên MỘT trang duy nhất: // chọn xong một câu → câu đó thu gọn thành dòng tóm tắt, câu kế tiếp trượt mượt xuống ngay bên dưới. // Không reload, không đổi URL. Yếu tố Chiều cao/Size nằm ngoài phễu, là filter tuỳ chọn ở phần kết quả. const { Button, ProductCardCp: BikeFinderProductCard } = window.XedapVnDesignSystem_03b1c0; const bikeFinderStyles = { shell: { background: "#fff", paddingBottom: 8 }, wrap: { width: "100%", maxWidth: 1200, margin: "0 auto", padding: "0 24px" }, h1: { font: "700 40px/1.15 var(--font-sans)", letterSpacing: "-0.02em", margin: 0, color: "var(--foreground)" }, h2: { font: "700 28px/1.25 var(--font-sans)", letterSpacing: "-0.02em", margin: 0, color: "var(--foreground)" }, lead: { font: "400 18px/1.55 var(--font-sans)", color: "var(--muted-foreground)", margin: 0, maxWidth: 620, textWrap: "pretty" }, eyebrow: { font: "600 12px/1 var(--font-sans)", letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--muted-foreground)" }, grid: { display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(210px, 1fr))", gap: 14 }, card: { border: "1px solid var(--border)", borderRadius: 18, background: "#fff", overflow: "hidden", transition: "box-shadow .25s ease, border-color .25s ease" }, }; // Trọng số theo dòng xe cho từng mục đích / cung đường. const BF_CATS = { mtb: "Xe đạp địa hình", road: "Xe đạp đua", city: "Xe đạp thể thao đường phố", fold: "Xe đạp gấp" }; const BF_PURPOSE = [ { id: "commute", label: "Đi làm – Đi học", note: "Mỗi ngày, đường quen", icon: "briefcase", boost: { city: 3, fold: 3, road: 1, mtb: 0 } }, { id: "fitness", label: "Tập thể dục", note: "Rèn thể lực đều đặn", icon: "heartbeat", boost: { road: 3, city: 2, mtb: 1, fold: 0 } }, { id: "stroll", label: "Dạo phố", note: "Đi gần, nhẹ nhàng", icon: "storefront", boost: { city: 3, fold: 2, mtb: 1, road: 0 } }, { id: "travel", label: "Đi phượt", note: "Tour dài, mang hành lý", icon: "backpack", boost: { road: 2, city: 3, mtb: 2, fold: 0 } }, { id: "race", label: "Đua xe", note: "Tốc độ, thi đấu", icon: "trophy", boost: { road: 4, city: 1, mtb: 1, fold: 0 } }, ]; const BF_TERRAIN = [ { id: "street", label: "Đường phố, đường bằng phẳng", icon: "buildings", boost: { city: 3, fold: 3, road: 1, mtb: 0 } }, { id: "long", label: "Đường trường, đường ngoại ô", icon: "road-horizon", boost: { road: 3, city: 2, mtb: 0, fold: 0 } }, { id: "trail", label: "Đường gồ ghề, địa hình", icon: "mountains", boost: { mtb: 4, city: 1, road: 0, fold: 0 } }, { id: "gravel", label: "Đường sỏi đá nhỏ (gravel)", icon: "path", boost: { road: 2, mtb: 3, city: 1, fold: 0 } }, { id: "mixed", label: "Đường hỗn hợp", icon: "shuffle", boost: { city: 2, mtb: 2, road: 2, fold: 1 } }, ]; const BF_BUDGET = [ { id: "b1", label: "Dưới 5 triệu", min: 0, max: 5000000, icon: "wallet" }, { id: "b2", label: "5 – 10 triệu", min: 5000000, max: 10000000, icon: "wallet" }, { id: "b3", label: "10 – 20 triệu", min: 10000000, max: 20000000, icon: "wallet" }, { id: "b4", label: "Trên 20 triệu", min: 20000000, max: Infinity, icon: "wallet" }, ]; const BF_HEIGHTS = [ { id: "h1", label: "Dưới 1m55", size: "S (48–50)" }, { id: "h2", label: "1m55 – 1m65", size: "M (52)" }, { id: "h3", label: "1m66 – 1m75", size: "L (54–56)" }, { id: "h4", label: "Trên 1m75", size: "XL (58)" }, ]; const BF_STEPS = [ { key: "purpose", n: 1, title: "Mục đích đạp xe chính của bạn là gì?", short: "Mục đích đạp xe", options: BF_PURPOSE }, { key: "terrain", n: 2, title: "Bạn thường đạp trên cung đường nào?", short: "Cung đường", options: BF_TERRAIN }, { key: "budget", n: 3, title: "Ngân sách mua xe của bạn trong khoảng bao nhiêu?", short: "Tầm giá", options: BF_BUDGET, hint: "Chúng tôi vẫn hiển thị mẫu lệch nhẹ nếu đó là lựa chọn tốt hơn." }, ]; // Cuộn mượt tới một element mà không dùng scrollIntoView. const bfScrollTo = (el, offset = 96) => { if (!el) return; const y = el.getBoundingClientRect().top + window.pageYOffset - offset; window.scrollTo({ top: Math.max(0, y), behavior: "smooth" }); }; function BikeFinderOption({ selected, onClick, label, note, icon }) { const [hover, setHover] = React.useState(false); return ( ); } // Một câu hỏi: mở (grid lựa chọn), đã trả lời (thu gọn thành dòng tóm tắt), hoặc chờ (mờ). function BikeFinderQuestion({ step, state, value, onPick, onEdit, innerRef }) { const open = state === "open"; const done = state === "done"; const chosen = step.options.find((o) => o.id === value); return (
{done ? : step.n} {done ? ( {step.short}: {chosen ? chosen.label : "—"} ) : ( {step.title} )} {done && ( )}
{step.hint &&

{step.hint}

}
{step.options.map((o) => ( onPick(step.key, o.id)} /> ))}
); } // Card sản phẩm dùng chung style với homepage_cp (ProductCardCp + hover đổi ảnh). function BikeFinderCard({ product, onAdd, onOpen }) { const [hover, setHover] = React.useState(false); const image = (hover && product.img2) || product.image || product.img; return (
setHover(true)} onMouseLeave={() => setHover(false)} style={{ display: "flex", minWidth: 0 }}> onOpen && onOpen(product)} />
); } function BikeFinderProgress({ answered }) { return (
{Math.min(answered + 1, 3)}/3 câu
{[0, 1, 2].map((i) => ( ))}
{answered === 3 ? "Đã có kết quả" : "Khoảng 30 giây"}
); } function BikeFinderResults({ answers, height, onHeight, onAdd, onOpen, onBrowseAll, onRestart, innerRef }) { const products = (window.KitData && window.KitData.PRODUCTS) || []; const purpose = BF_PURPOSE.find((p) => p.id === answers.purpose); const terrain = BF_TERRAIN.find((t) => t.id === answers.terrain); const budget = BF_BUDGET.find((b) => b.id === answers.budget) || BF_BUDGET[3]; const heightOpt = BF_HEIGHTS.find((h) => h.id === height); const scored = products.map((p) => { let s = 0; for (const src of [purpose, terrain]) { if (!src) continue; for (const [cid, w] of Object.entries(src.boost)) if (p.category === BF_CATS[cid]) s += w; } if (p.price >= budget.min && p.price <= budget.max) s += 5; else s -= Math.min(4, Math.abs(p.price - (p.price > budget.max ? budget.max : budget.min)) / 4000000); s += (p.rating - 4.4) * 2; return { p, s }; }).sort((a, b) => b.s - a.s); const top = scored.slice(0, 3).map((x) => x.p); const outOfBudget = top.some((p) => p.price < budget.min || p.price > budget.max); const tags = [purpose && purpose.label, terrain && terrain.label, budget.label, heightOpt && heightOpt.label].filter(Boolean); return (
Kết quả gợi ý

3 mẫu xe khớp nhất với bạn

{tags.map((t) => ( {t} ))}
{/* Chiều cao / size — filter tuỳ chọn, nằm ngoài phễu 3 bước */}
Chiều cao của bạn (không bắt buộc)
{BF_HEIGHTS.map((h) => { const on = height === h.id; return ( ); })}
{heightOpt && ( Size khung gợi ý: {heightOpt.size} · xem hướng dẫn chọn size ở trang sản phẩm )}
{outOfBudget && (
Một số mẫu lệch khỏi mức {budget.label.toLowerCase()} nhưng khớp hơn với cách bạn đạp.
)}
{top.map((p) => )}
Vẫn muốn xem thêm?
Xem toàn bộ danh mục hoặc nhờ tư vấn viên chọn giúp bạn.
); } function BikeFinder({ onAdd, onOpen, onBrowseAll }) { const [answers, setAnswers] = React.useState({}); const [height, setHeight] = React.useState(null); const [editing, setEditing] = React.useState(null); // key câu đang mở lại để sửa const refs = React.useRef({}); const answeredCount = BF_STEPS.filter((s) => answers[s.key]).length; const firstUnanswered = BF_STEPS.find((s) => !answers[s.key]); const activeKey = editing || (firstUnanswered && firstUnanswered.key) || null; const stateOf = (s) => (s.key === activeKey ? "open" : answers[s.key] ? "done" : "locked"); const pick = (key, value) => { const next = { ...answers, [key]: value }; setAnswers(next); setEditing(null); const following = BF_STEPS.find((s) => !next[s.key]); const targetKey = following ? following.key : "results"; setTimeout(() => bfScrollTo(refs.current[targetKey], following ? 120 : 96), 260); }; const restart = () => { setAnswers({}); setHeight(null); setEditing(null); setTimeout(() => bfScrollTo(refs.current.purpose, 120), 60); }; return (
Trình gợi ý xe

Tìm chiếc xe dành cho bạn

Trả lời 3 câu hỏi ngắn về cách bạn muốn đạp. Kết quả hiện ngay bên dưới, không cần chuyển trang.

{BF_STEPS.map((s) => ( { refs.current[s.key] = el; }} onPick={pick} onEdit={() => { setEditing(s.key); setTimeout(() => bfScrollTo(refs.current[s.key], 120), 60); }} /> ))}
{answeredCount === 3 && ( { refs.current.results = el; }} onAdd={onAdd} onOpen={onOpen} onBrowseAll={onBrowseAll} onRestart={restart} /> )}
); } Object.assign(window, { BikeFinder });