// Store detail page — showroom Nguyễn Cơ Thạch. Layout: breadcrumb, title,
// left = map + directions + description; right = photo + info + amenities;
// bottom = photo gallery. Exports a single unique global: StoreDetail.
const { Button, Card } = window.XedapVnDesignSystem_03b1c0;

const STORE_DETAIL = {
  name: "Xedap.vn Nguyễn Cơ Thạch",
  area: "khu đô thị Sala",
  address: "Căn hộ 0.05-0.06, 72 Nguyễn Cơ Thạch, Phường An Lợi Đông, Thành phố Thủ Đức, TP. Hồ Chí Minh",
  hours: "9:00 – 21:00 (Từ thứ 2 đến Chủ nhật)",
  phone: "0911 952 652",
  photo: "https://cdn.hstatic.net/files/200001086651/file/72.png",
  lat: 10.7707069, lng: 106.7245676,
  dirUrl: "https://www.google.com/maps/place/H%E1%BB%87+th%E1%BB%91ng+c%E1%BB%ADa+h%C3%A0ng+xe+%C4%91%E1%BA%A1p+Xedap.vn/@10.7814135,106.7073826,15z/data=!4m6!3m5!1s0x3175255aabb926a1:0x3c7c502d81c2f68d!8m2!3d10.7707069!4d106.7245676!16s%2Fg%2F11pq4yzrb_",
  opened: "03/04/2024",
};

const STORE_DETAIL_AMENITIES = [
  { icon: "ph-shield-check", label: "Hỗ trợ bảo hành chính hãng", link: true },
  { icon: "ph-arrows-clockwise", label: "Đổi trả sản phẩm từ 1 - 12 tháng", link: true },
  { icon: "ph-credit-card", label: "Trả góp 0% lãi suất, nhiều kỳ hạn", link: true },
  { icon: "ph-truck", label: "Có giao & lắp xe tận nơi", link: true },
  { icon: "ph-users", label: "Nhân viên thân thiện, nhiệt tình", link: false },
  { icon: "ph-wrench", label: "Bảo dưỡng, sửa chữa xe tại chỗ", link: true },
  { icon: "ph-motorcycle", label: "Giữ xe miễn phí", link: false },
  { icon: "ph-wifi-high", label: "Wifi miễn phí", link: false },
  { icon: "ph-bicycle", label: "Chạy thử xe miễn phí trước khi mua", link: false },
  { icon: "ph-gift", label: "Nhiều ưu đãi & quà tặng thành viên", link: false },
];

const STORE_DETAIL_PERKS = [
  "Đảm bảo xe đạp, phụ tùng, phụ kiện chính hãng 100% từ các thương hiệu nổi tiếng: GIANT, LIV, MAX, TRINX, VINBIKE, TOTEM…",
  "Không gian trưng bày rộng 230m², đa dạng mẫu mã, cấu hình, kích thước để bạn có nhiều lựa chọn phù hợp nhu cầu",
  "Đủ các dòng xe đường phố, xe đua, xe trẻ em, xe nữ… cùng phụ tùng – phụ kiện chính hãng",
  "Cam kết mức giá tốt nhất thị trường, kèm nhiều chương trình khuyến mãi hấp dẫn",
  "Miễn phí giao hàng nội thành TP.HCM, tiết kiệm tối đa chi phí vận chuyển",
  "Hỗ trợ trả góp với lãi suất 0%, thủ tục đơn giản",
  "Đội ngũ kỹ thuật viên tay nghề cao, lắp ráp nhanh; tư vấn viên am hiểu sản phẩm, nhiệt tình",
  "Chế độ bảo hành lên đến 5 năm cho tất cả sản phẩm",
];

const STORE_DETAIL_PROMOS = [
  {
    img: "https://cdn.hstatic.net/files/200001188264/file/banner-home-1.jpg", fit: "contain",
    tag: "Đang diễn ra", tone: "#d4150a",
    title: "Giảm đến 3 triệu cho xe trợ lực điện chính hãng",
    desc: "Áp dụng cho toàn bộ dòng xe trợ lực điện đang trưng bày tại showroom Nguyễn Cơ Thạch. Tặng kèm khoá chống trộm và mũ bảo hiểm.",
    views: "2.431", date: "01/09/2026 – 30/09/2026",
  },
  {
    img: "https://cdn.hstatic.net/files/200001188264/file/banner-home-2.jpg", fit: "contain",
    tag: "Đang diễn ra", tone: "#c2410c",
    title: "Tặng combo phụ kiện trị giá 1.000.000đ",
    desc: "Mũ bảo hiểm, khoá cáp chống cắt, bình nước và bộ đèn LED sạc USB cho mọi đơn hàng xe đạp từ 5 triệu tại cửa hàng.",
    views: "1.878", date: "Đến khi hết quà tặng",
  },
  {
    img: "https://cdn.hstatic.net/files/200001188264/file/banner-home-3.jpg", fit: "contain",
    tag: "Đang diễn ra", tone: "#142ff7",
    title: "Trả góp 0% lãi suất, kỳ hạn 3 – 12 tháng",
    desc: "Duyệt hồ sơ trong 5 phút ngay tại showroom, chỉ cần CCCD và thẻ tín dụng. Hỗ trợ trả trước từ 20% giá trị xe.",
    views: "3.502", date: "Áp dụng thường xuyên",
  },
  {
    img: "https://cdn.hstatic.net/files/200001188264/file/banner-duoi-home-3.jpg", fit: "contain",
    tag: "Riêng tại showroom này", tone: "#12803c",
    title: "Thu cũ lên đời – trợ giá đến 2 triệu",
    desc: "Mang xe cũ đến showroom Nguyễn Cơ Thạch để kỹ thuật viên định giá miễn phí, số tiền trợ giá trừ thẳng vào xe mới.",
    views: "964", date: "01/09/2026 – 15/10/2026",
  },
  {
    img: "https://cdn.hstatic.net/files/200001188264/file/banner-duoi-home-1.jpg", fit: "contain",
    tag: "Đang diễn ra", tone: "#d4150a",
    title: "Ưu đãi học sinh – sinh viên: giảm thêm 5%",
    desc: "Xuất trình thẻ học sinh, sinh viên khi mua xe tại cửa hàng để được giảm thêm 5%, tối đa 800.000đ trên giá niêm yết.",
    views: "1.205", date: "01/09/2026 – 31/12/2026",
  },
  {
    img: "https://cdn.hstatic.net/files/200001188264/file/banner-duoi-home-2.jpg", fit: "contain",
    tag: "Riêng tại showroom này", tone: "#12803c",
    title: "Miễn phí bảo dưỡng 3 lần trong năm đầu",
    desc: "Khách mua xe tại Nguyễn Cơ Thạch được bảo dưỡng, cân chỉnh và vệ sinh xe miễn phí 3 lần trong 12 tháng đầu tiên.",
    views: "742", date: "Áp dụng thường xuyên",
  },
];

function StoreDetailPromoCard({ p }) {
  const [hover, setHover] = React.useState(false);
  const [liked, setLiked] = React.useState(false);
  return (
    <article
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{ display: "flex", flexDirection: "column", background: "#fff", borderRadius: "var(--radius-lg)", overflow: "hidden", border: "1px solid " + (hover ? "color-mix(in srgb, " + p.tone + " 40%, var(--border))" : "var(--border)"), boxShadow: hover ? "0 16px 36px -20px rgba(15,23,42,.45)" : "var(--shadow-soft)", transform: hover ? "translateY(-3px)" : "none", transition: "transform .22s ease, box-shadow .22s ease, border-color .22s ease" }}
    >
      <a href="#" onClick={(e) => e.preventDefault()} style={{ position: "relative", display: "block", overflow: "hidden", background: p.fit === "contain" ? "color-mix(in srgb, " + p.tone + " 6%, #fff)" : "var(--secondary)" }}>
        <img src={p.img} alt={p.title} loading="lazy" style={{ display: "block", width: "100%", aspectRatio: "16 / 9", objectFit: p.fit || "cover", padding: p.fit === "contain" ? 10 : 0, boxSizing: "border-box", transform: hover ? "scale(1.04)" : "none", transition: "transform .45s ease" }} />
      </a>
      <div style={{ display: "flex", flexDirection: "column", flex: 1, padding: "16px 18px 0" }}>
        <a href="#" onClick={(e) => e.preventDefault()} style={{ fontSize: "calc(13px + 3px*var(--ts))", fontWeight: 700, lineHeight: 1.4, color: "var(--foreground)", textDecoration: hover ? "underline" : "none", textWrap: "pretty" }}>{p.title}</a>
        <p style={{ margin: "10px 0 16px", fontSize: "calc(13px + 1px*var(--ts))", lineHeight: 1.65, color: "var(--muted-foreground)", textWrap: "pretty", display: "-webkit-box", WebkitLineClamp: 3, WebkitBoxOrient: "vertical", overflow: "hidden" }}>{p.desc}</p>
      </div>
      <div style={{ display: "flex", alignItems: "center", gap: 14, rowGap: 6, flexWrap: "wrap", padding: "12px 18px", borderTop: "1px solid var(--border)", fontSize: "calc(13px + 0.5px*var(--ts))", color: "var(--muted-foreground)" }}>
        <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}>
          <i className="ph ph-eye" style={{ fontSize: "calc(13px + 5px*var(--ts))" }}></i>{p.views}
        </span>
        <button onClick={() => setLiked((v) => !v)} aria-label="Lưu khuyến mãi" style={{ display: "inline-flex", alignItems: "center", padding: 0, border: "none", background: "none", cursor: "pointer", color: liked ? "#d4150a" : "var(--muted-foreground)" }}>
          <i className={(liked ? "ph-fill" : "ph") + " ph-heart"} style={{ fontSize: "calc(13px + 5px*var(--ts))" }}></i>
        </button>
        <span style={{ marginLeft: "auto", fontStyle: "italic", minWidth: 0 }}>{p.date}</span>
      </div>
    </article>
  );
}

function StoreDetailPromos() {
  return (
    <section style={{ marginTop: 56 }}>
      <div style={{ display: "flex", alignItems: "baseline", gap: 12, flexWrap: "wrap", marginBottom: 6 }}>
        <h2 style={{ margin: 0, fontSize: "calc(13px + 9px*var(--ts))", fontWeight: 800, fontFamily: "var(--font-heading)" }}>Khuyến mãi đang diễn ra tại cửa hàng</h2>
        <a href="#" onClick={(e) => e.preventDefault()} style={{ fontSize: "calc(13px + 1px*var(--ts))", fontWeight: 600 }}>Xem tất cả chương trình <i className="ph ph-arrow-right" style={{ fontSize: 12 }}></i></a>
      </div>
      <p style={{ margin: "0 0 22px", fontSize: "calc(13px + 1px*var(--ts))", lineHeight: 1.65, color: "var(--muted-foreground)" }}>
        Các ưu đãi dưới đây áp dụng trực tiếp khi mua tại showroom Nguyễn Cơ Thạch. Vui lòng liên hệ <a href="tel:0911952652" style={{ fontWeight: 600 }}>0911 952 652</a> để được tư vấn chi tiết.
      </p>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(3, minmax(0,1fr))", gap: 24 }}>
        {STORE_DETAIL_PROMOS.map((p, i) => (
          <StoreDetailPromoCard key={i} p={p} />
        ))}
      </div>
      <div style={{ display: "flex", alignItems: "flex-start", gap: 10, marginTop: 16, fontSize: "calc(13px + 0.5px*var(--ts))", lineHeight: 1.6, color: "var(--muted-foreground)" }}>
        <i className="ph ph-info" style={{ fontSize: "calc(13px + 4px*var(--ts))", flexShrink: 0, marginTop: 1 }}></i>
        <span>Mỗi đơn hàng áp dụng tối đa một chương trình giảm giá; quà tặng kèm vẫn được cộng dồn. Chương trình có thể kết thúc sớm khi hết số lượng.</span>
      </div>
    </section>
  );
}

const STORE_DETAIL_GALLERY = [
  { img: "https://cdn.hstatic.net/files/200001086651/file/72.png", caption: "Không gian bên ngoài cửa hàng Xedap.vn Nguyễn Cơ Thạch tại khu Sala." },
  { img: "https://cdn.hstatic.net/files/200001086651/file/73.png", caption: "Xe đạp tại cửa hàng đa dạng mẫu mã, kiểu dáng, phù hợp mọi lứa tuổi." },
  { img: "https://cdn.hstatic.net/files/200001086651/file/76.png", caption: "Nhân viên tận tình tư vấn và giải đáp các thắc mắc của khách hàng." },
];

function InfoRow({ store }) {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 12, fontSize: "calc(13px + 2px*var(--ts))", lineHeight: 1.55 }}>
      <div><strong>Địa chỉ:</strong> {store.address}</div>
      <div><strong>Thời gian hoạt động:</strong> {store.hours}</div>
      <div><strong>Số điện thoại:</strong> <a href={"tel:" + store.phone.replace(/\s/g, "")} style={{ fontWeight: 600 }}>{store.phone}</a></div>
    </div>
  );
}

function StoreDetail() {
  const s = STORE_DETAIL;
  const mapSrc = `https://maps.google.com/maps?q=${s.lat},${s.lng}&z=16&hl=vi&output=embed`;
  const dirUrl = s.dirUrl;

  return (
    <main style={{ minHeight: "calc(100vh - 106px)", paddingTop: 106, background: "#fff" }}>
      <div style={{ maxWidth: 1280, margin: "0 auto", padding: "24px 24px 80px" }}>

        {/* Breadcrumb */}
        <nav style={{ display: "flex", alignItems: "center", gap: 8, flexWrap: "wrap", fontSize: "calc(13px + 0.5px*var(--ts))", color: "var(--muted-foreground)", marginBottom: 18 }}>
          {["Trang chủ", "Hệ thống showroom", "TP. Hồ Chí Minh", "Phường An Lợi Đông"].map((c, i, arr) => (
            <React.Fragment key={c}>
              {i < arr.length - 1
                ? <a href="#" onClick={(e) => e.preventDefault()} style={{ fontWeight: 500 }}>{c}</a>
                : <span style={{ color: "var(--foreground)", fontWeight: 600 }}>{c}</span>}
              {i < arr.length - 1 && <i className="ph ph-caret-right" style={{ fontSize: 12 }}></i>}
            </React.Fragment>
          ))}
        </nav>

        <h1 style={{ margin: "0 0 20px", fontSize: "calc(13px + 11px*var(--ts))", fontWeight: 800, letterSpacing: "-0.01em", fontFamily: "var(--font-heading)" }}>{s.name}</h1>

        {/* Two columns */}
        <div style={{ display: "grid", gridTemplateColumns: "minmax(0,1.4fr) minmax(0,1fr)", gap: 40, alignItems: "start" }}>

          {/* LEFT */}
          <div>
            <div style={{ borderRadius: "var(--radius-lg)", overflow: "hidden", border: "1px solid var(--border)", boxShadow: "var(--shadow-soft)" }}>
              <iframe title="Bản đồ showroom" src={mapSrc} referrerPolicy="no-referrer-when-downgrade" style={{ width: "100%", height: 420, border: "none", display: "block" }} loading="lazy" allowFullScreen></iframe>
            </div>
            <a href={dirUrl} target="_blank" rel="noopener" style={{ display: "block", marginTop: 20, marginBottom: 8 }}>
              <Button size="lg" style={{ width: "100%" }}><i className="ph ph-navigation-arrow" style={{ marginRight: 8 }}></i>Xem chỉ đường đến showroom này</Button>
            </a>

            <div style={{ marginTop: 22, fontSize: "calc(13px + 2px*var(--ts))", lineHeight: 1.75, color: "var(--foreground)" }}>
              <p style={{ margin: "0 0 18px" }}>
                Showroom <strong>{s.name}</strong> tọa lạc ngay trung tâm {s.area}, khai trương từ ngày <strong>{s.opened}</strong> tại địa chỉ <strong>{s.address}</strong>. Không gian rộng 230m², thoáng đãng cùng sân đỗ xe rộng rãi, cung cấp đầy đủ các dòng xe đạp chính hãng và dịch vụ chuyên nghiệp:
              </p>
              <ul style={{ margin: 0, padding: 0, listStyle: "none", display: "flex", flexDirection: "column", gap: 14 }}>
                {STORE_DETAIL_PERKS.map((t, i) => (
                  <li key={i} style={{ display: "flex", alignItems: "flex-start", gap: 10 }}>
                    <i className="ph-fill ph-check-circle" style={{ fontSize: "calc(13px + 7px*var(--ts))", color: "var(--success)", flexShrink: 0, marginTop: 1 }}></i>
                    <span>{t}</span>
                  </li>
                ))}
              </ul>
              <p style={{ margin: "18px 0 0" }}>
                Với mục tiêu lấy khách hàng làm trọng tâm, <strong>{s.name}</strong> tại TP. Hồ Chí Minh mong muốn mang lại sản phẩm phù hợp với nhu cầu của bạn, giá cả tốt nhất và dịch vụ khách hàng hoàn hảo.
              </p>
            </div>
          </div>

          {/* RIGHT */}
          <div style={{ display: "flex", flexDirection: "column", gap: 28 }}>
            <div>
              <div style={{ borderRadius: "var(--radius-lg)", overflow: "hidden", border: "1px solid var(--border)", boxShadow: "var(--shadow-soft)", marginBottom: 20 }}>
                <img src={s.photo} alt={s.name} style={{ width: "100%", height: 240, objectFit: "cover", display: "block" }} />
              </div>
              <div style={{ fontSize: "calc(13px + 3px*var(--ts))", fontWeight: 700, marginBottom: 14 }}>{s.name}</div>
              <InfoRow store={s} />
            </div>

            <div>
              <h2 style={{ margin: "0 0 6px", fontSize: "calc(13px + 5px*var(--ts))", fontWeight: 800, fontFamily: "var(--font-heading)" }}>Các tiện ích tại showroom</h2>
              <p style={{ margin: "0 0 18px", fontSize: "calc(13px + 1px*var(--ts))", lineHeight: 1.65, color: "var(--muted-foreground)" }}>
                Bạn sẽ được trải nghiệm dịch vụ chăm sóc khác biệt với phương châm <strong style={{ color: "var(--foreground)" }}>khách hàng là trọng tâm</strong>.
              </p>
              <Card style={{ padding: "8px 24px" }}>
                <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", columnGap: 24 }}>
                  {STORE_DETAIL_AMENITIES.map((a, i) => (
                    <div key={i} style={{ display: "flex", alignItems: "flex-start", gap: 12, padding: "16px 0", borderTop: i > 1 ? "1px solid var(--border)" : "none" }}>
                      <i className={a.icon + " ph"} style={{ fontSize: "calc(13px + 9px*var(--ts))", color: "var(--primary)", flexShrink: 0, marginTop: 1 }}></i>
                      <span style={{ fontSize: "calc(13px + 1px*var(--ts))", fontWeight: 500, lineHeight: 1.4 }}>
                        {a.label}{a.link && <React.Fragment> <a href="#" onClick={(e) => e.preventDefault()} style={{ fontWeight: 500 }}>Xem thêm</a></React.Fragment>}
                      </span>
                    </div>
                  ))}
                </div>
              </Card>
            </div>
          </div>
        </div>

        <StoreDetailPromos />

        {/* Gallery */}
        <div style={{ marginTop: 56 }}>
          <h2 style={{ margin: "0 0 24px", fontSize: "calc(13px + 9px*var(--ts))", fontWeight: 800, fontFamily: "var(--font-heading)", textAlign: "center" }}>Hình ảnh tại showroom</h2>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24 }}>
            {STORE_DETAIL_GALLERY.map((g, i) => (
              <figure key={i} style={{ margin: 0 }}>
                <div style={{ borderRadius: "var(--radius-lg)", overflow: "hidden", border: "1px solid var(--border)", boxShadow: "var(--shadow-soft)" }}>
                  <img src={g.img} alt={g.caption} style={{ width: "100%", aspectRatio: "4 / 3", objectFit: "cover", display: "block" }} />
                </div>
                <figcaption style={{ marginTop: 12, fontSize: "calc(13px + 0.5px*var(--ts))", lineHeight: 1.55, color: "var(--muted-foreground)", textAlign: "center" }}>{g.caption}</figcaption>
              </figure>
            ))}
          </div>
        </div>

      </div>
    </main>
  );
}

Object.assign(window, { StoreDetail });