// live-sections.jsx — interactive content sections for the Bôn Lê site /* Service catalog (with type filter tags) */ const SERVICES = [ { route: "Huế — Đà Nẵng", from: "Huế", to: "Đà Nẵng", type: "Xe ghép 7 chỗ", desc: "1 vé ghép xe Fortuner", price: "150.000đ", tag: "ghep", hot: true }, { route: "Huế — Đà Nẵng", from: "Huế", to: "Đà Nẵng", type: "Xe ghép Limousine", desc: "1 vé ghép xe Limousine", price: "180.000đ", tag: "limo" }, { route: "Huế — Đà Nẵng", from: "Huế", to: "Đà Nẵng", type: "Bao xe 4 chỗ", desc: "Đi riêng", price: "700.000đ", tag: "bao" }, { route: "Huế — Đà Nẵng", from: "Huế", to: "Đà Nẵng", type: "Bao xe 7 chỗ", desc: "Đi riêng — Fortuner", price: "900.000đ", tag: "bao" }, { route: "Huế — Đà Nẵng", from: "Huế", to: "Đà Nẵng", type: "Bao Limousine 9 chỗ", desc: "Đoàn lớn, VIP", price: "1.500.000đ", tag: "limo" }, { route: "Huế — Hội An", from: "Huế", to: "Hội An", type: "Bao xe 4 chỗ", desc: "Đi riêng", price: "900.000đ", tag: "bao" }, { route: "Huế — Hội An", from: "Huế", to: "Hội An", type: "Bao xe 7 chỗ", desc: "Đi riêng — Fortuner", price: "1.100.000đ", tag: "bao" }, { route: "Đà Nẵng — Hội An",from: "Đà Nẵng", to: "Hội An", type: "Bao xe 4 chỗ", desc: "Sân bay → Phố cổ", price: "250.000đ", tag: "bao" }, { route: "Đà Nẵng — Hội An",from: "Đà Nẵng", to: "Hội An", type: "Bao xe 7 chỗ", desc: "Đi nhóm, gia đình", price: "300.000đ", tag: "bao" }, ]; const FILTERS = [ { key: "all", label: "Tất cả" }, { key: "ghep", label: "Xe ghép" }, { key: "limo", label: "Limousine" }, { key: "bao", label: "Bao xe" }, ]; const FAQ_DATA = [ { q: "Bôn Lê có đón tận nhà không?", a: "Có. Bôn Lê đón và trả khách tại địa chỉ trong nội thành 3 tỉnh (Huế, Đà Nẵng, Quảng Nam). Khu vực ngoại thành báo trước 1 giờ để sắp xếp tài xế." }, { q: "Thanh toán bằng cách nào?", a: "Tiền mặt khi xuống xe, chuyển khoản trước, hoặc quét QR (Momo, ZaloPay, VietQR)." }, { q: "Có thể huỷ chuyến không?", a: "Miễn phí huỷ trước giờ khởi hành 2 tiếng. Các bạn nhớ báo trước cho tài xế càng sớm càng tốt nhé!" }, { q: "Trẻ em có tính phí riêng không?", a: "Trẻ dưới 5 tuổi đi cùng người lớn miễn phí (ngồi chung ghế). Trẻ từ 5 tuổi tính như người lớn để đảm bảo chỗ ngồi riêng và an toàn." }, { q: "Có hỗ trợ hành lý không?", a: "Mỗi khách 1 vali ≤ 20kg + 1 ba lô tay. Hành lý dư báo trước. Limousine và Bao xe có khoang chứa rộng hơn." }, { q: "Có nhận giao hàng hộ giữa các tỉnh không?", a: "Có. Bôn Lê nhận giao hàng nhỏ giữa Huế · Đà Nẵng · Hội An theo từng chuyến xe. Phí chỉ từ 80.000đ/kiện. Liên hệ hotline để báo trước kích thước." }, ]; const GALLERY = [ "Kia Carnival – Đen", "Toyota Fortuner – Trắng", "Kia Carnival – Sau", "Fortuner – Hậu", "Fortuner – Trước trắng", "Fortuner – Đen", "Limousine Dcar nội thất", "Văn phòng Huế", "Ford Transit limousine", ]; const REVIEWS = [ { name: "Chị Ngọc Anh", role: "Khách thường xuyên", stars: 5, text: "Đợt đi công tác Đà Nẵng – Huế mình đã đồng hành với em này 4 lượt. Xe êm, sạch sẽ, tài xế thì khỏi chê — luôn vui vẻ nhiệt tình. Khi nào có dịp nhất định mình cũng sẽ đồng hành cùng em ý." }, { name: "Chị Trang Xinh",role: "Du khách Hà Nội", stars: 5, text: "Lần đầu vào Huế chơi cùng gia đình, đặt xe Bôn Lê qua Zalo. Tài xế đúng giờ, biết đường, biết chỗ ăn ngon. Bé nhà mình 3 tuổi đi suốt 3 tiếng không quấy khóc." }, { name: "Anh Minh Quân", role: "Doanh nhân ĐN", stars: 5, text: "Tuần nào cũng phải đi sân bay Đà Nẵng 1-2 lần, đặt Bôn Lê Limousine rồi yên tâm ngủ trên xe. Đáng đồng tiền bát gạo. Đặc biệt thích chỗ luôn có nước suối lạnh." }, { name: "Chị Mỹ Linh", role: "Khách Hội An", stars: 5, text: "Xe ghép đi Đà Nẵng giá rẻ hơn taxi nhiều mà chất lượng vẫn ổn. Tài xế anh Tâm rất tận tâm, dừng nghỉ giữa đường cho khách. Đặt qua web tiện cực." }, { name: "Anh Đức", role: "Khách quốc tế", stars: 5, text: "Tour Huế – Đà Nẵng – Hội An 3 ngày, đoàn 9 người. Limousine của Bôn Lê quá ổn. Anh tài nói được chút tiếng Anh, lễ phép, biết chiều khách. 10/10 sẽ quay lại." }, ]; const NEWS = [ { tag: "Dịch vụ", title: "Dịch vụ xe ghép Huế — Đà Nẵng — Hội An | Nhà Xe Bôn Lê", date: "24.05.2026", time: "8:25", read: "5 phút", excerpt: "Tổng hợp các tuyến và bảng giá mới nhất 2026, mẹo chọn dịch vụ phù hợp cho từng nhu cầu di chuyển." }, { tag: "Du lịch", title: "Khám phá hành trình du lịch Huế — Đà Nẵng", date: "24.05.2026", time: "8:26", read: "8 phút", excerpt: "Cẩm nang 3 ngày 2 đêm xuyên ba thành phố — điểm đến không thể bỏ qua, quán ăn địa phương và lưu ý đi xe." }, { tag: "Vận chuyển", title: "Dịch vụ nhận gửi hàng hoá an toàn, nhanh chóng và tiện lợi", date: "24.05.2026", time: "8:25", read: "4 phút", excerpt: "Bôn Lê mở rộng dịch vụ gửi hàng kèm chuyến — bảng giá theo kích thước, cam kết giao đúng giờ." }, ]; /* ── Section heading reused ───────────────────────────────────── */ function SectionHead({ eyebrow, title, sub, light }) { const m = useIsMobile(); return (
{eyebrow}

{title}

{sub &&

{sub}

}
); } /* ── 5. Services — filterable ─────────────────────────────────── */ function Services({ onBook }) { const [filter, setFilter] = React.useState("all"); const m = useIsMobile(); const visible = SERVICES .map((s, origIdx) => ({ ...s, origIdx })) .filter(s => filter === "all" || s.tag === filter); return (
{/* Filter tabs */}
{FILTERS.map(f => { const on = filter === f.key; const count = f.key === "all" ? SERVICES.length : SERVICES.filter(s => s.tag === f.key).length; return ( ); })}
{/* Grid */}
{visible.map((s, i) => (
{ window.location.href = "tel:+84886075075"; }} style={{ background: "var(--c-paper)", borderRadius: 18, overflow: "hidden", border: "1px solid var(--c-line)", cursor: "pointer", transition: "transform .2s, box-shadow .2s", }} onMouseEnter={(e) => { e.currentTarget.style.transform = "translateY(-4px)"; e.currentTarget.style.boxShadow = "0 24px 50px rgba(11,37,69,0.12)"; }} onMouseLeave={(e) => { e.currentTarget.style.transform = ""; e.currentTarget.style.boxShadow = ""; }}>
{s.type.toUpperCase()} {s.hot && ★ NỔI BẬT}
))}
{visible.length === 0 && (
Không có dịch vụ phù hợp với bộ lọc này.
)}
); } /* ── 6. Price table — searchable ──────────────────────────────── */ function PriceTable({ onBook }) { const [q, setQ] = React.useState(""); const m = useIsMobile(); const rows = SERVICES.filter(s => { const blob = `${s.route} ${s.type} ${s.desc}`.toLowerCase(); return blob.includes(q.toLowerCase()); }); return (
{/* Search */}
setQ(e.target.value)} style={{ width: "100%", padding: "14px 16px 14px 44px", border: "1px solid var(--c-line-strong)", borderRadius: 12, fontSize: 14, background: "var(--c-paper)", outline: "none", fontFamily: "inherit" }} />
{rows.length} / {SERVICES.length} dịch vụ
{/* Mobile: cards. Desktop: table. */} {m ? (
{rows.length === 0 && (
Không tìm thấy dịch vụ khớp với "{q}".
)} {rows.map((r, i) => (
{r.route}
{r.type} · {r.desc}
{r.price}
Đặt
))}
) : (
{["Hành trình", "Loại dịch vụ", "Giá / VND", ""].map((h, i) => (
0 && i < 3 ? "1px solid rgba(255,255,255,0.1)" : "none" }}>{h}
))}
{rows.length === 0 && (
Không tìm thấy dịch vụ khớp với "{q}".
)} {rows.map((r, i) => (
{r.route}
{r.type} · {r.desc}
{r.price}
))}
)}
); } /* ── 7. Why us ───────────────────────────────────────────────── */ function WhyUs() { const m = useIsMobile(); const items = [ { icon: "shield", t: "Uy Tín Và Đúng Giờ", d: "Cam kết mang đến quý khách trải nghiệm an toàn và luôn đúng lịch trình." }, { icon: "check", t: "Giá Cả Cạnh Tranh", d: "Mức giá tối ưu nhất, phù hợp với mọi nhu cầu di chuyển của bạn." }, { icon: "car", t: "Xe Mới, Sạch Sẽ, Êm Ái", d: "Xe đời mới, nội thất sạch sẽ, chạy êm như ru — chỉ cần ngồi và tận hưởng." }, { icon: "user", t: "Đội Ngũ Tài Xế", d: "Đội ngũ tài xế thân thiện, sẵn sàng hỗ trợ khách hàng tận tâm và chu đáo." }, ]; return (
{items.map((it, i) => { const I = Ico[it.icon]; return (

{it.t}

{it.d}

 ); })}
); } /* ── 8. Process ─────────────────────────────────────────────── */ function Process() { const m = useIsMobile(); const steps = [ { icon: "car", t: "Liên hệ: Gọi/Zalo", d: "Đặt xe dễ dàng qua hotline hoặc Zalo. Tổng đài xác nhận ngày giờ đón." }, { icon: "check", t: "Xác nhận", d: "Tài xế Bôn Lê gọi xác nhận trước giờ đón 15–30 phút." }, { icon: "shield",t: "Thanh toán", d: "Thanh toán khi xuống xe bằng tiền mặt, QR hoặc chuyển khoản." }, ]; return (
{steps.map((s, i) => { const I = Ico[s.icon]; return (
BƯỚC {i+1}

{s.t}

{s.d}

 {i < steps.length - 1 && !m && (
)} ); })}
); } /* ── 9. Gallery — click to lightbox ──────────────────────────── */ function Gallery({ onOpen }) { const m = useIsMobile(); return (
{GALLERY.map((t, i) => ( onOpen(i)} style={{ height: m ? 140 : 240, borderRadius: m ? 12 : 16, fontSize: 11, cursor: "pointer", transition: "transform .25s" }} onMouseEnter={(e) => { e.currentTarget.style.transform = "scale(1.02)"; }} onMouseLeave={(e) => { e.currentTarget.style.transform = ""; }}/> ))}
); } /* ── 10. Reviews — carousel with autoplay ────────────────────── */ function Reviews() { const [idx, setIdx] = React.useState(0); const [paused, setPaused] = React.useState(false); const m = useIsMobile(); const visible = m ? 1 : 3; const max = REVIEWS.length; React.useEffect(() => { if (paused) return; const id = setInterval(() => setIdx(i => (i + 1) % max), 5000); return () => clearInterval(id); }, [paused, max]); const shown = Array.from({ length: visible }, (_, off) => REVIEWS[(idx + off) % max]); return (
setPaused(true)} onMouseLeave={() => setPaused(false)}>
{shown.map((r, i) => (

{r.text}

{[...Array(r.stars)].map((_, i2) => )}
{r.name}
{r.role}
))}
{/* Dots */}
{REVIEWS.map((_, i) => (
); } function carouselBtn() { return { width: 44, height: 44, borderRadius: "50%", background: "var(--c-paper)", border: "1px solid var(--c-line-strong)", color: "var(--c-navy)", fontSize: 20, cursor: "pointer", fontWeight: 700 }; } /* ── FAQ accordion ──────────────────────────────────────────── */ function FAQ() { const [open, setOpen] = React.useState(0); const m = useIsMobile(); return (
FAQ

Câu hỏi thường gặp.

Không thấy câu trả lời? Gọi tổng đài 0886.075.075 hoặc nhắn Zalo — phản hồi trong 5 phút.

Gọi ngay
{FAQ_DATA.map((f, i) => { const on = open === i; return (
{on &&

{f.a}

}
); })}
); } /* ── 12. News ───────────────────────────────────────────────── */ function News() { const m = useIsMobile(); return (
{NEWS.map((p, i) => (
{ e.currentTarget.style.transform = "translateY(-4px)"; e.currentTarget.style.boxShadow = "0 24px 50px rgba(11,37,69,0.12)"; }} onMouseLeave={(e) => { e.currentTarget.style.transform = ""; e.currentTarget.style.boxShadow = ""; }}> {p.tag.toUpperCase()}
{p.date} {p.read}

{p.title}

{p.excerpt}

Đọc tiếp
))}
); } Object.assign(window, { Services, PriceTable, WhyUs, Process, Gallery, Reviews, FAQ, News, SectionHead, GALLERY, SERVICES });