// live-sections.jsx — interactive content sections (data comes from BRAND in shared.jsx) /* ── 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 SERVICES = BRAND.services; const FILTERS = BRAND.serviceFilters; 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 = BRAND.phoneHref; }} 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 SERVICES = BRAND.services; 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 { eyebrow, heading, sub, items } = BRAND.whyUs; return (
{items.map((it, i) => { const I = Ico[it.icon]; return (

{it.t}

{it.d}

 ); })}
); } /* ── 8. Process ─────────────────────────────────────────────── */ function Process() { const m = useIsMobile(); const { eyebrow, heading, sub, steps } = BRAND.process; 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(); const GALLERY = BRAND.gallery; 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 REVIEWS = BRAND.reviews; 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(); const FAQ_DATA = BRAND.faq; return (
FAQ

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

Không thấy câu trả lời? Gọi tổng đài {BRAND.phone} 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(); const NEWS = BRAND.news; 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: BRAND.gallery, SERVICES: BRAND.services });