// v2-mobile-legal-variants.jsx — Mobile versions of NFR legal screens
// Group A mobile: RESTRICTED PDP, SPECIAL PDP, FSAFE PDP
// Group B+C mobile: Search public ETC, Add-to-cart blocked

// ═══ A1m: Mobile PDP Public RESTRICTED (NFR-LEG-02/04) ═══
function MV2_PdpRestricted() {
  useLucide();
  return (
    <MobChrome>
      <MobHeader title="Chi tiết sản phẩm" subtitle="Public · RESTRICTED" back action={<Icon name="share-2" size={18} color="#CCCCCC" />} />

      {/* Sticky banner */}
      <div style={{ background: "#92400E", color: "#fff", padding: "10px 16px", display: "flex", gap: 10, alignItems: "flex-start", flexShrink: 0, fontFamily: "var(--font-sans)" }}>
        <Icon name="shield-alert" size={16} color="#fff" style={{ flexShrink: 0, marginTop: 1 }} />
        <div style={{ fontSize: 11.5, lineHeight: 1.5 }}>
          <strong style={{ display: "block", fontSize: 12, marginBottom: 2 }}>Thuốc hạn chế (RESTRICTED)</strong>
          Chỉ cung cấp cho cơ sở có giấy phép phù hợp. Cấm bán lẻ trực tuyến.
        </div>
      </div>

      <div style={{ flex: 1, overflow: "auto", background: "#F3F5F9", fontFamily: "var(--font-sans)" }}>
        {/* Image */}
        <div style={{ background: "#FFF8E1", padding: 24, display: "flex", justifyContent: "center", position: "relative" }}>
          <span style={{ position: "absolute", top: 10, left: 10, fontWeight: 700, fontSize: 10, padding: "3px 8px", borderRadius: 999, background: "#B45309", color: "#fff" }}>RESTRICTED</span>
          <div style={{ width: 160, height: 160, borderRadius: 999, background: "#fff", color: "#B45309", display: "flex", alignItems: "center", justifyContent: "center" }}>
            <Icon name="pill" size={80} />
          </div>
        </div>

        <div style={{ background: "#fff", padding: 16 }}>
          <div style={{ display: "flex", gap: 6, marginBottom: 8 }}>
            <span style={{ fontWeight: 700, fontSize: 10, padding: "3px 8px", borderRadius: 4, background: "#B45309", color: "#fff" }}>RESTRICTED</span>
            <span style={{ fontWeight: 600, fontSize: 10, padding: "3px 8px", borderRadius: 999, background: "#F1F2F4", color: "#6F767E" }}>VD-34567-22</span>
          </div>
          <h2 style={{ fontWeight: 800, fontSize: 18, color: "#212121", margin: "0 0 4px", lineHeight: 1.25 }}>Diazepam 5mg DHG</h2>
          <div style={{ fontSize: 12, color: "#585858", marginBottom: 12 }}>Hoạt chất: <strong>Diazepam 5 mg</strong> · NSX: DHG Pharma</div>

          {/* Disclaimer */}
          <div style={{ padding: 12, background: "#FFF8E1", border: "1px solid #FCD34D", borderRadius: 10, display: "flex", gap: 10, marginBottom: 12 }}>
            <Icon name="alert-octagon" size={16} color="#7C2D12" style={{ flexShrink: 0, marginTop: 1 }} />
            <div style={{ fontSize: 11.5, color: "#7C2D12", lineHeight: 1.55 }}>
              Thuốc hạn chế bán lẻ. <strong>Không quảng cáo, không khuyến mãi.</strong> Chỉ SCOPE_FULL hoặc SCOPE_SPECIALTY.
            </div>
          </div>

          {/* Locked */}
          <div style={{ padding: 14, background: "#F8F9FA", border: "1px dashed #C6C6C6", borderRadius: 10, display: "flex", gap: 10, alignItems: "center", marginBottom: 12 }}>
            <Icon name="lock" size={18} color="#909090" />
            <div>
              <div style={{ fontWeight: 700, fontSize: 13, color: "#212121" }}>Giá ẩn</div>
              <div style={{ fontSize: 11, color: "#585858", marginTop: 2 }}>Đăng nhập + KYC scope phù hợp</div>
            </div>
          </div>
          <button disabled style={{ width: "100%", height: 44, borderRadius: 10, background: "#F1F2F4", color: "#909090", border: 0, fontWeight: 700, fontSize: 13, display: "inline-flex", alignItems: "center", justifyContent: "center", gap: 6 }}>
            <Icon name="lock" size={14} /> Cần đăng nhập + KYC
          </button>
        </div>
      </div>
    </MobChrome>
  );
}

// ═══ A2m: Mobile PDP SPECIAL (NFR-LEG-04/18) ═══
function MV2_PdpSpecial() {
  useLucide();
  return (
    <MobChrome>
      <MobHeader title="Chi tiết sản phẩm" subtitle="KSĐB · KHÔNG ÁP DỤNG" back action={<Icon name="share-2" size={18} color="#CCCCCC" />} />

      <div style={{ background: "#581C87", color: "#fff", padding: "10px 16px", display: "flex", gap: 10, alignItems: "flex-start", flexShrink: 0, fontFamily: "var(--font-sans)" }}>
        <Icon name="lock" size={16} color="#fff" style={{ flexShrink: 0, marginTop: 1 }} />
        <div style={{ fontSize: 11.5, lineHeight: 1.5 }}>
          <strong style={{ display: "block", fontSize: 12, marginBottom: 2 }}>⚠️ KHÔNG ÁP DỤNG — Sàn không đăng KSĐB/thầu · Giữ làm tham chiếu</strong>
          Không bán online. Chuyển workflow CRM offline.
        </div>
      </div>

      <div style={{ flex: 1, overflow: "auto", background: "#F3F5F9", fontFamily: "var(--font-sans)" }}>
        <div style={{ background: "#F3E8FF", padding: 24, display: "flex", justifyContent: "center", position: "relative" }}>
          <span style={{ position: "absolute", top: 10, left: 10, fontWeight: 700, fontSize: 10, padding: "3px 8px", borderRadius: 999, background: "#7C3AED", color: "#fff" }}>SPECIAL · KSĐB</span>
          <div style={{ width: 160, height: 160, borderRadius: 999, background: "#fff", color: "#7C3AED", display: "flex", alignItems: "center", justifyContent: "center" }}>
            <Icon name="pill" size={80} />
          </div>
        </div>

        <div style={{ background: "#fff", padding: 16 }}>
          <h2 style={{ fontWeight: 800, fontSize: 18, color: "#212121", margin: "0 0 4px", lineHeight: 1.25 }}>Morphin HCl 10mg</h2>
          <div style={{ fontSize: 12, color: "#585858", marginBottom: 12 }}>Hoạt chất: <strong>Morphine HCl 10 mg</strong> · Ống tiêm · 10 ống/hộp</div>

          {/* CTA → Liên hệ chuyên viên */}
          <div style={{ padding: 14, background: "#F3E8FF", border: "1px solid #D8B4FE", borderRadius: 10, marginBottom: 12 }}>
            <div style={{ fontWeight: 700, fontSize: 13, color: "#581C87", marginBottom: 6, display: "flex", alignItems: "center", gap: 6 }}>
              <Icon name="headphones" size={14} /> Đặt hàng offline
            </div>
            <div style={{ fontSize: 11.5, color: "#6B21A8", lineHeight: 1.55, marginBottom: 10 }}>
              Thuốc KSĐB chỉ giao dịch offline. Tạo yêu cầu → chuyên viên liên hệ trong 2 giờ.
            </div>
            {[
              { t: "Đơn đặt hàng KSĐB (có dấu)", l: "TT 20/2017 §8" },
              { t: "CCHN dược sĩ phụ trách",      l: "NĐ 54/2017 §44" },
            ].map((d) => (
              <div key={d.t} style={{ display: "flex", gap: 6, padding: "6px 8px", background: "#fff", border: "1px solid #E9D5FF", borderRadius: 6, marginBottom: 6, fontSize: 11 }}>
                <Icon name="file-check" size={12} color="#7C3AED" style={{ flexShrink: 0, marginTop: 1 }} />
                <div><span style={{ fontWeight: 600, color: "#212121" }}>{d.t}</span><br /><span style={{ color: "#6F767E", fontSize: 10 }}>{d.l}</span></div>
              </div>
            ))}
          </div>

          <button style={{ width: "100%", height: 44, borderRadius: 10, background: "#7C3AED", color: "#fff", border: 0, fontWeight: 700, fontSize: 13, display: "inline-flex", alignItems: "center", justifyContent: "center", gap: 6, boxShadow: "0 4px 12px rgba(124,58,237,0.3)", marginBottom: 8 }}>
            <Icon name="headphones" size={14} /> Liên hệ chuyên viên
          </button>
          <button style={{ width: "100%", height: 40, borderRadius: 10, background: "#fff", color: "#585858", border: "1px solid #C6C6C6", fontWeight: 600, fontSize: 12 }}>Hotline 1800 0000</button>
        </div>
      </div>
    </MobChrome>
  );
}

// ═══ A3m: Mobile PDP FSAFE (NFR-LEG-05) ═══
function MV2_PdpFsafe() {
  useLucide();
  return (
    <MobChrome>
      <MobHeader title="Chi tiết sản phẩm" subtitle="TPBVSK · có FSAFE" back action={
        <div style={{ position: "relative" }}>
          <Icon name="shopping-cart" size={20} color="#212121" />
          <span style={{ position: "absolute", top: -6, right: -6, minWidth: 16, height: 16, padding: "0 4px", borderRadius: 999, background: "#EE0033", color: "#fff", fontSize: 9, fontWeight: 800, display: "flex", alignItems: "center", justifyContent: "center" }}>2</span>
        </div>
      } />

      <div style={{ flex: 1, overflow: "auto", background: "#F3F5F9", fontFamily: "var(--font-sans)" }}>
        <div style={{ background: "#CCFBF1", padding: 24, display: "flex", justifyContent: "center", position: "relative" }}>
          <span style={{ position: "absolute", top: 10, left: 10, fontWeight: 700, fontSize: 10, padding: "3px 8px", borderRadius: 999, background: "#0F766E", color: "#fff" }}>TPBVSK</span>
          <div style={{ width: 160, height: 160, borderRadius: 999, background: "#fff", color: "#0F766E", display: "flex", alignItems: "center", justifyContent: "center" }}>
            <Icon name="leaf" size={80} />
          </div>
        </div>

        <div style={{ background: "#fff", padding: 16 }}>
          <h2 style={{ fontWeight: 800, fontSize: 18, color: "#212121", margin: "0 0 4px", lineHeight: 1.25 }}>Grow F Calcium</h2>
          <div style={{ fontSize: 12, color: "#585858", marginBottom: 10 }}>Canxi Citrate 500mg + Vitamin D3 800IU + K2 · Mediphar USA</div>

          {/* FSAFE disclaimer — ≥ 12px, contrast AA, cố định */}
          <div style={{
            padding: 12, background: "#FEF9C3", border: "2px solid #F59E0B", borderRadius: 10,
            marginBottom: 12, display: "flex", gap: 8, alignItems: "center",
          }}>
            <Icon name="alert-triangle" size={16} color="#92400E" style={{ flexShrink: 0 }} />
            <span style={{ fontWeight: 700, fontSize: 12, color: "#78350F", lineHeight: 1.5 }}>
              Thực phẩm này không phải là thuốc và không có tác dụng thay thế thuốc chữa bệnh.
            </span>
          </div>

          {/* Price + CTA (TPBVSK open to all) */}
          <div style={{ display: "flex", alignItems: "baseline", gap: 6, marginBottom: 4 }}>
            <span style={{ fontWeight: 800, fontSize: 24, color: "#EE0033" }}>285.000₫</span>
            <span style={{ fontSize: 12, color: "#6F767E" }}>/ Hộp 60 viên</span>
          </div>
          <div style={{ fontSize: 11, color: "#909090", marginBottom: 12 }}>Giá lẻ <span style={{ textDecoration: "line-through" }}>320.000₫</span></div>

          {/* CTAs */}
          <div style={{ display: "flex", gap: 8, marginBottom: 14 }}>
            <button style={{ flex: 1, height: 42, borderRadius: 10, background: "#fff", color: "#EE0033", border: "2px solid #EE0033", fontWeight: 700, fontSize: 12, display: "inline-flex", alignItems: "center", justifyContent: "center", gap: 5 }}>
              <Icon name="shopping-cart" size={14} /> Thêm giỏ
            </button>
            <button style={{ flex: 1, height: 42, borderRadius: 10, background: "#EE0033", color: "#fff", border: 0, fontWeight: 700, fontSize: 12, display: "inline-flex", alignItems: "center", justifyContent: "center", gap: 5 }}>
              <Icon name="zap" size={14} /> Mua ngay
            </button>
          </div>

          {/* Công dụng */}
          <div style={{ background: "#F8F9FA", borderRadius: 10, padding: 12, marginBottom: 10 }}>
            <div style={{ fontWeight: 700, fontSize: 12, marginBottom: 6, display: "flex", alignItems: "center", gap: 5 }}>
              <Icon name="sparkles" size={12} color="#0F766E" /> Công dụng
            </div>
            <ul style={{ margin: 0, padding: "0 0 0 16px", fontSize: 11.5, lineHeight: 1.65 }}>
              <li>Bổ sung canxi, vitamin D3 và K2</li>
              <li>Hỗ trợ duy trì sức khoẻ xương</li>
              <li>Hỗ trợ giảm nguy cơ loãng xương</li>
            </ul>
          </div>
        </div>
      </div>
    </MobChrome>
  );
}

// ═══ B1m: Mobile Search public ETC (NFR-LEG-09) ═══
function MV2_SearchPublicEtc() {
  useLucide();
  const results = [
    { name: "Amoxicillin 500mg DHG",     cls: "ETC",     restricted: true },
    { name: "Morphin HCl 10mg",          cls: "SPECIAL", restricted: true },
    { name: "Paracetamol 500mg Domesco", cls: "OTC",     restricted: false, price: "18.500₫" },
    { name: "Grow F Calcium",             cls: "TPBVSK",  restricted: false, price: "285.000₫", fsafe: true },
  ];
  const clsColors = { ETC: "#EE0033", SPECIAL: "#7C3AED", OTC: "#1A7F4D", TPBVSK: "#0F766E" };

  return (
    <MobChrome>
      <MobHeader title="Tìm kiếm" back action={<Icon name="filter" size={18} color="#212121" />} />

      <div style={{ flex: 1, overflow: "auto", background: "#F3F5F9", fontFamily: "var(--font-sans)" }}>
        {/* Search bar */}
        <div style={{ padding: "10px 16px", background: "#fff", borderBottom: "1px solid #EEEEEE" }}>
          <div style={{ display: "flex", alignItems: "center", gap: 8, padding: "0 12px", height: 38, border: "1px solid #EE0033", borderRadius: 8, background: "#fff" }}>
            <Icon name="search" size={14} color="#EE0033" />
            <span style={{ fontSize: 13, color: "#212121", fontWeight: 600 }}>amoxicillin</span>
            <span style={{ marginLeft: "auto", fontSize: 10, color: "#6F767E" }}>{results.length} kết quả</span>
          </div>
        </div>

        {/* Info */}
        <div style={{ padding: "10px 16px" }}>
          <div style={{ padding: 10, background: "#F0F7FF", border: "1px solid #BFDBFE", borderRadius: 8, fontSize: 11, color: "#1E3A8A", lineHeight: 1.5, display: "flex", gap: 8 }}>
            <Icon name="info" size={13} color="#1E40AF" style={{ flexShrink: 0, marginTop: 1 }} />
            <span><strong>NFR-LEG-09:</strong> ETC/SPECIAL/RESTRICTED chỉ hiện tên + SĐKLH + hoạt chất. Không giá, không CTA.</span>
          </div>
        </div>

        {/* Results */}
        <div style={{ padding: "0 16px 16px" }}>
          {results.map((r, i) => (
            <div key={i} style={{ background: "#fff", border: "1px solid #EEEEEE", borderRadius: 10, padding: 12, marginBottom: 8, display: "flex", gap: 10 }}>
              <div style={{ width: 60, height: 60, borderRadius: 8, background: r.restricted ? "#F8F9FA" : `${clsColors[r.cls]}12`, display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>
                {r.restricted ? <Icon name="eye-off" size={20} color="#909090" /> : <Icon name={r.cls === "TPBVSK" ? "leaf" : "pill"} size={24} color={clsColors[r.cls]} />}
              </div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ display: "flex", gap: 5, marginBottom: 4 }}>
                  <span style={{ fontWeight: 700, fontSize: 9, padding: "2px 6px", borderRadius: 3, background: clsColors[r.cls], color: "#fff" }}>{r.cls}</span>
                </div>
                <div style={{ fontWeight: 700, fontSize: 13, color: "#212121", lineHeight: 1.3, marginBottom: 4 }}>{r.name}</div>
                {r.restricted ? (
                  <div style={{ padding: "5px 8px", background: "#F8F9FA", border: "1px dashed #C6C6C6", borderRadius: 6, fontSize: 10, color: "#6F767E", display: "flex", alignItems: "center", gap: 4 }}>
                    <Icon name="lock" size={10} /> Giá ẩn · Đăng nhập + KYC
                  </div>
                ) : (
                  <>
                    <div style={{ fontWeight: 800, fontSize: 14, color: "#EE0033" }}>{r.price}</div>
                  </>
                )}
              </div>
            </div>
          ))}
        </div>
      </div>
    </MobChrome>
  );
}

// ═══ C1m: Mobile Add-to-cart blocked (NFR-LEG-13) ═══
function MV2_AddToCartBlocked() {
  useLucide();
  return (
    <MobChrome>
      <MobHeader title="Chi tiết sản phẩm" back action={<Icon name="shopping-cart" size={20} color="#212121" />} />

      <div style={{ flex: 1, position: "relative", background: "#F3F5F9", overflow: "hidden", fontFamily: "var(--font-sans)" }}>
        {/* Faded PDP */}
        <div style={{ position: "absolute", inset: 0, padding: 16, opacity: 0.3, pointerEvents: "none" }}>
          <div style={{ background: "#FFEEF1", borderRadius: 10, height: 160, marginBottom: 10 }} />
          <div style={{ background: "#fff", borderRadius: 10, padding: 12 }}>
            <div style={{ height: 14, background: "#E8E8E8", borderRadius: 4, marginBottom: 8, width: "70%" }} />
            <div style={{ height: 10, background: "#F1F2F4", borderRadius: 4, marginBottom: 6, width: "50%" }} />
            <div style={{ height: 24, background: "#EE003320", borderRadius: 4, width: "40%" }} />
          </div>
        </div>
        <div style={{ position: "absolute", inset: 0, background: "rgba(15,23,42,0.5)" }} />

        {/* Modal */}
        <div style={{
          position: "absolute", left: 16, right: 16, top: "50%", transform: "translateY(-50%)",
          background: "#fff", borderRadius: 18, padding: 22, boxShadow: "0 16px 40px rgba(15,23,42,0.25)",
        }}>
          <div style={{ display: "flex", justifyContent: "center", marginBottom: 14 }}>
            <div style={{ width: 64, height: 64, borderRadius: 999, background: "#FFEEF1", color: "#C8002B", display: "inline-flex", alignItems: "center", justifyContent: "center", border: "3px solid #FFD0DA" }}>
              <Icon name="shield-x" size={28} />
            </div>
          </div>
          <div style={{ fontWeight: 800, fontSize: 17, color: "#212121", textAlign: "center", marginBottom: 8 }}>Scope không đủ</div>
          <p style={{ margin: "0 0 12px", fontSize: 12.5, color: "#585858", lineHeight: 1.6, textAlign: "center" }}>
            Tài khoản <strong>SCOPE_LIMITED</strong> không thể mua ETC. Cần nâng lên <strong>FULL</strong> hoặc <strong>SPECIALTY</strong>.
          </p>

          {/* Product */}
          <div style={{ padding: 10, background: "#F8F9FA", border: "1px solid #EEEEEE", borderRadius: 8, display: "flex", gap: 10, marginBottom: 12 }}>
            <div style={{ width: 40, height: 40, borderRadius: 8, background: "#FFEEF1", color: "#EE0033", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>
              <Icon name="pill" size={18} />
            </div>
            <div>
              <div style={{ fontWeight: 700, fontSize: 12, color: "#212121" }}>Amoxicillin 500mg DHG</div>
              <div style={{ display: "flex", gap: 4, marginTop: 3 }}>
                <span style={{ fontWeight: 700, fontSize: 9, padding: "1px 5px", borderRadius: 3, background: "#EE0033", color: "#fff" }}>ETC</span>
                <span style={{ fontSize: 10, color: "#6F767E" }}>VD-23456-20</span>
              </div>
            </div>
          </div>

          {/* Error code */}
          <div style={{ padding: 8, background: "#FAFBFD", border: "1px dashed #EEEEEE", borderRadius: 6, fontFamily: "ui-monospace, Menlo, monospace", fontSize: 10, color: "#6F767E", marginBottom: 12, lineHeight: 1.5 }}>
            forbidden_classification · scope=LIMITED
          </div>

          <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
            <button style={{ height: 44, borderRadius: 10, background: "#EE0033", color: "#fff", border: 0, fontWeight: 700, fontSize: 13, display: "inline-flex", alignItems: "center", justifyContent: "center", gap: 6, boxShadow: "0 4px 12px rgba(238,0,51,0.25)" }}>
              <Icon name="shield-check" size={14} /> Nâng cấp KYC
            </button>
            <button style={{ height: 40, borderRadius: 10, background: "#fff", color: "#585858", border: "1px solid #C6C6C6", fontWeight: 600, fontSize: 12 }}>Đóng</button>
          </div>
        </div>
      </div>
    </MobChrome>
  );
}

// ═══ D1m: Mobile Footer Legal Disclosure (NFR-LEG-21) ═══
function MV2_FooterLegal() {
  useLucide();
  return (
    <MobChrome>
      <MobHeader title="Trang chủ" action={
        <div style={{ display: "flex", gap: 12 }}>
          <Icon name="bell" size={20} color="#212121" />
          <Icon name="shopping-cart" size={20} color="#212121" />
        </div>
      } />

      <div style={{ flex: 1, overflow: "auto", background: "#F3F5F9", fontFamily: "var(--font-sans)" }}>
        {/* Faded content */}
        <div style={{ opacity: 0.3, padding: "12px 16px", pointerEvents: "none" }}>
          <div style={{ height: 100, background: "#fff", borderRadius: 10, marginBottom: 10 }} />
          <div style={{ height: 100, background: "#fff", borderRadius: 10, marginBottom: 10 }} />
        </div>

        {/* Footer */}
        <footer style={{ background: "#1E293B", color: "#CBD5E1", padding: "20px 16px" }}>
          <div style={{ fontWeight: 800, fontSize: 18, color: "#fff", marginBottom: 12 }}>THUỐC <span style={{ color: "#EE0033" }}>VIỆT</span></div>

          {/* Quick links */}
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 6, marginBottom: 16 }}>
            {["Điều khoản sử dụng", "Chính sách bảo mật", "Chính sách cookie", "Quy chế sàn TMĐT", "Giao hàng", "Đổi trả", "FAQ", "Liên hệ"].map(l => (
              <a key={l} style={{ fontSize: 11.5, color: "#94A3B8", padding: "4px 0", textDecoration: "none" }}>{l}</a>
            ))}
          </div>

          <a style={{ display: "inline-flex", alignItems: "center", gap: 4, fontSize: 11.5, color: "#EE0033", fontWeight: 600, marginBottom: 14, textDecoration: "none" }}>
            <Icon name="cookie" size={12} /> Quản lý cookie
          </a>

          {/* Legal entity — NFR-LEG-21 */}
          <div style={{ padding: "14px 0", borderTop: "1px solid #334155" }}>
            <div style={{ fontWeight: 700, fontSize: 10, color: "#64748B", letterSpacing: "0.06em", textTransform: "uppercase", marginBottom: 10, display: "flex", alignItems: "center", gap: 5 }}>
              <Icon name="shield-check" size={11} /> Thông tin pháp nhân
            </div>
            {[
              ["Tên pháp nhân", "Công ty TNHH Thuốc Việt"],
              ["MSDN", "0316 789 456"],
              ["Địa chỉ", "123 Nguyễn Thị Minh Khai, Q.1, TP.HCM"],
              ["GCN ĐĐKKD", "GPP-HCM-0234/2024 · Sở Y tế TP.HCM"],
              ["DS phụ trách", "DS. Nguyễn Thị Lan · CCHN-HCM-0123"],
            ].map(([k, v], i) => (
              <div key={k} style={{ display: "flex", padding: "5px 0", borderTop: i === 0 ? "none" : "1px solid #334155", fontSize: 11 }}>
                <span style={{ color: "#64748B", width: 100, flexShrink: 0 }}>{k}</span>
                <span style={{ color: "#E2E8F0", fontWeight: 500 }}>{v}</span>
              </div>
            ))}
          </div>

          <div style={{ paddingTop: 12, borderTop: "1px solid #334155", fontSize: 10, color: "#64748B", textAlign: "center" }}>
            © 2024–2026 Thuốc Việt · V2.4 pilot
          </div>
        </footer>
      </div>
    </MobChrome>
  );
}

Object.assign(window, { MV2_PdpRestricted, MV2_PdpSpecial, MV2_PdpFsafe, MV2_SearchPublicEtc, MV2_AddToCartBlocked, MV2_FooterLegal });