/* BVS Master Deck — PRODUCT UI MOCKUPS (vector DOM, brand style, illustrative). */

const MK_SANS = "var(--bvs-sans)";
const MK_MONO = "var(--bvs-mono)";
const MK_BLUE = "#0017DB";
const MK_INK = "#0a0a0a";
const MK_PAPER = "#f5f3ee";
const MK_LINE = "rgba(10,10,10,0.10)";
const MK_GREEN = "#16a34a";

function MkLabel({ children, color = "rgba(10,10,10,0.5)", style }) {
  return <div style={{ fontFamily: MK_MONO, fontSize: 9, letterSpacing: "0.12em", textTransform: "uppercase", color, fontWeight: 700, ...style }}>{children}</div>;
}
function MkDot({ color = MK_GREEN, size = 7 }) {
  return <span style={{ width: size, height: size, borderRadius: "50%", background: color, display: "inline-block", boxShadow: `0 0 0 3px ${color}22` }} />;
}
function Bars({ heights, color = MK_BLUE, h = 34, gap = 2 }) {
  const w = 100;
  const bw = (w - gap * (heights.length - 1)) / heights.length;
  return (
    <svg width="100%" height={h} viewBox={`0 0 ${w} ${h}`} preserveAspectRatio="none">
      {heights.map((v, i) => (
        <rect key={i} x={i * (bw + gap)} y={h - v * h} width={bw} height={v * h} rx="0.6"
          fill={i === heights.length - 1 ? color : color + "66"} />
      ))}
    </svg>
  );
}
function Spark({ pts, color = MK_BLUE, h = 34, fill = true }) {
  const w = 100;
  const max = Math.max(...pts), min = Math.min(...pts);
  const nx = (i) => (i / (pts.length - 1)) * w;
  const ny = (v) => h - ((v - min) / (max - min || 1)) * (h - 4) - 2;
  const d = pts.map((v, i) => `${i ? "L" : "M"}${nx(i).toFixed(1)} ${ny(v).toFixed(1)}`).join(" ");
  return (
    <svg width="100%" height={h} viewBox={`0 0 ${w} ${h}`} preserveAspectRatio="none">
      {fill && <path d={`${d} L${w} ${h} L0 ${h} Z`} fill={color + "1a"} />}
      <path d={d} fill="none" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
      <circle cx={nx(pts.length - 1)} cy={ny(pts[pts.length - 1])} r="2.6" fill={color} />
    </svg>
  );
}
function Avatar({ initials, color = MK_BLUE, size = 26 }) {
  return <div style={{ width: size, height: size, borderRadius: "50%", background: color, color: "#fff", display: "grid", placeItems: "center", fontFamily: MK_SANS, fontSize: size * 0.4, fontWeight: 700 }}>{initials}</div>;
}
function StatRow({ items, dark = false }) {
  return (
    <div style={{ display: "grid", gridTemplateColumns: `repeat(${items.length},1fr)`, gap: 1, background: dark ? "rgba(255,255,255,0.12)" : MK_LINE }}>
      {items.map(([k, v, c]) => (
        <div key={k} style={{ background: dark ? MK_INK : "#fff", padding: "11px 13px" }}>
          <MkLabel color={dark ? "rgba(255,255,255,0.45)" : "rgba(10,10,10,0.5)"}>{k}</MkLabel>
          <div style={{ fontStyle: "italic", fontWeight: 900, fontSize: 26, letterSpacing: "-0.02em", marginTop: 3, color: c || (dark ? "#fff" : MK_INK) }}>{v}</div>
        </div>
      ))}
    </div>
  );
}

/* ============ BLEUX — TMS LIVE LOAD BOARD (logistics) ============ */
function MockBleuxTMS({ h }) {
  const STAT = { unassigned: "#ef2b2b", urgent: "#7c3aed", dispatched: "#d97706", complete: MK_BLUE };
  const cols = [
    ["Unassigned", STAT.unassigned, [["LD-4471", "Chicago → Dallas", "12 plt · 28°F"], ["LD-4472", "Milwaukee → KC", "8 plt · 34°F"]]],
    ["Urgent", STAT.urgent, [["LD-4468", "Chicago → Denver", "merge ×2 · 41k lb"]]],
    ["Dispatched", STAT.dispatched, [["LD-4459", "Joliet → Memphis", "T-204 · J. Reyes"], ["LD-4461", "Gary → St. Louis", "T-118 · M. Cole"]]],
    ["Complete", STAT.complete, [["LD-4450", "Chicago → Omaha", "POD signed"]]],
  ];
  return (
    <div style={{ width: "100%", height: h, background: "#fff", borderRadius: 6, overflow: "hidden", display: "flex", flexDirection: "column", fontFamily: MK_SANS, border: "1px solid " + MK_LINE }}>
      <div style={{ padding: "12px 15px", borderBottom: "1px solid " + MK_LINE, display: "flex", justifyContent: "space-between", alignItems: "center" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
          <span style={{ fontStyle: "italic", fontWeight: 900, fontSize: 16, letterSpacing: "-0.01em" }}>BLEUX</span>
          <span style={{ fontFamily: MK_MONO, fontSize: 9, color: "rgba(10,10,10,0.45)", letterSpacing: "0.1em" }}>· LOAD BOARD</span>
        </div>
        <span style={{ fontFamily: MK_MONO, fontSize: 9.5, fontWeight: 700, letterSpacing: "0.08em", color: MK_GREEN }}>● LIVE · DAY VIEW</span>
      </div>
      <div style={{ flex: 1, display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 1, background: MK_LINE, minHeight: 0 }}>
        {cols.map(([name, c, loads]) => (
          <div key={name} style={{ background: MK_PAPER, padding: "9px 8px", display: "flex", flexDirection: "column", gap: 7 }}>
            <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
              <span style={{ width: 7, height: 7, borderRadius: 2, background: c }} />
              <MkLabel style={{ fontSize: 8.5 }}>{name}</MkLabel>
            </div>
            {loads.map(([id, route, meta]) => (
              <div key={id} style={{ background: "#fff", borderLeft: "3px solid " + c, borderRadius: 3, padding: "7px 8px", boxShadow: "0 1px 2px rgba(0,0,0,0.05)" }}>
                <div style={{ fontFamily: MK_MONO, fontSize: 8.5, fontWeight: 700, color: c, letterSpacing: "0.04em" }}>{id}</div>
                <div style={{ fontSize: 10.5, fontWeight: 700, marginTop: 2, color: MK_INK }}>{route}</div>
                <div style={{ fontSize: 9, color: "rgba(10,10,10,0.5)", marginTop: 2 }}>{meta}</div>
              </div>
            ))}
          </div>
        ))}
      </div>
    </div>
  );
}

/* ============ LICENSE OS — operations / fulfillment console ============ */
function MockLicenseOS({ h }) {
  const queue = [
    ["#AG-2291", "AI agency · client onboarding", "Kickoff", "#d97706", 0.3],
    ["#AG-2288", "Voice + chat agent build", "In build", MK_BLUE, 0.7],
    ["#AG-2285", "CRM + automations setup", "QA", MK_BLUE, 0.9],
    ["#AG-2280", "Full agency stack", "Delivered", MK_GREEN, 1],
  ];
  return (
    <div style={{ width: "100%", height: h, background: "#fff", borderRadius: 6, overflow: "hidden", display: "flex", flexDirection: "column", fontFamily: MK_SANS, border: "1px solid " + MK_LINE }}>
      <div style={{ padding: "12px 15px", borderBottom: "1px solid " + MK_LINE, display: "flex", justifyContent: "space-between", alignItems: "center" }}>
        <div style={{ fontStyle: "italic", fontWeight: 900, fontSize: 16 }}>License<span style={{ color: MK_BLUE }}>OS</span></div>
        <MkLabel>fulfillment · ops</MkLabel>
      </div>
      <div style={{ display: "flex", gap: 1, background: MK_LINE }}>
        <div style={{ background: "#fff", padding: "11px 14px", flex: "0 0 36%" }}>
          <MkLabel>clients</MkLabel>
          <div style={{ fontStyle: "italic", fontWeight: 900, fontSize: 26, letterSpacing: "-0.02em", marginTop: 3, color: MK_INK }}>20+</div>
        </div>
        <div style={{ background: "#fff", padding: "11px 14px", flex: 1 }}>
          <MkLabel>focus niches</MkLabel>
          <div style={{ fontWeight: 700, fontSize: 14, marginTop: 7, color: MK_INK }}>Healthcare · Accounting</div>
        </div>
      </div>
      <div style={{ padding: "12px 15px 5px" }}><MkLabel>client fulfillment queue · operated by BVS</MkLabel></div>
      <div style={{ flex: 1, padding: "0 15px", minHeight: 0 }}>
        {queue.map(([id, kind, tag, c, p], i) => (
          <div key={id} style={{ padding: "8px 0", borderBottom: i < queue.length - 1 ? "1px solid " + MK_LINE : "none" }}>
            <div style={{ display: "flex", alignItems: "center", gap: 9 }}>
              <span style={{ fontFamily: MK_MONO, fontSize: 9.5, fontWeight: 700, color: MK_BLUE, width: 64 }}>{id}</span>
              <span style={{ flex: 1, fontSize: 11.5, fontWeight: 600 }}>{kind}</span>
              <span style={{ fontFamily: MK_MONO, fontSize: 8.5, fontWeight: 700, letterSpacing: "0.04em", color: c, textTransform: "uppercase" }}>{tag}</span>
            </div>
            <div style={{ height: 3, background: "rgba(10,10,10,0.08)", borderRadius: 2, marginTop: 6, overflow: "hidden" }}>
              <div style={{ width: (p * 100) + "%", height: "100%", background: c }} />
            </div>
          </div>
        ))}
      </div>
      <div style={{ margin: 15, marginTop: 8, background: MK_PAPER, borderRadius: 8, padding: "10px 13px", display: "flex", alignItems: "center", gap: 9 }}>
        <MkDot /><span style={{ fontSize: 11.5, fontWeight: 600 }}>BVS powers fulfillment, consulting & operations · equity partner</span>
      </div>
    </div>
  );
}

/* ============ CLINIC — AI receptionist live call (portrait, healthcare) ============ */
function MockClinic({ h }) {
  return (
    <div style={{ width: "100%", height: h, background: MK_PAPER, borderRadius: 6, overflow: "hidden", display: "flex", flexDirection: "column", fontFamily: MK_SANS, border: "1px solid " + MK_LINE }}>
      <div style={{ background: MK_BLUE, color: "#fff", padding: "13px 15px", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
        <span style={{ fontStyle: "italic", fontWeight: 900, fontSize: 16 }}>AI Receptionist</span>
        <div style={{ display: "flex", alignItems: "center", gap: 7 }}>
          <MkDot color="#4ade5b" /><span style={{ fontFamily: MK_MONO, fontSize: 10, letterSpacing: "0.08em" }}>00:48</span>
        </div>
      </div>
      <div style={{ padding: "13px 15px 0" }}>
        <MkLabel>incoming · new patient · belgrade</MkLabel>
        <div style={{ display: "flex", alignItems: "center", gap: 10, marginTop: 8 }}>
          <Avatar initials="NN" size={34} color={MK_INK} />
          <div>
            <div style={{ fontWeight: 700, fontSize: 14 }}>+381 (60) 555-0142</div>
            <div style={{ fontFamily: MK_MONO, fontSize: 9, color: "rgba(10,10,10,0.5)", letterSpacing: "0.05em", marginTop: 2 }}>EN · SR detected</div>
          </div>
        </div>
      </div>
      <div style={{ padding: "12px 15px", display: "flex", flexDirection: "column", gap: 7, flex: 1, minHeight: 0 }}>
        {[["ai", "\u201CThanks for calling — how can I help?\u201D"], ["caller", "\u201CI need an appointment for a cleaning.\u201D"], ["ai", "\u201CWe have Thursday 11am or 3pm. Which works?\u201D"]].map(([who, txt], i) => (
          <div key={i} style={{ alignSelf: who === "ai" ? "flex-start" : "flex-end", maxWidth: "88%", background: who === "ai" ? "#fff" : MK_BLUE, color: who === "ai" ? MK_INK : "#fff", border: who === "ai" ? "1px solid " + MK_LINE : "none", padding: "8px 11px", borderRadius: 10, fontSize: 11.5, lineHeight: 1.35, fontWeight: 500 }}>{txt}</div>
        ))}
      </div>
      <div style={{ margin: 15, marginTop: 0, background: "#fff", border: "1px solid " + MK_LINE, borderRadius: 10, padding: "11px 13px", display: "flex", alignItems: "center", gap: 10 }}>
        <div style={{ width: 28, height: 28, borderRadius: "50%", background: MK_GREEN, color: "#fff", display: "grid", placeItems: "center", fontSize: 15, fontWeight: 800 }}>✓</div>
        <div>
          <div style={{ fontWeight: 700, fontSize: 12.5 }}>Appointment booked</div>
          <div style={{ fontFamily: MK_MONO, fontSize: 9, color: "rgba(10,10,10,0.5)", letterSpacing: "0.04em", marginTop: 2 }}>Thu · 11:00 · cleaning · synced</div>
        </div>
      </div>
    </div>
  );
}

/* ============ CLINIC OPS — dashboard (landscape) ============ */
function MockClinicOps({ h }) {
  return (
    <div style={{ width: "100%", height: h, background: "#fff", borderRadius: 6, overflow: "hidden", display: "flex", flexDirection: "column", fontFamily: MK_SANS, border: "1px solid " + MK_LINE }}>
      <div style={{ padding: "11px 14px", borderBottom: "1px solid " + MK_LINE, display: "flex", justifyContent: "space-between", alignItems: "center" }}>
        <div style={{ fontStyle: "italic", fontWeight: 900, fontSize: 15 }}>Clinic · Ops</div>
        <MkLabel>belgrade · 30 days</MkLabel>
      </div>
      <StatRow items={[["Calls answered", "100%", MK_GREEN], ["No-shows", "−41%", MK_GREEN], ["Booked / day", "37"]]} />
      <div style={{ flex: 1, padding: "12px 14px", display: "grid", gridTemplateColumns: "1.3fr 1fr", gap: 14, minHeight: 0 }}>
        <div>
          <MkLabel>bookings / day</MkLabel>
          <div style={{ marginTop: 8 }}><Bars heights={[0.4, 0.55, 0.5, 0.7, 0.65, 0.85, 0.8, 0.95, 1]} h={54} /></div>
        </div>
        <div>
          <MkLabel>insurance auto-verified</MkLabel>
          <div style={{ marginTop: 8 }}><Spark pts={[4, 6, 5, 9, 8, 12, 11, 15]} h={54} color={MK_GREEN} /></div>
        </div>
      </div>
    </div>
  );
}

/* ============ CRM + ANALYTICS CONTROL CENTER (home services / accounting) ============ */
function MockCRM({ h }) {
  return (
    <div style={{ width: "100%", height: h, background: "#fff", borderRadius: 6, overflow: "hidden", display: "flex", flexDirection: "column", fontFamily: MK_SANS, border: "1px solid " + MK_LINE }}>
      <div style={{ padding: "11px 14px", borderBottom: "1px solid " + MK_LINE, display: "flex", justifyContent: "space-between", alignItems: "center" }}>
        <div style={{ fontStyle: "italic", fontWeight: 900, fontSize: 15 }}>Control Center</div>
        <MkLabel>revenue · pipeline</MkLabel>
      </div>
      <StatRow items={[["Pipeline", "$1.4M"], ["Win rate", "32%", MK_GREEN], ["Forecast", "$486K"]]} />
      <div style={{ flex: 1, padding: "12px 14px", minHeight: 0 }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
          <MkLabel>revenue by project</MkLabel>
          <span style={{ fontFamily: MK_MONO, fontSize: 9.5, color: MK_GREEN, fontWeight: 700 }}>▲ 24%</span>
        </div>
        <div style={{ marginTop: 9 }}><Bars heights={[0.45, 0.6, 0.55, 0.75, 0.7, 0.9, 0.82, 1]} h={48} /></div>
        <div style={{ display: "flex", gap: 16, marginTop: 13, paddingTop: 11, borderTop: "1px solid " + MK_LINE }}>
          {[["Leads", "412"], ["Qualified", "188"], ["Booked", "96"]].map(([k, v]) => (
            <div key={k}><MkLabel>{k}</MkLabel><div style={{ fontStyle: "italic", fontWeight: 900, fontSize: 22, marginTop: 2 }}>{v}</div></div>
          ))}
        </div>
      </div>
    </div>
  );
}

/* ============ LEAD REACTIVATION ENGINE (firearm academy) ============ */
function MockReactivation({ h }) {
  const stages = [["Lead", 29000, 1], ["Qualified", 8200, 0.5], ["Booked", 2400, 0.28], ["Attended", 1600, 0.18], ["Upsell", 940, 0.1]];
  return (
    <div style={{ width: "100%", height: h, background: MK_INK, color: MK_PAPER, borderRadius: 6, overflow: "hidden", display: "flex", flexDirection: "column", fontFamily: MK_SANS }}>
      <div style={{ padding: "11px 15px", borderBottom: "1px solid rgba(255,255,255,0.1)", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
        <div style={{ fontStyle: "italic", fontWeight: 900, fontSize: 15 }}>Reactivation Engine</div>
        <span style={{ fontFamily: MK_MONO, fontSize: 9, letterSpacing: "0.1em", color: "#4ade5b" }}>● 29,000 LEADS</span>
      </div>
      <div style={{ flex: 1, padding: "14px 16px", display: "flex", flexDirection: "column", gap: 9, justifyContent: "center" }}>
        {stages.map(([name, n, w]) => (
          <div key={name} style={{ display: "flex", alignItems: "center", gap: 11 }}>
            <span style={{ width: 64, fontFamily: MK_MONO, fontSize: 9.5, letterSpacing: "0.06em", color: "rgba(255,255,255,0.6)", textTransform: "uppercase" }}>{name}</span>
            <div style={{ flex: 1, height: 22, background: "rgba(255,255,255,0.06)", borderRadius: 3, overflow: "hidden" }}>
              <div style={{ width: (w * 100) + "%", height: "100%", background: name === "Upsell" ? "#4ade5b" : MK_BLUE, opacity: name === "Upsell" ? 1 : 0.55 + w * 0.4, display: "flex", alignItems: "center", paddingLeft: 9, borderRadius: 3 }}>
                <span style={{ fontSize: 10.5, fontWeight: 700, color: "#fff" }}>{n.toLocaleString()}</span>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

/* ============ RESULTS / performance (reusable, dark) ============ */
function MockResults({ h, stats, pts }) {
  return (
    <div style={{ width: "100%", height: h, background: MK_INK, color: MK_PAPER, borderRadius: 6, overflow: "hidden", display: "flex", flexDirection: "column", fontFamily: MK_SANS }}>
      <div style={{ padding: "11px 15px", borderBottom: "1px solid rgba(255,255,255,0.1)", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
        <div style={{ fontStyle: "italic", fontWeight: 900, fontSize: 15 }}>Performance</div>
        <span style={{ fontFamily: MK_MONO, fontSize: 9.5, letterSpacing: "0.1em", color: "#4ade5b" }}>● 90-day</span>
      </div>
      <StatRow dark items={(stats || [["Inbound", "+38%"], ["No-show", "−47%"], ["Recovered", "$310K"]]).map(([k, v]) => [k, v, "#4ade5b"])} />
      <div style={{ flex: 1, padding: "12px 15px", minHeight: 0 }}>
        <MkLabel color="rgba(255,255,255,0.45)">monthly recovered revenue</MkLabel>
        <div style={{ marginTop: 10 }}><Spark pts={pts || [20, 28, 26, 40, 52, 60, 75, 88, 96, 118]} color="#4ade5b" h={56} /></div>
      </div>
    </div>
  );
}

/* ============ MEDIA — content & distribution analytics (BMG) ============ */
function MockMediaDash({ h }) {
  return (
    <div style={{ width: "100%", height: h, background: "#fff", borderRadius: 6, overflow: "hidden", display: "flex", flexDirection: "column", fontFamily: MK_SANS, border: "1px solid " + MK_LINE }}>
      <div style={{ padding: "11px 14px", borderBottom: "1px solid " + MK_LINE, display: "flex", justifyContent: "space-between", alignItems: "center" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
          <span style={{ fontStyle: "italic", fontWeight: 900, fontSize: 15 }}>BMG · Distribution</span>
        </div>
        <MkLabel>all platforms</MkLabel>
      </div>
      <StatRow items={[["Views / mo", "84.2M"], ["Clips live", "1,140"], ["Accounts", "120+"]]} />
      <div style={{ flex: 1, padding: "12px 14px", display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 14, minHeight: 0 }}>
        <div>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline" }}><MkLabel>views / day</MkLabel><span style={{ fontFamily: MK_MONO, fontSize: 9.5, color: MK_GREEN, fontWeight: 700 }}>▲ 31%</span></div>
          <div style={{ marginTop: 8 }}><Bars heights={[0.35, 0.5, 0.45, 0.65, 0.6, 0.8, 0.72, 0.92, 0.85, 1]} h={54} /></div>
        </div>
        <div>
          <MkLabel>platforms</MkLabel>
          <div style={{ marginTop: 10, display: "flex", flexDirection: "column", gap: 7 }}>
            {[["TikTok", "32M"], ["Reels", "28M"], ["Shorts", "19M"], ["X", "5M"]].map(([p, v]) => (
              <div key={p} style={{ display: "flex", justifyContent: "space-between", fontSize: 11, fontWeight: 600 }}><span style={{ color: "rgba(10,10,10,0.6)" }}>{p}</span><span>{v}</span></div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

/* ============ GENERIC AI AGENT CHAT (English, portrait) ============ */
function MockAgentChat({ h, title = "AI Client Agent", tag = "incoming · new lead", lines, badge = { title: "Appointment booked", meta: "Thu · 11:30am · synced to CRM" } }) {
  const convo = lines || [["ai", "\u201CThanks for reaching out — how can I help today?\u201D"], ["caller", "\u201CCan I get a quote and a time this week?\u201D"], ["ai", "\u201CAbsolutely — Thursday 11:30am or 2pm works. Which suits you?\u201D"]];
  return (
    <div style={{ width: "100%", height: h, background: MK_PAPER, borderRadius: 6, overflow: "hidden", display: "flex", flexDirection: "column", fontFamily: MK_SANS, border: "1px solid " + MK_LINE }}>
      <div style={{ background: MK_BLUE, color: "#fff", padding: "13px 15px", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
        <span style={{ fontStyle: "italic", fontWeight: 900, fontSize: 16 }}>{title}</span>
        <div style={{ display: "flex", alignItems: "center", gap: 7 }}><MkDot color="#4ade5b" /><span style={{ fontFamily: MK_MONO, fontSize: 10, letterSpacing: "0.08em" }}>live</span></div>
      </div>
      <div style={{ padding: "13px 15px 0" }}>
        <MkLabel>{tag}</MkLabel>
        <div style={{ display: "flex", alignItems: "center", gap: 10, marginTop: 8 }}>
          <Avatar initials="—" size={34} color={MK_INK} />
          <div>
            <div style={{ fontWeight: 700, fontSize: 14 }}>+1 (305) 555-0148</div>
            <div style={{ fontFamily: MK_MONO, fontSize: 9, color: "rgba(10,10,10,0.5)", letterSpacing: "0.05em", marginTop: 2 }}>auto-qualifying · 0.8s</div>
          </div>
        </div>
      </div>
      <div style={{ padding: "12px 15px", display: "flex", flexDirection: "column", gap: 7, flex: 1, minHeight: 0 }}>
        {convo.map(([who, txt], i) => (
          <div key={i} style={{ alignSelf: who === "ai" ? "flex-start" : "flex-end", maxWidth: "88%", background: who === "ai" ? "#fff" : MK_BLUE, color: who === "ai" ? MK_INK : "#fff", border: who === "ai" ? "1px solid " + MK_LINE : "none", padding: "8px 11px", borderRadius: 10, fontSize: 11.5, lineHeight: 1.35, fontWeight: 500 }}>{txt}</div>
        ))}
      </div>
      <div style={{ margin: 15, marginTop: 0, background: "#fff", border: "1px solid " + MK_LINE, borderRadius: 10, padding: "11px 13px", display: "flex", alignItems: "center", gap: 10 }}>
        <div style={{ width: 28, height: 28, borderRadius: "50%", background: MK_GREEN, color: "#fff", display: "grid", placeItems: "center", fontSize: 15, fontWeight: 800 }}>✓</div>
        <div>
          <div style={{ fontWeight: 700, fontSize: 12.5 }}>{badge.title}</div>
          <div style={{ fontFamily: MK_MONO, fontSize: 9, color: "rgba(10,10,10,0.5)", letterSpacing: "0.04em", marginTop: 2 }}>{badge.meta}</div>
        </div>
      </div>
    </div>
  );
}

const MOCKS = {
  "bleux-tms": MockBleuxTMS,
  "license-os": MockLicenseOS,
  "clinic-call": MockClinic,
  "clinic-ops": MockClinicOps,
  "agent-chat": MockAgentChat,
  "crm": MockCRM,
  "reactivation": MockReactivation,
  "results": MockResults,
  "media-dash": MockMediaDash,
};

Object.assign(window, {
  MOCKS, MockBleuxTMS, MockLicenseOS, MockClinic, MockClinicOps, MockAgentChat,
  MockCRM, MockReactivation, MockResults, MockMediaDash, FloatCard,
});