// Xedap.vn — Trang Collection thương hiệu (brand collection landing).
// Reuses the shared SiteHeader / SiteFooter (DS chrome). This file is the page body only.
const { Button, Badge, PriceTag, Rating, ColorSwatches, IconButton, ProductCard } = window.XedapVnDesignSystem_03b1c0;

/* ---------- Collection tiles ---------- */
function CollectionTiles() {
  const tiles = [
    { eyebrow: "E-BIKE", title: ["XE TRỢ", "LỰC"], seed: "collect-ebike", img: "https://cdn.hstatic.net/files/200001086651/file/xe_tro_luc.png" },
    { eyebrow: "ROAD", title: ["XE ĐƯỜNG", "DÀI"], seed: "collect-road", img: "https://cdn.hstatic.net/files/200001086651/file/xe_duong_dai.png" },
    { eyebrow: "URBAN", title: ["XE ĐÔ", "THỊ"], seed: "collect-city", img: "https://cdn.hstatic.net/files/200001086651/file/xe_do_thi_595b6619ddf543d39fba1f16194c262c.png" },
    { eyebrow: "MOUNTAIN", title: ["XE ĐỊA", "HÌNH"], seed: "collect-mtb", img: "https://cdn.hstatic.net/files/200001086651/file/xe_dia_hinh.png" },
    { eyebrow: "RACING", title: ["XE", "ĐUA"], seed: "collect-race", img: "https://cdn.hstatic.net/files/200001086651/file/xe_dua.png" },
  ];
  return (
    <section style={{ display: "grid", gridTemplateColumns: "repeat(5,1fr)", gap: 0 }}>
      {tiles.map((t, i) => (
        <a key={i} style={{ position: "relative", display: "block", aspectRatio: "1/1", background: "#0b0d12", overflow: "hidden", cursor: "pointer", textDecoration: "none" }}>
          <img src={t.img} alt="" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover" }} />
          <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,.55) 100%)" }} />
          <div style={{ position: "relative", padding: 18 }}>
            <div style={{ fontSize: 10, fontWeight: 600, letterSpacing: ".14em", textTransform: "uppercase", color: "#fff", opacity: 0.75 }}>{t.eyebrow}</div>
            <div style={{ marginTop: 6, fontFamily: "var(--font-heading)", fontWeight: 800, fontSize: 26, lineHeight: 1.02, letterSpacing: "-0.02em", color: "#fff" }}>{t.title.map((l) => <div key={l}>{l}</div>)}</div>
          </div>
          <div style={{ position: "absolute", left: 18, bottom: 16, display: "flex", alignItems: "center", gap: 10 }}>
            <span style={{ width: 26, height: 26, borderRadius: 5, background: "rgba(255,255,255,.16)", display: "flex", alignItems: "center", justifyContent: "center", color: "#fff" }}><i className="ph ph-plus" style={{ fontSize: 13 }} /></span>
            <span style={{ fontSize: 10, fontWeight: 600, letterSpacing: ".1em", textTransform: "uppercase", color: "#fff" }}>Khám phá</span>
          </div>
        </a>
      ))}
    </section>
  );
}

/* ---------- USP row ---------- */
function FourImageDemo() {
  return (
    <section style={{ background: "#fff" }}>
      <div style={{ maxWidth: 1440, margin: "0 auto", padding: "28px 12px", display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 24 }}>
        {[
          { img: "https://cdn.hstatic.net/files/200001188264/file/logo_brand_xedap-21.svg", lines: ["Trả chậm 0%", "trả trước 0đ"] },
          { img: "https://cdn.hstatic.net/files/200001188264/file/logo_brand_xedap-22.svg", lines: ["Miễn phí", "giao hàng"] },
          { img: "https://cdn.hstatic.net/files/200001188264/file/logo_brand_xedap-19.svg", lines: ["Bảo hành", "đến 5 năm"] },
          { img: "https://cdn.hstatic.net/files/200001188264/file/logo_brand_xedap-20.svg", lines: ["Miễn phí", "bảo dưỡng"] },
        ].map((it, i) => (
          <div key={i} style={{ display: "flex", alignItems: "center", justifyContent: "center", gap: 14 }}>
            <span style={{ flexShrink: 0, width: 44, height: 44, display: "grid", placeItems: "center" }}>
              <img src={it.img} alt="" style={{ width: 44, height: 44, objectFit: "contain" }} />
            </span>
            <div style={{ width: 132 }}>
              <p style={{ margin: 0, fontFamily: "var(--font-heading)", fontWeight: 800, fontSize: 15, color: "var(--foreground)" }}>{it.lines[0]}</p>
              <p style={{ margin: 0, fontFamily: "var(--font-heading)", fontWeight: 800, fontSize: 15, color: "var(--foreground)" }}>{it.lines[1]}</p>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

/* ---------- Filter rail ---------- */
function StorePickup() {
  const [mode, setMode] = React.useState("pickup");
  const Opt = ({ id, icon, title, sub, action }) => {
    const on = mode === id;
    return (
      <button onClick={() => setMode(id)} style={{ textAlign: "left", width: "100%", display: "flex", gap: 10, padding: 12, marginBottom: 8, background: on ? "var(--accent)" : "#fff", border: `1px solid ${on ? "var(--primary)" : "var(--border)"}`, borderRadius: "var(--radius-md)", cursor: "pointer" }}>
        <i className={`ph ${on ? "ph-check-circle" : "ph-circle"}`} style={{ fontSize: 18, color: on ? "var(--success)" : "var(--muted-foreground)", marginTop: 1 }} />
        <span style={{ display: "flex", flexDirection: "column", gap: 3 }}>
          <span style={{ fontSize: 13, fontWeight: 600, color: "var(--foreground)" }}>{title}</span>
          {sub && <span style={{ fontSize: 12, lineHeight: 1.4, color: "var(--muted-foreground)" }}>{sub}</span>}
          {action && <span style={{ fontSize: 12, fontWeight: 500, color: "var(--primary)" }}>{action}</span>}
        </span>
      </button>
    );
  };
  return (
    <div style={{ marginBottom: 16 }}>
      <Opt id="pickup" title="Nhận tại showroom (23)" sub="Có sẵn tại Q.5 · sẵn sàng trong 2 giờ" action="Đổi showroom" />
      <Opt id="ship" title="Giao tận nơi (23)" />
    </div>
  );
}

function FilterGroup({ title, options, open }) {
  const [expanded, setExpanded] = React.useState(!!open);
  const [sel, setSel] = React.useState([]);
  const toggle = (o) => setSel((s) => s.includes(o) ? s.filter((x) => x !== o) : [...s, o]);
  return (
    <div style={{ borderBottom: "1px solid var(--border)" }}>
      <button onClick={() => setExpanded((e) => !e)} style={{ width: "100%", display: "flex", justifyContent: "space-between", alignItems: "center", padding: "14px 0", background: "none", border: "none", cursor: "pointer", fontFamily: "var(--font-sans)", fontSize: 14, fontWeight: 600, color: "var(--foreground)" }}>
        {title}<i className={`ph ${expanded ? "ph-caret-up" : "ph-caret-down"}`} style={{ fontSize: 14, color: "var(--muted-foreground)" }} />
      </button>
      {expanded && options && (
        <div style={{ display: "flex", flexDirection: "column", gap: 10, paddingBottom: 16 }}>
          {options.map((o) => (
            <label key={o} style={{ display: "flex", alignItems: "center", gap: 10, fontSize: 13, color: "rgba(51,51,51,.85)", cursor: "pointer" }}>
              <span style={{ display: "flex", alignItems: "center", justifyContent: "center", width: 18, height: 18, borderRadius: 5, border: `1.5px solid ${sel.includes(o) ? "var(--primary)" : "var(--input)"}`, background: sel.includes(o) ? "var(--primary)" : "#fff" }}>
                {sel.includes(o) && <i className="ph ph-check" style={{ fontSize: 12, color: "#fff" }} />}
              </span>
              <input type="checkbox" checked={sel.includes(o)} onChange={() => toggle(o)} style={{ display: "none" }} />
              {o}
            </label>
          ))}
        </div>
      )}
    </div>
  );
}

function FilterRail() {
  return (
    <aside style={{ position: "sticky", top: 88 }}>
      <h2 style={{ margin: "0 0 14px", fontFamily: "var(--font-heading)", fontWeight: 800, fontSize: 18, letterSpacing: "-0.01em" }}>Bộ lọc</h2>
      <FilterGroup title="Danh mục" options={["Xe địa hình", "Xe đường phố", "Xe gấp", "Xe đua"]} open />
      <FilterGroup title="Thương hiệu" options={["RAPTOR", "JAVA", "GIANT", "TrinX"]} open />
      {["Ưu đãi", "Giới tính", "Kích cỡ", "Cỡ bánh", "Mục đích sử dụng", "Khoảng giá", "Giảm xóc", "Tính năng", "Loại phanh", "Trợ lực điện", "Màu sắc", "Chất liệu khung", "Đánh giá", "Kiểu ghi đông", "Số cấp tốc độ", "Dòng sản phẩm", "Bề rộng lốp", "Trọng lượng", "Hành trình phuộc"].map((t) => (
        <FilterGroup key={t} title={t} />
      ))}
    </aside>
  );
}

/* ---------- Toolbar ---------- */
function Toolbar({ count }) {
  const [chips, setChips] = React.useState(["Xe địa hình", "Nữ"]);
  return (
    <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", gap: 16, flexWrap: "wrap", marginBottom: 24 }}>
      <div style={{ display: "flex", alignItems: "center", gap: 10, flexWrap: "wrap" }}>
        {chips.map((c) => (
          <button key={c} onClick={() => setChips((s) => s.filter((x) => x !== c))} style={{ display: "inline-flex", alignItems: "center", gap: 6, height: 32, padding: "0 12px", borderRadius: 5, border: "1px solid var(--border)", background: "#fff", fontFamily: "var(--font-sans)", fontSize: 13, color: "var(--foreground)", cursor: "pointer" }}>{c}<i className="ph ph-x" style={{ fontSize: 12 }} /></button>
        ))}
        {chips.length > 0 && <button onClick={() => setChips([])} style={{ background: "none", border: "none", fontFamily: "var(--font-sans)", fontSize: 13, color: "var(--primary)", cursor: "pointer" }}>Xóa tất cả</button>}
      </div>
      <div style={{ position: "relative" }}>
        <select style={{ appearance: "none", height: 40, padding: "0 40px 0 16px", border: "1px solid var(--border)", borderRadius: "var(--radius-md)", background: "#fff", fontFamily: "var(--font-sans)", fontSize: 14, color: "var(--foreground)", cursor: "pointer" }}>
          <option>Sắp xếp: Phù hợp nhất</option><option>Giá thấp → cao</option><option>Giá cao → thấp</option><option>Mới nhất</option>
        </select>
        <i className="ph ph-caret-down" style={{ position: "absolute", right: 14, top: 13, fontSize: 14, color: "var(--muted-foreground)", pointerEvents: "none" }} />
      </div>
    </div>
  );
}

/* ---------- Pagination ---------- */
function Pagination() {
  const [page, setPage] = React.useState(1);
  return (
    <div style={{ display: "flex", justifyContent: "center", alignItems: "center", gap: 6, marginTop: 48 }}>
      {[1, 2, 3, 4, 5].map((n) => (
        <button key={n} onClick={() => setPage(n)} style={{ width: 40, height: 40, borderRadius: 5, border: "none", background: n === page ? "var(--foreground)" : "transparent", color: n === page ? "#fff" : "var(--foreground)", fontFamily: "var(--font-sans)", fontSize: 14, fontWeight: 500, cursor: "pointer" }}>{n}</button>
      ))}
      <button onClick={() => setPage((p) => Math.min(5, p + 1))} style={{ width: 40, height: 40, borderRadius: 5, border: "none", background: "transparent", color: "var(--foreground)", cursor: "pointer" }}><i className="ph ph-caret-right" /></button>
    </div>
  );
}

/* ---------- Feature row ---------- */
function FeatureRow() {
  const feats = [
    { id: "feat-fit", title: "Vừa vặn theo bạn", body: "Tùy chỉnh nhanh chóng để có tư thế đạp thoải mái nhất, hoặc chọn khung monocoque siêu nhẹ.", img: "https://cdn.hstatic.net/files/200001086651/file/46.png" },
    { id: "feat-speed", title: "Thiết kế cho tốc độ", body: "Từng bề mặt được tinh chỉnh khí động học, giữ độ cứng vượt trội trên tỉ lệ trọng lượng.", img: "https://cdn.hstatic.net/files/200001086651/file/47.png" },
    { id: "feat-durable", title: "Bền bỉ cho mọi hành trình", body: "Lớp sợi carbon gia cường cùng bạc đạn cao cấp, sẵn sàng cho mọi mùa giải khắc nghiệt.", img: "https://cdn.hstatic.net/files/200001086651/file/48.png" },
  ];
  return (
    <section style={{ background: "#f5f6fb" }}>
      <div style={{ maxWidth: 1440, margin: "0 auto", padding: "64px 24px", display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 5 }}>
        {feats.map((f) => (
          <div key={f.title}>
            <div style={{ aspectRatio: "16/9", overflow: "hidden" }}>
              <image-slot id={f.id} shape="rect" fit="cover" src={f.img} placeholder="Ảnh tính năng (16:9)" style={{ width: "100%", height: "100%" }}></image-slot>
            </div>
            <h3 style={{ margin: "20px 0 8px", fontFamily: "var(--font-heading)", fontWeight: 800, fontSize: 20, letterSpacing: "-0.01em" }}>{f.title}</h3>
            <p style={{ margin: 0, fontSize: 14, lineHeight: 1.6, color: "var(--muted-foreground)" }}>{f.body}</p>
          </div>
        ))}
      </div>
    </section>
  );
}

/* ---------- App banner ---------- */
function AppBanner() {
  return (
    <section style={{ position: "relative", aspectRatio: "2/1", display: "flex", alignItems: "flex-end", overflow: "hidden" }}>
      <img src="https://cdn.hstatic.net/files/200001086651/file/xedap_-_hinh_demo_ui_ux.png" alt="" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover" }} />
      <div style={{ position: "absolute", inset: 0, background: "linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.15) 50%, transparent 100%)" }} />
      <div style={{ position: "relative", maxWidth: 1440, width: "100%", margin: "0 auto", padding: "0 24px 64px", color: "#fff" }}>
        <h2 style={{ margin: 0, fontFamily: "var(--font-heading)", fontWeight: 800, fontSize: 40, letterSpacing: "-0.02em" }}>Đồng hành trong tầm tay</h2>
        <p style={{ margin: "12px 0 24px", maxWidth: 440, fontSize: 15, lineHeight: 1.6, color: "rgba(255,255,255,.85)" }}>Từ đặt hàng, cài đặt đến bảo dưỡng — mọi thông tin bạn cần đều có trong ứng dụng Xedap.vn.</p>
        <Button variant="outline" style={{ background: "transparent", color: "#fff", borderColor: "rgba(255,255,255,.6)" }}>Tìm hiểu thêm</Button>
      </div>
    </section>
  );
}

/* ---------- Promo pair ---------- */
function PromoPair() {
  const cards = [
    { eyebrow: "Dùng thử trước khi mua", title: "Đến trải nghiệm thử", body: "Cách tốt nhất để chọn xe là chạy thử. Ghé showroom Xedap.vn gần bạn để chắc chắn.", cta: "Tìm cửa hàng", img: "https://cdn.hstatic.net/files/200001086651/file/50.png" },
    { eyebrow: "Phụ kiện", title: "Trang bị cho hành trình", body: "Chọn đúng phụ kiện để mỗi chuyến đi thêm vui, thoải mái và an toàn hơn.", cta: "Mua phụ kiện", img: "https://cdn.hstatic.net/files/200001086651/file/51.png" },
  ];
  return (
    <section style={{ padding: "5px 0 0", display: "grid", gridTemplateColumns: "1fr 1fr", gap: 5 }}>
      {cards.map((c) => (
        <div key={c.title} style={{ position: "relative", aspectRatio: "1/1", overflow: "hidden", display: "flex", alignItems: "flex-end" }}>
          <img src={c.img} alt="" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover" }} />
          <div style={{ position: "absolute", inset: 0, background: "linear-gradient(0deg, rgba(0,0,0,.6) 0%, transparent 60%)" }} />
          <div style={{ position: "relative", padding: 28, color: "#fff" }}>
            <div style={{ fontSize: 11, fontWeight: 600, letterSpacing: ".1em", textTransform: "uppercase", opacity: 0.8 }}>{c.eyebrow}</div>
            <h3 style={{ margin: "6px 0 8px", fontFamily: "var(--font-heading)", fontWeight: 800, fontSize: 26, letterSpacing: "-0.01em" }}>{c.title}</h3>
            <p style={{ margin: "0 0 16px", maxWidth: 340, fontSize: 14, lineHeight: 1.5, color: "rgba(255,255,255,.85)" }}>{c.body}</p>
            <Button variant="outline" style={{ background: "transparent", color: "#fff", borderColor: "rgba(255,255,255,.6)" }}>{c.cta}</Button>
          </div>
        </div>
      ))}
    </section>
  );
}

/* ---------- Related stories ---------- */
function RelatedStories() {
  const stories = [
    { date: "07/04/2026", title: "Cách chọn xe đạp đi làm phù hợp: cẩm nang mua sắm", seed: "story-commute", img: "https://cdn.hstatic.net/files/200001086651/file/54.png" },
    { date: "13/09/2025", title: "Nên chọn xe touring hay xe đô thị: hướng dẫn đầy đủ", seed: "story-touring", img: "https://cdn.hstatic.net/files/200001086651/file/58.png" },
    { date: "11/09/2025", title: "Bảo dưỡng xe đạp tại nhà: 8 bước cơ bản", seed: "story-maintain", img: "https://cdn.hstatic.net/files/200001086651/file/57.png" },
    { date: "07/01/2026", title: "Cách chọn xe đạp hybrid phù hợp với bạn", seed: "story-hybrid", img: "https://cdn.hstatic.net/files/200001086651/file/thumb_collection.png" },
    { date: "07/01/2026", title: "Chọn cỡ khung xe đúng chuẩn theo chiều cao", seed: "story-size", img: "https://cdn.hstatic.net/files/200001086651/file/55.png" },
  ];
  return (
    <section style={{ maxWidth: 1440, margin: "0 auto", padding: "15px 24px 80px" }}>
      <h2 style={{ margin: "0 0 28px", fontFamily: "var(--font-heading)", fontWeight: 800, fontSize: 30, letterSpacing: "-0.02em" }}>Bài viết liên quan</h2>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(5,1fr)", gap: 16 }}>
        {stories.map((s) => (
          <a key={s.seed} style={{ position: "relative", aspectRatio: "3/4", overflow: "hidden", borderRadius: "var(--radius-md)", display: "flex", alignItems: "flex-end", cursor: "pointer", textDecoration: "none" }}>
            <img src={s.img} alt="" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover" }} />
            <div style={{ position: "absolute", inset: 0, background: "linear-gradient(0deg, rgba(0,0,0,.7) 0%, transparent 55%)" }} />
            <div style={{ position: "relative", padding: 16, color: "#fff" }}>
              <div style={{ fontSize: 11, opacity: 0.8, marginBottom: 6 }}>Cập nhật {s.date}</div>
              <div style={{ fontSize: 14, fontWeight: 600, lineHeight: 1.35 }}>{s.title}</div>
            </div>
          </a>
        ))}
      </div>
    </section>
  );
}

/* ---------- Page ---------- */
function BrandCollection({ onAdd, onOpen }) {
  const { PRODUCTS } = window.KitData;
  const shown = PRODUCTS.slice(0, 9);
  return (
    <main>
      {/* Hero */}
      <section style={{ position: "relative", height: 380, display: "flex", alignItems: "flex-start", overflow: "hidden" }}>
        <img src="https://cdn.hstatic.net/files/200001086651/file/replace_bicycle_in_background_image_202607171411.jpeg" alt="" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover" }} />
        <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.05) 45%, rgba(0,0,0,.1) 100%)" }} />
        <div style={{ position: "relative", maxWidth: 1440, width: "100%", margin: "0 auto", padding: "88px 24px 0", color: "#fff" }}>
          <p style={{ margin: "0 0 10px", fontSize: 13, color: "rgba(255,255,255,.8)" }}>Xedap.vn · Xe đô thị / Touring</p>
          <h1 style={{ margin: 0, fontFamily: "var(--font-heading)", fontWeight: 800, fontSize: 44, letterSpacing: "-0.02em", maxWidth: 640 }}>Xe đô thị / Touring: Sẵn sàng lên đường</h1>
          <div style={{ marginTop: 20 }}><Button variant="outline" style={{ background: "transparent", color: "#fff", borderColor: "rgba(255,255,255,.7)" }}>Xem tất cả xe</Button></div>
        </div>
      </section>

      <CollectionTiles />
      <FourImageDemo />

      {/* Breadcrumb */}
      <div style={{ borderBottom: "1px solid var(--border)" }}>
        <nav style={{ maxWidth: 1440, margin: "0 auto", padding: "12px 24px", display: "flex", alignItems: "center", gap: 8, fontSize: 13, color: "var(--muted-foreground)" }}>
          <a style={{ color: "var(--muted-foreground)", textDecoration: "none", cursor: "pointer" }}>Trang chủ</a>
          <i className="ph ph-caret-right" style={{ fontSize: 11 }} />
          <a style={{ color: "var(--muted-foreground)", textDecoration: "none", cursor: "pointer" }}>Xe đạp</a>
          <i className="ph ph-caret-right" style={{ fontSize: 11 }} />
          <span style={{ color: "var(--foreground)", fontWeight: 500 }}>Xe đô thị / Touring</span>
        </nav>
      </div>

      {/* Listing */}
      <div style={{ maxWidth: 1440, margin: "0 auto", padding: "40px 24px 40px", display: "grid", gridTemplateColumns: "280px 1fr", gap: 40, alignItems: "start" }}>
        <FilterRail />
        <div>
          <Toolbar count={shown.length} />
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 28 }}>
            {shown.map((p) => <ProductCard key={p.slug} product={p} onAdd={onAdd} onClick={() => onOpen && onOpen(p)} />)}
          </div>
          <Pagination />
        </div>
      </div>

      <FeatureRow />
      <AppBanner />
      <PromoPair />
      <RelatedStories />
    </main>
  );
}

Object.assign(window, { BrandCollection });