// Khối "Liên hệ & hợp tác cùng Xedap.vn" + "Bài viết đề xuất" cho trang Tìm showroom.
// Export duy nhất: StoreLocatorContact.
const { Button: StoreLocatorContactButton } = window.XedapVnDesignSystem_03b1c0;

const SLC_B2B_PERKS = [
  { icon: "ph-fill ph-percent", label: "Chiết khấu theo số lượng" },
  { icon: "ph-fill ph-file-text", label: "Báo giá nhanh" },
  { icon: "ph-fill ph-seal-check", label: "Xuất VAT đầy đủ" },
  { icon: "ph-fill ph-truck", label: "Giao hàng toàn quốc" },
];

const SLC_REGIONS = ["Miền Bắc", "Miền Trung", "Miền Nam", "Khu vực khác"];

const SLC_POSTS = [
  { key: "kinh-nghiem", tag: "KINH NGHIỆM", title: "Kinh nghiệm chọn cửa hàng xe đạp phù hợp", excerpt: "Những tiêu chí quan trọng giúp bạn tìm được cửa hàng xe đạp uy tín, phù hợp nhu cầu và tối ưu chi phí.", slot: "Ảnh bài viết — bản đồ cửa hàng 1200×760" },
  { key: "doanh-nghiep", tag: "DOANH NGHIỆP", title: "Chính sách mua xe số lượng lớn cho doanh nghiệp", excerpt: "Tìm hiểu chính sách chiết khấu, quy trình báo giá và các giải pháp tối ưu cho doanh nghiệp, trường học, sự kiện.", slot: "Ảnh bài viết — showroom Xedap.vn 1200×760" },
];

const SLC_LINKS = [
  { icon: "ph-fill ph-credit-card", label: "Ưu đãi thanh toán & trả góp 0% qua hơn 20 ngân hàng", href: "#" },
  { icon: "ph-fill ph-wrench", label: "Gói bảo trì - bảo dưỡng định kỳ tại Xedap Service", href: "bao-tri-bao-duong.html" },
];

const slcCard = { background: "#fff", borderRadius: 8, border: "1px solid var(--border)", boxShadow: "0 10px 30px rgba(20,47,247,0.06)" };
const slcLabel = { display: "block", fontSize: "calc(13px + 0.5px*var(--ts))", fontWeight: 600, color: "var(--muted-foreground)" };

function StoreLocatorContactIcon({ icon, size = 52, filled }) {
  return (
    <div style={{ width: size, height: size, flexShrink: 0, borderRadius: 8, display: "grid", placeItems: "center", background: filled ? "var(--primary)" : "var(--accent)", color: filled ? "#fff" : "var(--primary)" }}>
      <i className={"ph-fill " + icon} style={{ fontSize: size * 0.5 }}></i>
    </div>
  );
}

function StoreLocatorContactField({ icon, placeholder, value, onChange, type = "text", options }) {
  const base = { width: "100%", boxSizing: "border-box", padding: "14px 16px 14px 46px", borderRadius: 8, border: "1px solid var(--input)", background: "#fff", fontFamily: "var(--font-sans)", fontSize: "calc(13px + 1px*var(--ts))", color: "var(--foreground)", outline: "none" };
  return (
    <div style={{ position: "relative" }}>
      <i className={"ph " + icon} style={{ position: "absolute", left: 16, top: "50%", transform: "translateY(-50%)", fontSize: "calc(13px + 4px*var(--ts))", color: "var(--muted-foreground)", pointerEvents: "none" }}></i>
      {options ? (
        <select value={value} onChange={(e) => onChange(e.target.value)} style={{ ...base, appearance: "none", cursor: "pointer", color: value ? "var(--foreground)" : "var(--muted-foreground)" }}>
          <option value="">{placeholder}</option>
          {options.map((o) => <option key={o} value={o}>{o}</option>)}
        </select>
      ) : (
        <input type={type} value={value} onChange={(e) => onChange(e.target.value)} placeholder={placeholder} style={base} />
      )}
      {options ? <i className="ph ph-caret-down" style={{ position: "absolute", right: 16, top: "50%", transform: "translateY(-50%)", fontSize: "calc(13px + 3px*var(--ts))", color: "var(--muted-foreground)", pointerEvents: "none" }}></i> : null}
    </div>
  );
}

function StoreLocatorContactSubmit({ icon, label, onClick, done }) {
  return (
    <button onClick={onClick} style={{ width: "100%", display: "inline-flex", alignItems: "center", justifyContent: "center", gap: 10, padding: "15px 18px", borderRadius: 8, border: "none", background: done ? "var(--success)" : "var(--primary)", color: "#fff", font: "inherit", fontSize: "calc(13px + 1.5px*var(--ts))", fontWeight: 700, cursor: "pointer", transition: "background 0.18s" }}>
      <i className={"ph-fill " + (done ? "ph-check-circle" : icon)} style={{ fontSize: "calc(13px + 4px*var(--ts))" }}></i>
      {done ? "Đã gửi, Xedap.vn sẽ liên hệ lại" : label}
      {done ? null : <i className="ph ph-arrow-right" style={{ fontSize: "calc(13px + 3px*var(--ts))" }}></i>}
    </button>
  );
}

function StoreLocatorContact() {
  const [b2b, setB2b] = React.useState({ name: "", phone: "", email: "", qty: "" });
  const [fr, setFr] = React.useState({ name: "", phone: "", region: "" });
  const [sentB2b, setSentB2b] = React.useState(false);
  const [sentFr, setSentFr] = React.useState(false);
  const set = (fn, k) => (v) => fn((s) => ({ ...s, [k]: v }));

  return (
    <div style={{ marginTop: 52 }}>
      <style>{`
.slc-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.55fr) minmax(0,1fr);gap:20px;align-items:stretch}
@media (max-width:1180px){.slc-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.slc-grid>*:nth-child(2){order:-1;grid-column:span 2}}
@media (max-width:760px){.slc-grid{grid-template-columns:minmax(0,1fr)}.slc-grid>*:nth-child(2){grid-column:span 1}}
.slc-b2b-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,0.34fr);gap:18px}
@media (max-width:1180px){.slc-b2b-body{grid-template-columns:minmax(0,1fr) minmax(0,0.3fr)}}
@media (max-width:820px){.slc-b2b-body{grid-template-columns:minmax(0,1fr)}.slc-b2b-art{display:none}.slc-b2b-head{max-width:none!important}.slc-b2b-veil{background:rgba(255,255,255,0.94)!important}}
.slc-perks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:16px}
@media (max-width:520px){.slc-perks{grid-template-columns:minmax(0,1fr)}}
@media (max-width:520px){.slc-perks{grid-template-columns:minmax(0,1fr)}}
.slc-posts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr)) minmax(0,1.05fr);gap:18px;align-items:stretch}
@media (max-width:1100px){.slc-posts{grid-template-columns:repeat(2,minmax(0,1fr))}.slc-posts>*:last-child{grid-column:span 2}}
@media (max-width:660px){.slc-posts{grid-template-columns:minmax(0,1fr)}.slc-posts>*:last-child{grid-column:span 1}}
.slc-link-row:hover{background:var(--accent)}
.slc-post-card:hover{box-shadow:0 14px 34px rgba(20,47,247,0.13)}
`}</style>

      <div style={{ borderRadius: 8, background: "linear-gradient(180deg,#eaf1ff 0%,#f7faff 46%,#ffffff 100%)", border: "1px solid var(--border)", padding: "34px 26px 30px" }}>
        <div style={{ display: "flex", alignItems: "center", justifyContent: "center", gap: 16, flexWrap: "wrap", marginBottom: 26 }}>
          <h2 style={{ margin: 0, textAlign: "center", fontFamily: "var(--font-heading)", fontWeight: 800, letterSpacing: "-0.01em", lineHeight: 1.15, fontSize: "calc(13px + 17px*var(--ts))", color: "var(--foreground)" }}>
            LIÊN HỆ &amp; HỢP TÁC CÙNG <span style={{ color: "var(--primary)" }}>XEDAP.VN</span>
          </h2>
        </div>

        <div className="slc-grid">

          {/* 1 — THÔNG TIN LIÊN HỆ */}
          <section style={{ ...slcCard, padding: 22, display: "flex", flexDirection: "column", gap: 18, position: "relative", overflow: "hidden", backgroundImage: "url(https://cdn.hstatic.net/files/200001188264/file/xedap-lienhe_1.png)", backgroundSize: "cover", backgroundPosition: "center" }}>
            <div aria-hidden="true" style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg,rgba(255,255,255,0.94) 0%,rgba(255,255,255,0.9) 48%,rgba(255,255,255,0.72) 62%,rgba(255,255,255,0.18) 80%,rgba(255,255,255,0) 100%)", pointerEvents: "none" }}></div>
            <div style={{ position: "relative", display: "flex", alignItems: "center", gap: 14 }}>
              <StoreLocatorContactIcon icon="ph-phone-call" />
              <div style={{ minWidth: 0 }}>
                <div style={{ fontFamily: "var(--font-heading)", fontWeight: 800, fontSize: "calc(13px + 6px*var(--ts))", color: "var(--primary)", lineHeight: 1.2 }}>Thông tin liên hệ</div>
                <div style={{ fontSize: "calc(13px + 1px*var(--ts))", fontWeight: 600, marginTop: 3 }}>Công Ty Cổ Phần Vòng Xanh</div>
              </div>
            </div>

            <div style={{ position: "relative", display: "flex", flexDirection: "column" }}>
              {[
                { icon: "ph-map-pin", label: "Trụ sở", value: <span>100 Hải Thượng Lãn Ông,<br />Phường Chợ Lớn, HCM</span> },
                { icon: "ph-envelope-simple", label: "Email", value: <a href="mailto:info@xedap.vn" style={{ fontWeight: 700, textDecoration: "none" }}>info@xedap.vn</a> },
                { icon: "ph-phone", label: "Hotline tư vấn", value: <a href="tel:18009473" style={{ fontWeight: 700, textDecoration: "none" }}>1800 9473</a> },
              ].map((r, i) => (
                <div key={r.label} style={{ display: "flex", gap: 14, alignItems: "flex-start", padding: "14px 0", borderTop: i === 0 ? "none" : "1px solid var(--border)" }}>
                  <StoreLocatorContactIcon icon={r.icon} size={42} />
                  <div style={{ minWidth: 0, fontSize: "calc(13px + 1.5px*var(--ts))", lineHeight: 1.5 }}>
                    <div style={slcLabel}>{r.label}</div>
                    <div style={{ marginTop: 2, fontWeight: r.label === "Trụ sở" ? 600 : 700 }}>{r.value}</div>
                  </div>
                </div>
              ))}
            </div>

            <div aria-hidden="true" style={{ flex: 1, minHeight: 170 }}></div>
          </section>

          {/* 2 — MUA HÀNG DOANH NGHIỆP */}
          <section style={{ ...slcCard, padding: 0, position: "relative", overflow: "hidden", background: "#f3f7ff" }}>
            <div aria-hidden="true" style={{ position: "absolute", inset: 0, backgroundImage: "url(https://cdn.hstatic.net/files/200001188264/file/xedap-lienhe.png)", backgroundSize: "cover", backgroundPosition: "center right" }}></div>
            <div className="slc-b2b-veil" style={{ position: "absolute", inset: 0, background: "linear-gradient(90deg,#fff 0%,#fff 62%,rgba(255,255,255,0.88) 72%,rgba(255,255,255,0.4) 82%,rgba(255,255,255,0) 92%)", pointerEvents: "none" }}></div>
            <div style={{ position: "relative", padding: 22 }}>
            <div style={{ margin: "-22px -22px 18px", padding: 22, background: "rgba(255,255,255,0.93)" }} className="slc-b2b-head">
              <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
                <StoreLocatorContactIcon icon="ph-buildings" size={56} filled />
                <div style={{ fontFamily: "var(--font-heading)", fontWeight: 800, fontSize: "calc(13px + 8px*var(--ts))", color: "var(--primary)", lineHeight: 1.15, whiteSpace: "nowrap" }}>Mua hàng doanh nghiệp</div>
              </div>
              <p style={{ margin: "10px 0 0", fontSize: "calc(13px + 1.5px*var(--ts))", lineHeight: 1.55, textWrap: "pretty" }}>Giải pháp mua sỉ xe đạp và phụ kiện cho doanh nghiệp, trường học, câu lạc bộ, sự kiện với chính sách ưu đãi hấp dẫn.</p>
            </div>

            <div className="slc-perks">
              {SLC_B2B_PERKS.map((p) => (
                <div key={p.label} style={{ display: "flex", alignItems: "center", gap: 12, padding: "12px 18px", borderRadius: 10, background: "#fff", boxShadow: "0 2px 10px rgba(20,47,247,0.08)" }}>
                  <i className={"ph " + p.icon} style={{ fontSize: "calc(13px + 7px*var(--ts))", color: "var(--primary)", flexShrink: 0 }}></i>
                  <span style={{ fontSize: "calc(13px + 1px*var(--ts))", fontWeight: 600, lineHeight: 1.3, color: "var(--primary)", whiteSpace: "nowrap" }}>{p.label}</span>
                </div>
              ))}
            </div>

            <div className="slc-b2b-body">
              <div style={{ display: "flex", flexDirection: "column", gap: 12, padding: 16, borderRadius: 10, background: "#fff", border: "1px solid var(--border)", boxShadow: "0 2px 10px rgba(20,47,247,0.06)" }}>
                <StoreLocatorContactField icon="ph-user" placeholder="Tên (khách hàng hoặc công ty) *" value={b2b.name} onChange={set(setB2b, "name")} />
                <StoreLocatorContactField icon="ph-phone" placeholder="SĐT *" value={b2b.phone} onChange={set(setB2b, "phone")} />
                <StoreLocatorContactField icon="ph-envelope-simple" placeholder="Email *" value={b2b.email} onChange={set(setB2b, "email")} />
                <StoreLocatorContactField icon="ph-package" placeholder="Số lượng *" value={b2b.qty} onChange={set(setB2b, "qty")} />
                <StoreLocatorContactSubmit icon="ph-paper-plane-tilt" label="Nhận báo giá sỉ" done={sentB2b} onClick={() => setSentB2b(true)} />
              </div>
              <div className="slc-b2b-art" style={{ minHeight: 280 }}></div>
            </div>
            </div>
          </section>

          {/* 3 — NHƯỢNG QUYỀN */}
          <section style={{ ...slcCard, padding: 22, display: "flex", flexDirection: "column", gap: 16, position: "relative", overflow: "hidden", backgroundImage: "url(https://cdn.hstatic.net/files/200001188264/file/fce87f2a-aa06-4baf-80ce-21a0faeed782.png)", backgroundSize: "cover", backgroundPosition: "center" }}>
            <div aria-hidden="true" style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg,rgba(255,255,255,0.94) 0%,rgba(255,255,255,0.9) 48%,rgba(255,255,255,0.72) 62%,rgba(255,255,255,0.18) 80%,rgba(255,255,255,0) 100%)", pointerEvents: "none" }}></div>
            <div style={{ position: "relative", display: "flex", alignItems: "center", gap: 14 }}>
              <StoreLocatorContactIcon icon="ph-storefront" />
              <div style={{ fontFamily: "var(--font-heading)", fontWeight: 800, fontSize: "calc(13px + 6px*var(--ts))", color: "var(--primary)", lineHeight: 1.2 }}>Mở cửa hàng<br />nhượng quyền</div>
            </div>
            <p style={{ position: "relative", margin: 0, fontSize: "calc(13px + 1.5px*var(--ts))", lineHeight: 1.6, textWrap: "pretty" }}>Đồng hành cùng Xedap.vn, trở thành đối tác nhượng quyền và phát triển hệ thống xe đạp trên toàn quốc.</p>
            <div style={{ position: "relative", display: "flex", flexDirection: "column", gap: 12 }}>
              <StoreLocatorContactField icon="ph-user" placeholder="Tên *" value={fr.name} onChange={set(setFr, "name")} />
              <StoreLocatorContactField icon="ph-phone" placeholder="SĐT *" value={fr.phone} onChange={set(setFr, "phone")} />
              <StoreLocatorContactField icon="ph-map-pin" placeholder="Khu vực *" value={fr.region} onChange={set(setFr, "region")} options={SLC_REGIONS} />
              <StoreLocatorContactSubmit icon="ph-handshake" label="Đăng ký tư vấn" done={sentFr} onClick={() => setSentFr(true)} />
            </div>
            <div aria-hidden="true" style={{ flex: 1, minHeight: 150 }}></div>
            <div style={{ position: "relative", fontFamily: "var(--font-heading)", fontWeight: 800, color: "var(--primary)", fontSize: "calc(13px + 1.5px*var(--ts))", letterSpacing: "0.04em", lineHeight: 1.45, minHeight: 20 }}></div>
          </section>

        </div>

      </div>

      {/* BÀI VIẾT ĐỀ XUẤT */}
      <div style={{ marginTop: 44 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 18, flexWrap: "wrap", marginBottom: 18 }}>
          <h2 style={{ margin: 0, fontFamily: "var(--font-heading)", fontWeight: 800, letterSpacing: "-0.01em", fontSize: "calc(13px + 11px*var(--ts))", marginRight: "auto" }}>Bài viết đề xuất</h2>
          <a href="Blog.html" style={{ display: "inline-flex", alignItems: "center", gap: 8, fontSize: "calc(13px + 1.5px*var(--ts))", fontWeight: 700, textDecoration: "none", whiteSpace: "nowrap" }}>
            Xem tất cả bài viết<i className="ph ph-arrow-right" style={{ fontSize: "calc(13px + 3px*var(--ts))" }}></i>
          </a>
        </div>

        <div className="slc-posts">
          {SLC_POSTS.map((p) => (
            <a key={p.key} className="slc-post-card" href="BlogDetail.html" style={{ ...slcCard, display: "flex", flexDirection: "column", overflow: "hidden", textDecoration: "none", color: "var(--foreground)", transition: "box-shadow 0.18s" }}>
              <div style={{ position: "relative", aspectRatio: "16 / 9", background: "var(--secondary)", flexShrink: 0 }}>
                <image-slot id={"slc-post-" + p.key} shape="rect" fit="cover" placeholder={p.slot} style={{ width: "100%", height: "100%", display: "block" }}></image-slot>
                <span style={{ position: "absolute", left: 12, bottom: 12, padding: "6px 12px", borderRadius: 999, background: "var(--primary)", color: "#fff", fontSize: "calc(13px - 1px + 0.5px*var(--ts))", fontWeight: 800, letterSpacing: "0.04em" }}>{p.tag}</span>
              </div>
              <div style={{ padding: "16px 18px 18px", display: "flex", flexDirection: "column", flex: 1 }}>
                <div style={{ fontFamily: "var(--font-heading)", fontWeight: 800, fontSize: "calc(13px + 3.5px*var(--ts))", lineHeight: 1.35, textWrap: "pretty" }}>{p.title}</div>
                <p style={{ margin: "8px 0 0", fontSize: "calc(13px + 1px*var(--ts))", lineHeight: 1.6, color: "var(--muted-foreground)", textWrap: "pretty" }}>{p.excerpt}</p>
                <span style={{ display: "inline-flex", alignItems: "center", gap: 8, marginTop: "auto", paddingTop: 14, color: "var(--primary)", fontWeight: 700, fontSize: "calc(13px + 1px*var(--ts))" }}>
                  Xem thêm<i className="ph ph-arrow-right" style={{ fontSize: "calc(13px + 3px*var(--ts))" }}></i>
                </span>
              </div>
            </a>
          ))}

          <aside style={{ ...slcCard, padding: 18, display: "flex", flexDirection: "column", gap: 6 }}>
            <div style={{ display: "flex", gap: 14, alignItems: "flex-start", paddingBottom: 14, borderBottom: "1px solid var(--border)" }}>
              <StoreLocatorContactIcon icon="ph-file-text" size={46} />
              <div style={{ minWidth: 0 }}>
                <span style={{ display: "inline-block", padding: "4px 10px", borderRadius: 999, background: "var(--accent)", color: "var(--primary)", fontSize: "calc(13px - 1.5px + 0.5px*var(--ts))", fontWeight: 800, letterSpacing: "0.05em" }}>NHƯỢNG QUYỀN</span>
                <div style={{ marginTop: 8, fontFamily: "var(--font-heading)", fontWeight: 800, fontSize: "calc(13px + 3px*var(--ts))", lineHeight: 1.35 }}>Tìm hiểu mô hình nhượng quyền Xedap.vn</div>
                <p style={{ margin: "6px 0 0", fontSize: "calc(13px + 0.5px*var(--ts))", lineHeight: 1.6, color: "var(--muted-foreground)", textWrap: "pretty" }}>Khám phá cơ hội kinh doanh cùng Xedap.vn với mô hình nhượng quyền chuyên nghiệp, chính sách hỗ trợ toàn diện và tiềm năng phát triển bền vững.</p>
                <a href="BlogDetail.html" style={{ display: "inline-flex", alignItems: "center", gap: 8, marginTop: 10, fontWeight: 700, fontSize: "calc(13px + 1px*var(--ts))", textDecoration: "none" }}>
                  Xem thêm<i className="ph ph-arrow-right" style={{ fontSize: "calc(13px + 3px*var(--ts))" }}></i>
                </a>
              </div>
            </div>
            {SLC_LINKS.map((l) => (
              <a key={l.label} className="slc-link-row" href={l.href} onClick={l.href === "#" ? (e) => e.preventDefault() : undefined} style={{ display: "flex", alignItems: "center", gap: 12, padding: "12px 10px", borderRadius: 8, textDecoration: "none", color: "var(--foreground)", transition: "background 0.15s" }}>
                <StoreLocatorContactIcon icon={l.icon} size={38} />
                <span style={{ minWidth: 0, fontSize: "calc(13px + 1px*var(--ts))", fontWeight: 600, lineHeight: 1.45 }}>{l.label}</span>
                <i className="ph ph-caret-right" style={{ marginLeft: "auto", fontSize: "calc(13px + 3px*var(--ts))", color: "var(--muted-foreground)" }}></i>
              </a>
            ))}
          </aside>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { StoreLocatorContact });