// live-app.jsx — top-level live site: nav, hero, brand, CTA, footer, state mgmt

function LiveApp() {
  const [bookingOpen, setBookingOpen] = React.useState(false);
  const [bookingPreset, setBookingPreset] = React.useState(null);
  const [lightboxIdx, setLightboxIdx] = React.useState(null);
  const [pushToast, toastNode] = useToasts();

  const openBooking = (preset = null) => {
    setBookingPreset(preset);
    setBookingOpen(true);
    if (preset) pushToast(`Đã chọn: ${preset.route} — ${preset.type}`);
  };
  const closeBooking = () => setBookingOpen(false);
  const onBooked = (data) => {
    pushToast("Đặt xe thành công! Tổng đài sẽ gọi xác nhận trong 5 phút.", "ok");
  };

  const openLightbox = (i) => setLightboxIdx(i);
  const closeLightbox = () => setLightboxIdx(null);
  const lbPrev = () => setLightboxIdx(i => (i - 1 + GALLERY.length) % GALLERY.length);
  const lbNext = () => setLightboxIdx(i => (i + 1) % GALLERY.length);

  return (
    <>
      <Nav onBook={() => openBooking()}/>
      <Hero onBook={() => openBooking()}/>
      <Brand onBook={() => openBooking()}/>
      <Services onBook={openBooking}/>
      <PriceTable onBook={openBooking}/>
      <WhyUs/>
      <Process/>
      <Gallery onOpen={openLightbox}/>
      <Reviews/>
      <FAQ/>
      <CTABanner onBook={() => openBooking()}/>
      <News/>
      <Footer/>

      <FloatingActions onBook={() => openBooking()}/>

      <BookingModal
        open={bookingOpen} preset={bookingPreset}
        onClose={closeBooking} onSubmit={onBooked}
      />
      <Lightbox items={GALLERY} index={lightboxIdx} onClose={closeLightbox} onPrev={lbPrev} onNext={lbNext}/>
      {toastNode}
    </>
  );
}

/* ── Smooth-scroll helper ─────────────────────────────────── */
function scrollToId(id) {
  const el = document.getElementById(id);
  if (!el) return;
  const top = el.getBoundingClientRect().top + window.scrollY - 80; // offset for sticky nav
  const html = document.documentElement;
  const prevBehavior = html.style.scrollBehavior;
  html.style.scrollBehavior = "auto";
  window.scrollTo({ top, behavior: "auto" });
  html.style.scrollBehavior = prevBehavior;
}

/* ── Sticky nav with scroll-shrink & section highlight ───────── */
function Nav({ onBook }) {
  const [scrolled, setScrolled] = React.useState(false);
  const [active, setActive] = React.useState("trang-chu");
  const [menuOpen, setMenuOpen] = React.useState(false);
  const linkRefs = React.useRef({});
  const lockedActiveRef = React.useRef(null);
  const [activePill, setActivePill] = React.useState(null);
  const m = useIsMobile();

  React.useEffect(() => {
    const onScroll = () => {
      setScrolled(prev => {
        if (!prev && window.scrollY > 80) return true;
        if (prev && window.scrollY < 16) return false;
        return prev;
      });
      if (lockedActiveRef.current) {
        setActive(lockedActiveRef.current);
        return;
      }

      // Determine active section
      const sections = ["trang-chu", "dich-vu", "bang-gia", "faq", "tin-tuc"];
      const y = window.scrollY + 120;
      let cur = sections[0];
      for (const s of sections) {
        const el = document.getElementById(s);
        if (el && el.offsetTop <= y) cur = s;
      }
      setActive(cur);
    };
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  const links = [
    { id: "trang-chu", label: "Trang chủ" },
    { id: "dich-vu", label: "Dịch vụ" },
    { id: "bang-gia", label: "Bảng giá" },
    { id: "faq", label: "Liên hệ" },
    { id: "tin-tuc", label: "Tin tức" },
  ];

  const handleNavClick = (id) => {
    lockedActiveRef.current = id;
    setActive(id);
    scrollToId(id);
    window.setTimeout(() => {
      lockedActiveRef.current = null;
      setActive(id);
    }, 120);
  };

  React.useLayoutEffect(() => {
    const updatePill = () => {
      const el = linkRefs.current[active];
      if (!el) return;
      setActivePill({
        x: el.offsetLeft,
        y: el.offsetTop,
        w: el.offsetWidth,
        h: el.offsetHeight,
      });
    };

    updatePill();
    window.addEventListener("resize", updatePill);
    return () => window.removeEventListener("resize", updatePill);
  }, [active, scrolled]);

  return (
    <>
      {/* Utility bar — hides on scroll, also hides on mobile to save space */}
      {!m && (
        <div style={{
          background: "var(--c-navy-deep)", color: "rgba(255,255,255,0.85)",
          padding: scrolled ? "0 56px" : "10px 56px",
          height: scrolled ? 0 : 38,
          overflow: "hidden",
          display: "flex", alignItems: "center", justifyContent: "space-between", fontSize: 13,
        }}>
          <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
            <span style={{ width: 6, height: 6, borderRadius: "50%", background: "var(--c-accent)" }}/>
            <span style={{ fontWeight: 500, letterSpacing: "0.02em" }}>Dịch vụ chuyên nghiệp <span style={{ opacity: 0.5, margin: "0 8px" }}>—</span> Giá cả cạnh tranh</span>
          </div>
          <div style={{ display: "flex", alignItems: "center", gap: 28 }}>
            <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
              <Ico.pin className="ico" style={{ width: 14, height: 14, color: "var(--c-accent)" }}/>
              <span>9/560 Nguyễn Tất Thành, Thành phố Huế</span>
            </div>
            <a href="tel:+84886075075" style={{ display: "flex", alignItems: "center", gap: 8, fontWeight: 600, color: "inherit", textDecoration: "none" }}>
              <Ico.phone className="ico" style={{ width: 14, height: 14, color: "var(--c-accent)" }}/>
              <span>0886.075.075</span>
            </a>
          </div>
        </div>
      )}

      {/* Main nav */}
      <header style={{
        position: "sticky", top: 0, zIndex: 50,
        background: scrolled ? "rgba(255,255,255,0.96)" : "var(--c-paper)",
        backdropFilter: scrolled ? "blur(10px)" : "none",
        borderBottom: "1px solid var(--c-line)",
        padding: m ? "12px 16px" : (scrolled ? "12px 56px" : "20px 56px"),
        display: "flex", alignItems: "center", justifyContent: "space-between",
        transition: "background .18s ease, box-shadow .18s ease",
        boxShadow: scrolled ? "0 8px 22px rgba(11,37,69,0.06)" : "none",
      }}>
        {/* Logo */}
        <a href="#trang-chu" onClick={(e) => { e.preventDefault(); handleNavClick("trang-chu"); setMenuOpen(false); }} style={{ display: "flex", alignItems: "center", gap: 10, textDecoration: "none" }}>
          <Logo size={m ? 36 : (scrolled ? 36 : 44)} color="var(--c-navy)"/>
          <div>
            <div style={{ fontSize: m ? 15 : (scrolled ? 17 : 19), fontWeight: 800, letterSpacing: "-0.02em", color: "var(--c-navy)", lineHeight: 1, transition: "font-size .25s" }}>NHÀ XE BÔN LÊ</div>
            <div style={{ fontSize: m ? 9 : 10, fontWeight: 700, letterSpacing: "0.18em", color: "var(--c-accent-deep)", marginTop: 4 }}>XE GHÉP MIỀN TRUNG</div>
          </div>
        </a>

        {/* Desktop: Nav pill */}
        {!m && (
          <nav style={{ position: "relative", display: "flex", alignItems: "center", gap: 4, padding: 6, background: "var(--c-cream)", borderRadius: 999, border: "1px solid var(--c-line)", overflow: "hidden" }}>
            {activePill && (
              <span aria-hidden="true" style={{
                position: "absolute",
                left: 0,
                top: 0,
                width: activePill.w,
                height: activePill.h,
                borderRadius: 999,
                background: "var(--c-navy)",
                transform: `translate(${activePill.x}px, ${activePill.y}px)`,
                transition: "transform .34s cubic-bezier(.22,1,.36,1) .1s, width .34s cubic-bezier(.22,1,.36,1) .1s",
                zIndex: 0,
              }}/>
            )}
            {links.map(l => {
              const on = active === l.id;
              return (
                <a key={l.id} ref={(node) => { if (node) linkRefs.current[l.id] = node; }} href={`#${l.id}`} onClick={(e) => { e.preventDefault(); handleNavClick(l.id); }} style={{
                  position: "relative", zIndex: 1,
                  padding: "10px 20px", borderRadius: 999, fontSize: 14, fontWeight: 600, cursor: "pointer", textDecoration: "none",
                  color: on ? "#fff" : "var(--c-ink)",
                  background: "transparent",
                  transition: "color .18s ease .1s",
                }}>{l.label}</a>
              );
            })}
            <button onClick={onBook} style={{ position: "relative", zIndex: 1, marginLeft: 8, background: "var(--c-accent)", color: "var(--c-navy-deep)", border: 0, padding: "10px 18px", borderRadius: 999, fontSize: 13, fontWeight: 800, cursor: "pointer", display: "flex", alignItems: "center", gap: 8 }}>
              <Ico.arrowR className="ico" style={{ width: 14, height: 14 }}/> Đặt Xe
            </button>
          </nav>
        )}

        {/* Desktop: Phone block */}
        {!m && (
          <a href="tel:+84886075075" style={{ display: "flex", alignItems: "center", gap: 12, textDecoration: "none" }}>
            <div style={{ width: 44, height: 44, borderRadius: "50%", background: "var(--c-accent)", color: "var(--c-navy-deep)", display: "flex", alignItems: "center", justifyContent: "center", boxShadow: "0 6px 18px rgba(232,155,74,0.4)" }}>
              <Ico.phone className="ico" style={{ width: 20, height: 20 }}/>
            </div>
            <div>
              <div style={{ fontSize: 18, fontWeight: 800, color: "var(--c-navy)", letterSpacing: "-0.01em", lineHeight: 1 }}>0886.075.075</div>
              <div style={{ fontSize: 11, color: "var(--c-mute)", marginTop: 4, fontWeight: 500 }}>Liên hệ chúng tôi</div>
            </div>
          </a>
        )}

        {/* Mobile: Phone icon + Hamburger */}
        {m && (
          <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
            <a href="tel:+84886075075" aria-label="Gọi" style={{ width: 40, height: 40, borderRadius: "50%", background: "var(--c-accent)", color: "var(--c-navy-deep)", display: "flex", alignItems: "center", justifyContent: "center", textDecoration: "none" }}>
              <Ico.phone className="ico" style={{ width: 18, height: 18 }}/>
            </a>
            <button onClick={() => setMenuOpen(o => !o)} aria-label="Menu" style={{ width: 40, height: 40, borderRadius: 10, background: "transparent", border: "1px solid var(--c-line-strong)", display: "flex", alignItems: "center", justifyContent: "center", cursor: "pointer", color: "var(--c-navy)" }}>
              <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
                {menuOpen ? <path d="M6 6l12 12M18 6 6 18"/> : <path d="M4 7h16M4 12h16M4 17h16"/>}
              </svg>
            </button>
          </div>
        )}
      </header>

      {/* Mobile slide-down menu */}
      {m && menuOpen && (
        <div style={{ position: "sticky", top: 60, zIndex: 49, background: "var(--c-paper)", borderBottom: "1px solid var(--c-line)", boxShadow: "0 10px 24px rgba(11,37,69,0.08)" }}>
          <div style={{ padding: "12px 16px 16px", display: "grid", gap: 4 }}>
            {links.map(l => {
              const on = active === l.id;
              return (
                <a key={l.id} href={`#${l.id}`} onClick={(e) => { e.preventDefault(); handleNavClick(l.id); setMenuOpen(false); }}
                  style={{ display: "block", padding: "12px 14px", borderRadius: 10, fontSize: 15, fontWeight: 600, textDecoration: "none",
                    color: on ? "#fff" : "var(--c-ink)", background: on ? "var(--c-navy)" : "transparent" }}>
                  {l.label}
                </a>
              );
            })}
            <button onClick={() => { setMenuOpen(false); onBook(); }} style={{ marginTop: 6, background: "var(--c-accent)", color: "var(--c-navy-deep)", border: 0, padding: "13px 18px", borderRadius: 10, fontSize: 14, fontWeight: 800, cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center", gap: 8 }}>
              <Ico.arrowR className="ico" style={{ width: 16, height: 16 }}/> Đặt Xe Ngay
            </button>
          </div>
        </div>
      )}
    </>
  );
}

/* ── Hero ──────────────────────────────────────────────────── */
function Hero({ onBook }) {
  const m = useIsMobile();
  return (
    <section id="trang-chu" style={{ position: "relative", height: m ? 560 : 640, overflow: "hidden", background: "var(--c-navy)" }}>
      <div style={{ position: "absolute", inset: 0 }}>
        <ImageSlot src={SITE_IMAGES.hero} alt="Dàn xe limousine Nhà Xe Bôn Lê" fallbackLabel="ẢNH HERO — DÀN XE LIMOUSINE TRƯỚC VĂN PHÒNG" dark style={{ width: "100%", height: "100%", borderRadius: 0, fontSize: 11 }}/>
        <div style={{ position: "absolute", inset: 0, background: m
          ? "linear-gradient(180deg, rgba(6,26,53,0.5) 0%, rgba(6,26,53,0.85) 100%)"
          : "linear-gradient(90deg, rgba(6,26,53,0.85) 0%, rgba(6,26,53,0.5) 45%, transparent 70%)" }}/>
      </div>

      <div style={{ position: "relative", height: "100%", padding: m ? "32px 18px" : "60px 56px", display: "flex", flexDirection: "column", justifyContent: "center", color: "#fff", maxWidth: 820 }}>
        <div style={{ display: "inline-flex", alignItems: "center", gap: 10, padding: "8px 16px", borderRadius: 999, background: "rgba(255,255,255,0.1)", backdropFilter: "blur(8px)", border: "1px solid rgba(255,255,255,0.15)", fontSize: m ? 10 : 12, fontWeight: 700, letterSpacing: "0.1em", width: "fit-content", textTransform: "uppercase" }}>
          <span style={{ width: 6, height: 6, borderRadius: "50%", background: "var(--c-accent)", animation: "pulse 2s infinite" }}/>
          {m ? "Xe ghép · Limousine" : "Xe ghép · Đưa đón sân bay · Limousine"}
        </div>
        <h1 style={{ fontSize: m ? 48 : 88, fontWeight: 800, letterSpacing: "-0.035em", lineHeight: 1.0, marginTop: m ? 18 : 24 }}>XE GHÉP</h1>
        <div style={{ display: "flex", alignItems: "center", gap: m ? 10 : 18, marginTop: 14, flexWrap: "wrap" }}>
          {["HUẾ", "ĐÀ NẴNG", "HỘI AN"].map((c, i) => (
            <React.Fragment key={c}>
              <span style={{ fontSize: m ? 22 : 44, fontWeight: 800, color: "var(--c-accent)", letterSpacing: "-0.02em" }}>{c}</span>
              {i < 2 && <Ico.arrowLR className="ico" style={{ width: m ? 20 : 36, height: m ? 20 : 36, color: "#fff" }}/>}
            </React.Fragment>
          ))}
        </div>

        <div style={{ marginTop: m ? 24 : 36, display: "flex", alignItems: "stretch", gap: 0, background: "rgba(255,255,255,0.06)", backdropFilter: "blur(10px)", border: "1px solid rgba(255,255,255,0.15)", borderRadius: 14, padding: 6, width: "fit-content", maxWidth: "100%" }}>
          <div style={{ padding: m ? "10px 14px" : "14px 22px" }}>
            <div style={{ fontSize: m ? 9 : 11, color: "rgba(255,255,255,0.7)", fontWeight: 600, letterSpacing: "0.1em", textTransform: "uppercase" }}>Liên hệ đặt xe</div>
            <div style={{ fontSize: m ? 20 : 28, fontWeight: 800, color: "#fff", letterSpacing: "-0.02em", marginTop: 4 }}>0886.075.075</div>
          </div>
          <a href="tel:+84886075075" style={{ background: "var(--c-accent)", color: "var(--c-navy-deep)", border: 0, padding: m ? "0 18px" : "0 28px", borderRadius: 10, fontSize: m ? 13 : 15, fontWeight: 800, display: "flex", alignItems: "center", gap: 8, textDecoration: "none" }}>
            <Ico.phone className="ico" style={{ width: 18, height: 18 }}/> {m ? "Gọi" : "Gọi ngay"}
          </a>
        </div>

        <div style={{ display: "flex", gap: m ? 10 : 14, marginTop: m ? 22 : 28, flexWrap: "wrap" }}>
          <button onClick={onBook} style={{ background: "var(--c-paper)", color: "var(--c-navy)", border: 0, padding: m ? "12px 18px" : "14px 24px", borderRadius: 999, fontSize: m ? 13 : 14, fontWeight: 800, cursor: "pointer", display: "inline-flex", alignItems: "center", gap: 8 }}>
            <Ico.arrowR className="ico" style={{ width: 16, height: 16 }}/> Đặt xe online
          </button>
          <button onClick={() => scrollToId("bang-gia")} style={{ background: "transparent", color: "#fff", border: "1px solid rgba(255,255,255,0.3)", padding: m ? "12px 18px" : "14px 24px", borderRadius: 999, fontSize: m ? 13 : 14, fontWeight: 700, cursor: "pointer", display: "inline-flex", alignItems: "center", gap: 8 }}>
            Xem bảng giá
          </button>
        </div>
      </div>
    </section>
  );
}

/* ── Brand intro ───────────────────────────────────────────── */
function Brand({ onBook }) {
  const m = useIsMobile();
  return (
    <section style={{ padding: m ? "56px 18px" : "80px 56px", textAlign: "center", background: "var(--c-cream)" }}>
      <div style={{ display: "inline-flex", alignItems: "center", gap: 12, marginBottom: 16, color: "var(--c-accent-deep)" }}>
        <div style={{ width: 40, height: 1, background: "var(--c-accent-deep)" }}/>
        <span style={{ fontSize: 12, fontWeight: 700, letterSpacing: "0.18em", textTransform: "uppercase" }}>Giới thiệu</span>
        <div style={{ width: 40, height: 1, background: "var(--c-accent-deep)" }}/>
      </div>
      <h2 style={{ fontSize: m ? 32 : 56, fontWeight: 800, color: "var(--c-navy)", letterSpacing: "-0.03em", lineHeight: 1.05 }}>Nhà Xe Bôn Lê</h2>
      <p style={{ fontSize: m ? 15 : 18, color: "var(--c-ink-soft)", fontStyle: "italic", marginTop: 12 }}>— Dịch vụ chuyên nghiệp — Giá cả cạnh tranh —</p>
      <p style={{ fontSize: m ? 14 : 16, color: "var(--c-ink-soft)", marginTop: 16, maxWidth: 720, margin: "16px auto 0", lineHeight: 1.7 }}>
        Nhà Xe Bôn Lê — Đơn vị xe ghép hàng đầu tuyến Huế · Đà Nẵng · Hội An. Hơn 8 năm đồng hành cùng hàng nghìn gia đình Việt và du khách quốc tế.
      </p>
      <div style={{ display: "flex", gap: 12, justifyContent: "center", marginTop: 28, flexWrap: "wrap" }}>
        <a href="tel:+84886075075" style={{ background: "var(--c-navy)", color: "#fff", border: 0, padding: m ? "12px 18px" : "14px 26px", borderRadius: 999, fontSize: m ? 13 : 14, fontWeight: 700, display: "flex", alignItems: "center", gap: 8, textDecoration: "none" }}>
          <Ico.phone className="ico" style={{ width: 16, height: 16, color: "var(--c-accent)" }}/> {m ? "0886.075.075" : "Gọi: 0886.075.075"}
        </a>
        <button onClick={onBook} style={{ background: "var(--c-accent)", color: "var(--c-navy-deep)", border: 0, padding: m ? "12px 18px" : "14px 26px", borderRadius: 999, fontSize: m ? 13 : 14, fontWeight: 800, cursor: "pointer", display: "flex", alignItems: "center", gap: 8 }}>
          <Ico.arrowR className="ico" style={{ width: 16, height: 16 }}/> Đặt xe ngay
        </button>
      </div>
    </section>
  );
}

/* ── CTA Banner ───────────────────────────────────────────── */
function CTABanner({ onBook }) {
  const m = useIsMobile();
  return (
    <section style={{ position: "relative", height: m ? 280 : 320, overflow: "hidden", background: "var(--c-navy-deep)" }}>
      <ImageSlot src={SITE_IMAGES.cta} alt="Xe limousine trên đèo Hải Vân" fallbackLabel="ẢNH NỀN — XE LIMOUSINE TRÊN ĐÈO HẢI VÂN" dark style={{ position: "absolute", inset: 0, borderRadius: 0, fontSize: 11 }}/>
      <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, rgba(6,26,53,0.6) 0%, rgba(6,26,53,0.85) 100%)" }}/>
      <div style={{ position: "relative", height: "100%", display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", textAlign: "center", color: "#fff", padding: m ? "0 18px" : "0 56px" }}>
        <div style={{ fontSize: m ? 10 : 12, fontWeight: 700, color: "var(--c-accent)", letterSpacing: "0.2em", textTransform: "uppercase" }}>Sẵn sàng cho chuyến đi của bạn?</div>
        <h2 style={{ fontSize: m ? 28 : 56, fontWeight: 800, letterSpacing: "-0.03em", marginTop: 10, lineHeight: 1.15 }}>Một cuộc gọi — và đi.</h2>
        <div style={{ display: "flex", gap: 12, marginTop: m ? 20 : 28, flexWrap: "wrap", justifyContent: "center" }}>
          <button onClick={onBook} style={{ background: "var(--c-accent)", color: "var(--c-navy-deep)", border: 0, padding: m ? "13px 22px" : "16px 36px", borderRadius: 999, fontSize: m ? 14 : 16, fontWeight: 800, cursor: "pointer", display: "flex", alignItems: "center", gap: 8, boxShadow: "0 10px 28px rgba(232,155,74,0.5)" }}>
            <Ico.arrowR className="ico" style={{ width: 18, height: 18 }}/> ĐẶT XE NGAY
          </button>
          <a href="tel:+84886075075" style={{ background: "transparent", color: "#fff", border: "1px solid rgba(255,255,255,0.3)", padding: m ? "13px 20px" : "16px 28px", borderRadius: 999, fontSize: m ? 14 : 16, fontWeight: 700, display: "flex", alignItems: "center", gap: 8, textDecoration: "none" }}>
            <Ico.phone className="ico" style={{ width: 18, height: 18, color: "var(--c-accent)" }}/> 0886.075.075
          </a>
        </div>
      </div>
    </section>
  );
}

/* ── Footer ──────────────────────────────────────────────── */
function Footer() {
  const m = useIsMobile();
  return (
    <footer style={{ background: "var(--c-navy-deep)", color: "rgba(255,255,255,0.65)", padding: m ? "48px 18px 24px" : "80px 56px 30px" }}>
      <div style={{ display: "grid", gridTemplateColumns: m ? "1fr" : "1.4fr 1fr 1.2fr", gap: m ? 36 : 60, paddingBottom: m ? 32 : 48, borderBottom: "1px solid rgba(255,255,255,0.08)" }}>
        <div>
          <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
            <Logo size={48} color="#fff"/>
            <div>
              <div style={{ fontSize: 22, fontWeight: 800, color: "#fff", letterSpacing: "-0.02em" }}>NHÀ XE BÔN LÊ</div>
              <div style={{ fontSize: 10, fontWeight: 700, letterSpacing: "0.2em", color: "var(--c-accent)", marginTop: 4 }}>XE GHÉP MIỀN TRUNG</div>
            </div>
          </div>
          <p style={{ fontSize: 14, lineHeight: 1.7, marginTop: 22, maxWidth: 380 }}>
            Nhà Xe Bôn Lê chuyên cung cấp dịch vụ xe đi ghép, xe ké cao cấp từ Đà Nẵng đi Huế và ngược lại. Đáp ứng mọi tiêu chí mà quý khách mong muốn.
          </p>
        </div>
        <div>
          <div style={{ fontSize: 13, fontWeight: 800, color: "#fff", letterSpacing: "0.12em", textTransform: "uppercase" }}>Danh mục</div>
          <div style={{ width: 36, height: 2, background: "var(--c-accent)", marginTop: 12 }}/>
          <div style={{ marginTop: 22, display: "grid", gap: 12 }}>
            {[
              ["Xe ghép 4 chỗ", "dich-vu"], ["Xe ghép 7 chỗ", "dich-vu"], ["Xe ghép Limousine", "dich-vu"],
              ["Bảng giá", "bang-gia"], ["Tin tức", "tin-tuc"], ["Câu hỏi thường gặp", "faq"]
            ].map(([t, id]) => (
              <a key={t} href={`#${id}`} onClick={(e) => { e.preventDefault(); scrollToId(id); }} style={{ fontSize: 14, color: "rgba(255,255,255,0.7)", textDecoration: "none", cursor: "pointer" }}>{t}</a>
            ))}
          </div>
        </div>
        <div>
          <div style={{ fontSize: 13, fontWeight: 800, color: "#fff", letterSpacing: "0.12em", textTransform: "uppercase" }}>Liên hệ</div>
          <div style={{ width: 36, height: 2, background: "var(--c-accent)", marginTop: 12 }}/>
          <div style={{ marginTop: 22, display: "grid", gap: 14 }}>
            <div style={{ display: "flex", gap: 12 }}>
              <Ico.pin className="ico" style={{ width: 18, height: 18, color: "var(--c-accent)", flex: "0 0 auto", marginTop: 2 }}/>
              <div>
                <div style={{ fontSize: 11, fontWeight: 700, color: "rgba(255,255,255,0.5)", letterSpacing: "0.04em", textTransform: "uppercase" }}>Địa chỉ</div>
                <div style={{ fontSize: 14, color: "#fff", marginTop: 2 }}>9/560 Nguyễn Tất Thành, Thành phố Huế</div>
              </div>
            </div>
            <a href="tel:+84886075075" style={{ display: "flex", gap: 12, textDecoration: "none", color: "inherit" }}>
              <Ico.phone className="ico" style={{ width: 18, height: 18, color: "var(--c-accent)", flex: "0 0 auto", marginTop: 2 }}/>
              <div>
                <div style={{ fontSize: 11, fontWeight: 700, color: "rgba(255,255,255,0.5)", letterSpacing: "0.04em", textTransform: "uppercase" }}>Hotline</div>
                <div style={{ fontSize: 18, fontWeight: 800, color: "#fff", marginTop: 2, letterSpacing: "-0.01em" }}>0886.075.075</div>
              </div>
            </a>
            <a href="mailto:xeghepbonle@gmail.com" style={{ display: "flex", gap: 12, textDecoration: "none", color: "inherit" }}>
              <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="var(--c-accent)" strokeWidth="1.6" style={{ flex: "0 0 auto", marginTop: 2 }}><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/></svg>
              <div>
                <div style={{ fontSize: 11, fontWeight: 700, color: "rgba(255,255,255,0.5)", letterSpacing: "0.04em", textTransform: "uppercase" }}>Email</div>
                <div style={{ fontSize: 14, color: "#fff", marginTop: 2 }}>xeghepbonle@gmail.com</div>
              </div>
            </a>
          </div>
          <div style={{ marginTop: 24 }}>
            <div style={{ fontSize: 11, fontWeight: 700, color: "rgba(255,255,255,0.5)", letterSpacing: "0.04em", textTransform: "uppercase", marginBottom: 10 }}>Theo dõi chúng tôi</div>
            <div style={{ display: "flex", gap: 10 }}>
              {[
                { label: "Facebook", href: "https://www.facebook.com/bon.le.801821", icon: <Ico.facebook style={{ width: 20, height: 20 }}/> },
                { label: "Zalo",     href: "https://zalo.me/0886075075",             icon: <Ico.zalo style={{ width: 22, height: 22 }}/> },
              ].map(s => (
                <a key={s.label} href={s.href} aria-label={s.label} title={s.label} target="_blank" rel="noopener noreferrer"
                  style={{ width: 38, height: 38, borderRadius: 10, background: "rgba(255,255,255,0.08)", border: "1px solid rgba(255,255,255,0.12)", display: "flex", alignItems: "center", justifyContent: "center", color: "#fff", textDecoration: "none" }}>
                  {s.icon}
                </a>
              ))}
            </div>
          </div>
        </div>
      </div>
      <div style={{ display: "flex", flexDirection: m ? "column" : "row", justifyContent: "space-between", alignItems: m ? "flex-start" : "center", gap: m ? 12 : 0, paddingTop: 24, fontSize: 12 }}>
        <div>© 2014 — 2026 Nhà Xe Bôn Lê · Mọi quyền được bảo lưu.</div>
        <div style={{ display: "flex", gap: m ? 16 : 22, flexWrap: "wrap" }}>
          <a href="#" style={{ color: "rgba(255,255,255,0.6)", textDecoration: "none" }}>Điều khoản</a>
          <a href="#" style={{ color: "rgba(255,255,255,0.6)", textDecoration: "none" }}>Bảo mật</a>
          <a href="#" style={{ color: "rgba(255,255,255,0.6)", textDecoration: "none" }}>Hoàn tiền</a>
        </div>
      </div>
    </footer>
  );
}

/* ── Floating action buttons (Zalo, WhatsApp, Call, BackToTop) ── */
function FloatingActions({ onBook }) {
  const [showUp, setShowUp] = React.useState(false);
  const m = useIsMobile();
  React.useEffect(() => {
    const onScroll = () => setShowUp(window.scrollY > 600);
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  const iconSize = m ? 26 : 30;
  const fabs = [
    { label: "Zalo", href: "https://zalo.me/0886075075", bg: "#0068FF", icon: <Ico.zalo style={{ width: iconSize, height: iconSize }}/> },
    { label: "Messenger", href: "https://www.facebook.com/bon.le.801821", bg: "#0084FF", icon: <Ico.messenger style={{ width: iconSize, height: iconSize }}/> },
    { label: "Gọi ngay", href: "tel:+84886075075", bg: "#27AE60", icon: "📞", pulse: true },
  ];
  const fabSize = m ? 46 : 52;
  const upSize = m ? 40 : 48;

  return (
    <div style={{ position: "fixed", right: m ? 14 : 20, bottom: m ? 14 : 20, zIndex: 60, display: "flex", flexDirection: "column", gap: m ? 8 : 10 }}>
      {showUp && (
        <button onClick={() => window.scrollTo({ top: 0, behavior: "smooth" })} aria-label="Lên đầu trang" style={{
          width: upSize, height: upSize, borderRadius: "50%", background: "var(--c-navy)", color: "#fff", border: 0, cursor: "pointer",
          fontSize: 18, fontWeight: 800, boxShadow: "0 8px 20px rgba(11,37,69,0.3)",
        }}>↑</button>
      )}
      {fabs.map((f, i) => (
        <a key={i} href={f.href} aria-label={f.label} title={f.label} style={{
          width: fabSize, height: fabSize, borderRadius: "50%", background: f.bg, color: "#fff",
          display: "flex", alignItems: "center", justifyContent: "center", textDecoration: "none",
          fontSize: m ? 16 : 18, fontWeight: 800, boxShadow: "0 8px 20px rgba(0,0,0,0.25)",
          position: "relative",
        }}>
          {f.icon}
          {f.pulse && <span style={{ position: "absolute", inset: -3, borderRadius: "50%", border: `2px solid ${f.bg}`, animation: "ringPulse 1.8s infinite" }}/>}
        </a>
      ))}
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<LiveApp/>);
