// Demo scenes 6-9 + closing — English, USD only
const { motion: m2 } = window;
const D2 = () => window.SOKO_DATA;
const sup2 = (id) => D2().suppliers.find(s => s.id === id);
const prod2 = (id) => D2().products.find(p => p.id === id);
const fwd2 = (id) => D2().forwarders.find(f => f.id === id);
const pl2 = (id) => D2().threePls.find(p => p.id === id);

// ====== SCENE 6: Cart with MOQ nudge ======
function Scene6Cart({ progress }) {
  const showNudge = progress > 0.35;

  const groups = [
    { sup: sup2("sup-03"), product: prod2("p-01"), qty: 38, unit: 6.65, moq: 50, met: false },
    { sup: sup2("sup-01"), product: prod2("p-02"), qty: 100, unit: 3.85, moq: 100, met: true },
    { sup: sup2("sup-04"), product: prod2("p-03"), qty: 100, unit: 3.05, moq: 100, met: true },
  ];
  const subtotalUsd = (38 * 6.65 + 100 * 3.85 + 100 * 3.05);

  return (
    <div style={{ position: "absolute", inset: 0, display: "flex", flexDirection: "column" }}>
      <div style={{ padding: "12px 18px 8px", display: "flex", justifyContent: "space-between", alignItems: "center", borderBottom: "1px solid #f5f5f4" }}>
        <div style={{ fontSize: 15, fontWeight: 600, color: "#1c1917" }}>Your cart · 3 suppliers</div>
        <window.CurrencyToggle value="USD" />
      </div>

      <div style={{ flex: 1, padding: "10px 14px", display: "flex", flexDirection: "column", gap: 10, overflow: "hidden" }}>
        {groups.map((g, i) => (
          <div key={g.sup.id} style={{ background: "#fff", border: "1px solid #f5f5f4", borderRadius: 10, overflow: "hidden" }}>
            <div style={{
              display: "flex", justifyContent: "space-between", alignItems: "center",
              padding: "8px 10px", background: "#fafaf9", borderBottom: "1px solid #f5f5f4",
              fontSize: 10, fontFamily: "ui-monospace, monospace", color: "#78716c",
            }}>
              <span>GROUP {i + 1} · {g.sup.name}</span>
              {g.met && <window.Chip tone="teal" icon={<svg width="8" height="8" viewBox="0 0 12 12"><path d="M2 6L5 9L10 3" stroke="currentColor" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round" /></svg>}>MOQ ✓</window.Chip>}
            </div>
            <div style={{ display: "flex", padding: 10, gap: 10 }}>
              <div style={{ width: 50, flexShrink: 0 }}>
                <window.ProductPlaceholder product={g.product} height={50} label={null} />
              </div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 12, fontWeight: 600, color: "#1c1917", lineHeight: 1.3 }}>{g.product.en}</div>
                <div style={{
                  marginTop: 5, fontSize: 10, fontFamily: "ui-monospace, monospace",
                  display: "flex", justifyContent: "space-between", color: "#57534e",
                }}>
                  <span>{g.qty} u × ${g.unit.toFixed(2)}</span>
                  <span style={{ fontWeight: 600, color: "#1c1917" }}>${(g.qty * g.unit).toFixed(2)}</span>
                </div>
              </div>
            </div>

            {i === 0 && showNudge && (
              <m2.div
                initial={{ opacity: 0, scale: 0.9 }}
                animate={{ opacity: 1, scale: [0.9, 1.04, 1] }}
                transition={{ duration: 0.5 }}
                style={{
                  margin: "0 10px 10px",
                  padding: "9px 11px",
                  background: "linear-gradient(180deg, oklch(0.97 0.03 50), oklch(0.94 0.04 50))",
                  border: "1px solid oklch(0.85 0.08 50)",
                  borderRadius: 8,
                  display: "flex", gap: 8, alignItems: "center",
                }}
              >
                <div style={{
                  width: 24, height: 24, flexShrink: 0,
                  background: "oklch(0.55 0.16 40)", borderRadius: 6,
                  display: "flex", alignItems: "center", justifyContent: "center",
                }}>
                  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#fafaf9" strokeWidth="2.5">
                    <path d="M12 2v20M2 12h20" strokeLinecap="round" />
                  </svg>
                </div>
                <div style={{ flex: 1, fontSize: 11, lineHeight: 1.35, color: "#1c1917" }}>
                  Add <b>12 more</b> to hit <b>50u</b> and drop to <b>$5.80/u</b>.
                  <span style={{ display: "block", color: "oklch(0.42 0.16 40)", fontWeight: 600, marginTop: 2, fontFamily: "ui-monospace, monospace", fontSize: 10 }}>
                    Save $52 USD →
                  </span>
                </div>
              </m2.div>
            )}
          </div>
        ))}
      </div>

      <div style={{
        padding: "10px 18px 12px", borderTop: "1px solid #f5f5f4", background: "#fff",
      }}>
        <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 8, fontFamily: "ui-monospace, monospace" }}>
          <span style={{ fontSize: 11, color: "#78716c" }}>Subtotal</span>
          <span style={{ fontSize: 13, fontWeight: 700, color: "#1c1917" }}>${subtotalUsd.toFixed(2)} USD</span>
        </div>
        <div style={{ display: "flex", gap: 8 }}>
          <button style={{
            flex: 1, padding: "10px 0", border: "1px solid #e7e5e4",
            background: "#fafaf9", color: "#57534e", borderRadius: 8, fontSize: 12, fontWeight: 500,
          }}>Export CSV</button>
          <button style={{
            flex: 2, padding: "10px 0", border: "none",
            background: "oklch(0.55 0.16 40)", color: "#fafaf9", borderRadius: 8,
            fontSize: 12, fontWeight: 600,
          }}>Continue to logistics →</button>
        </div>
      </div>
    </div>
  );
}

// ====== SCENE 7: Forwarder selection ======
function Scene7Forwarder({ progress }) {
  const fwd = fwd2("fwd-01");
  const alts = [fwd2("fwd-02"), fwd2("fwd-03")];
  const sourceCount = Math.min(3, Math.floor((progress - 0.2) * 8));

  return (
    <div style={{ position: "absolute", inset: 0, display: "flex", flexDirection: "column" }}>
      <div style={{ padding: "12px 18px 10px", borderBottom: "1px solid #f5f5f4" }}>
        <div style={{ fontSize: 14, fontWeight: 600, color: "#1c1917" }}>Available forwarders</div>
        <div style={{ fontSize: 10, color: "#78716c", fontFamily: "ui-monospace, monospace", marginTop: 2 }}>
          Guangdong → Mexico · 250 u · 0.8 m³
        </div>
      </div>

      <div style={{ flex: 1, padding: "10px 14px", overflow: "hidden", display: "flex", flexDirection: "column", gap: 10 }}>
        <m2.div
          initial={{ opacity: 0, y: 6 }} animate={{ opacity: 1, y: 0 }}
          style={{
            background: "#fff", borderRadius: 10,
            border: "1.5px solid oklch(0.55 0.16 40)",
            padding: 12,
          }}>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", gap: 8 }}>
            <div style={{ flex: 1 }}>
              <div style={{ display: "flex", alignItems: "center", gap: 6, marginBottom: 4 }}>
                <window.SokoMark size={14} />
                <span style={{ fontSize: 9, fontFamily: "ui-monospace, monospace", color: "oklch(0.42 0.16 40)", letterSpacing: 0.5, fontWeight: 600 }}>RECOMMENDED BY SOKO</span>
              </div>
              <div style={{ fontSize: 13, fontWeight: 600, color: "#1c1917" }}>{fwd.name}</div>
            </div>
            <div style={{ textAlign: "right", fontFamily: "ui-monospace, monospace" }}>
              <div style={{ fontSize: 13, fontWeight: 700, color: "#1c1917" }}>{fwd.sentiment}<span style={{ fontSize: 9, color: "#78716c", fontWeight: 400 }}>/100</span></div>
              <div style={{ fontSize: 8, color: "#78716c", letterSpacing: 0.3 }}>SENTIMENT</div>
            </div>
          </div>
          <div style={{ display: "flex", gap: 5, marginTop: 8, flexWrap: "wrap" }}>
            <window.Chip>{fwd.city}</window.Chip>
            {fwd.modes.map(m => <window.Chip key={m} tone="navy">{m}</window.Chip>)}
            <window.Chip tone="primary">★ {fwd.founderRating}</window.Chip>
          </div>

          <div style={{ marginTop: 10, fontSize: 9, fontFamily: "ui-monospace, monospace", color: "#78716c", letterSpacing: 0.5, marginBottom: 5 }}>
            EVIDENCE · {sourceCount}/3 sources
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
            {fwd.sources.slice(0, sourceCount).map((s, i) => (
              <m2.div key={i}
                initial={{ opacity: 0, y: 6 }} animate={{ opacity: 1, y: 0 }}
                transition={{ delay: i * 0.05 }}
                style={{
                  padding: "8px 10px", background: "#fafaf9",
                  border: "1px solid #f5f5f4", borderRadius: 7,
                }}>
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 4 }}>
                  <div style={{ display: "flex", alignItems: "center", gap: 5, fontSize: 9, fontFamily: "ui-monospace, monospace", color: "#57534e" }}>
                    <span style={{ width: 10, height: 10, background: "oklch(0.92 0.02 220)", borderRadius: 2, display: "inline-flex", alignItems: "center", justifyContent: "center", color: "oklch(0.45 0.10 220)", fontSize: 7, fontWeight: 700 }}>
                      {s.channel.startsWith("t.me") ? "tg" : "f"}
                    </span>
                    <span style={{ fontWeight: 600 }}>{s.channel}</span>
                    <span style={{ color: "#a8a29e" }}>· {s.subs}</span>
                  </div>
                  <window.SentimentDot polarity={s.polarity} />
                </div>
                <div style={{ fontSize: 10.5, color: "#1c1917", lineHeight: 1.4 }}>"{s.quote}"</div>
                <div title={`Scraped ${s.scrapedAt}`} style={{ marginTop: 4, fontSize: 8, color: "#a8a29e", fontFamily: "ui-monospace, monospace" }}>
                  scraped {s.scrapedAt}
                </div>
              </m2.div>
            ))}
          </div>

          <div style={{ marginTop: 10 }}>
            <window.VettedBadge date="Feb 2026" />
          </div>
        </m2.div>

        <div style={{ display: "flex", flexDirection: "column", gap: 5 }}>
          {alts.map(a => (
            <div key={a.id} style={{
              padding: "8px 10px", background: "#fafaf9",
              border: "1px solid #f5f5f4", borderRadius: 7,
              display: "flex", justifyContent: "space-between", alignItems: "center",
            }}>
              <div>
                <div style={{ fontSize: 11, fontWeight: 600, color: "#1c1917" }}>{a.name}</div>
                <div style={{ fontSize: 9, color: "#78716c", fontFamily: "ui-monospace, monospace" }}>{a.city} · {a.modes.join("/")}</div>
              </div>
              <div style={{ fontFamily: "ui-monospace, monospace", fontSize: 11, color: "#57534e" }}>{a.sentiment}/100</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

// ====== SCENE 8: 3PL ======
function Scene8ThreePL({ progress }) {
  const pl = pl2("pl-04");
  return (
    <div style={{ position: "absolute", inset: 0, display: "flex", flexDirection: "column" }}>
      <div style={{ padding: "12px 18px 8px", borderBottom: "1px solid #f5f5f4" }}>
        <div style={{ fontSize: 14, fontWeight: 600, color: "#1c1917" }}>Fulfillment in Mexico</div>
        <div style={{ fontSize: 10, color: "#78716c", fontFamily: "ui-monospace, monospace", marginTop: 2 }}>
          Ship to Mercado Libre · 250 u
        </div>
      </div>

      <div style={{ padding: "10px 14px 8px", display: "flex", gap: 6, flexWrap: "wrap", borderBottom: "1px solid #f5f5f4" }}>
        <span style={{
          padding: "4px 9px", borderRadius: 5,
          background: "#1c1917", color: "#fafaf9", fontSize: 10,
          fontFamily: "ui-monospace, monospace", display: "inline-flex", alignItems: "center", gap: 4,
        }}>
          <svg width="9" height="9" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.5">
            <path d="M6 11s4-3.5 4-7a4 4 0 10-8 0c0 3.5 4 7 4 7z" /><circle cx="6" cy="4.5" r="1.2" />
          </svg>
          Guadalajara
        </span>
        <window.Chip tone="primary">Repack</window.Chip>
        <window.Chip tone="primary">NOM</window.Chip>
        <window.Chip tone="primary">Photography</window.Chip>
      </div>

      <div style={{ flex: 1, padding: "12px 14px", overflow: "hidden" }}>
        <m2.div
          initial={{ opacity: 0, y: 6 }} animate={{ opacity: 1, y: 0 }}
          style={{
            background: "#fff", borderRadius: 10,
            border: "1.5px solid oklch(0.55 0.16 40)",
            padding: 12,
          }}>
          <div style={{ display: "flex", alignItems: "center", gap: 6, marginBottom: 4 }}>
            <window.SokoMark size={14} />
            <span style={{ fontSize: 9, fontFamily: "ui-monospace, monospace", color: "oklch(0.42 0.16 40)", letterSpacing: 0.5, fontWeight: 600 }}>CITY MATCH</span>
          </div>
          <div style={{ fontSize: 14, fontWeight: 600, color: "#1c1917" }}>{pl.name}</div>
          <div style={{ fontSize: 10, color: "#78716c", fontFamily: "ui-monospace, monospace", marginTop: 2 }}>
            {pl.city} · 0 km from Maria · ★ {pl.rating} · sentiment {pl.sentiment}/100
          </div>

          <div style={{ marginTop: 10, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 6 }}>
            {[
              ["Repackaging", true], ["Translation", true],
              ["NOM Compliance", true], ["Photography", true],
              ["MELI sync", false], ["Bonded WH", false],
            ].map(([label, on]) => (
              <div key={label} style={{
                padding: "6px 8px",
                background: on ? "oklch(0.96 0.02 180)" : "#fafaf9",
                border: `1px solid ${on ? "oklch(0.88 0.04 180)" : "#f5f5f4"}`,
                borderRadius: 6,
                display: "flex", alignItems: "center", gap: 5,
                fontSize: 10, fontFamily: "ui-monospace, monospace",
                color: on ? "oklch(0.42 0.08 180)" : "#a8a29e",
              }}>
                <svg width="10" height="10" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.8">
                  {on ? <path d="M2 6L5 9L10 3" strokeLinecap="round" /> : <path d="M3 3l6 6M9 3l-6 6" strokeLinecap="round" />}
                </svg>
                {label}
              </div>
            ))}
          </div>

          <div style={{ marginTop: 12 }}>
            <div style={{ display: "flex", justifyContent: "space-between", fontSize: 9, fontFamily: "ui-monospace, monospace", color: "#78716c", marginBottom: 4 }}>
              <span>CAPACITY</span>
              <span>9,500 u/mo · 62% used</span>
            </div>
            <div style={{ height: 5, background: "#f5f5f4", borderRadius: 3, overflow: "hidden" }}>
              <m2.div
                initial={{ width: 0 }} animate={{ width: "62%" }}
                transition={{ duration: 1, delay: 0.3 }}
                style={{ height: "100%", background: "oklch(0.55 0.16 40)" }} />
            </div>
          </div>

          <div style={{ marginTop: 12, display: "flex", justifyContent: "space-between", alignItems: "center" }}>
            <window.VettedBadge date="Mar 2026" />
            <div style={{ textAlign: "right" }}>
              <div style={{ fontSize: 9, color: "#78716c", fontFamily: "ui-monospace, monospace" }}>EST. FOR 250u</div>
              <div style={{ fontSize: 14, fontWeight: 700, color: "#1c1917", fontFamily: "ui-monospace, monospace" }}>$480 USD</div>
            </div>
          </div>
        </m2.div>
      </div>
    </div>
  );
}

// ====== SCENE 9: Order tracking + P&L ======
function Scene9Tracking({ progress }) {
  const stages = [
    { label: "Order confirmed", status: "done", date: "Mar 12", time: "14:22" },
    { label: "In transit · Pacific Cargo", status: "done", date: "Mar 18", time: "08:10" },
    { label: "MX Customs", status: "active", date: "expected Apr 12" },
    { label: "Bajio 3PL · NOM + repack", status: "pending", date: "" },
  ];
  const margins = [
    { sup: "Hanyu", pct: 41 },
    { sup: "Yuelong", pct: 36 },
    { sup: "Mingxin", pct: 33 },
  ];

  return (
    <div style={{ position: "absolute", inset: 0, display: "flex", flexDirection: "column", padding: "12px 18px" }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 12 }}>
        <div style={{ fontSize: 14, fontWeight: 600, color: "#1c1917" }}>Order #SK-2026-0142</div>
        <window.Chip tone="primary">IN PROGRESS</window.Chip>
      </div>

      <div style={{ display: "flex", flexDirection: "column", gap: 0, marginBottom: 14 }}>
        {stages.map((st, i) => (
          <m2.div key={i}
            initial={{ opacity: 0, x: -6 }} animate={{ opacity: 1, x: 0 }}
            transition={{ delay: i * 0.1 }}
            style={{ display: "flex", gap: 10, alignItems: "flex-start" }}>
            <div style={{ display: "flex", flexDirection: "column", alignItems: "center", paddingTop: 2 }}>
              <div style={{
                width: 14, height: 14, borderRadius: 7,
                background: st.status === "done" ? "oklch(0.42 0.08 180)" : st.status === "active" ? "oklch(0.55 0.16 40)" : "#e7e5e4",
                display: "flex", alignItems: "center", justifyContent: "center",
                color: "#fafaf9", fontSize: 8,
              }}>
                {st.status === "done" && <svg width="8" height="8" viewBox="0 0 12 12"><path d="M2 6L5 9L10 3" stroke="currentColor" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round" /></svg>}
                {st.status === "active" && <m2.span animate={{ opacity: [0.4, 1, 0.4] }} transition={{ duration: 1.5, repeat: Infinity }} style={{ width: 5, height: 5, borderRadius: 3, background: "#fafaf9" }} />}
              </div>
              {i < stages.length - 1 && <div style={{ width: 1.5, height: 22, background: st.status === "done" ? "oklch(0.42 0.08 180)" : "#e7e5e4" }} />}
            </div>
            <div style={{ flex: 1, paddingBottom: 12 }}>
              <div style={{ fontSize: 11.5, fontWeight: 600, color: st.status === "pending" ? "#a8a29e" : "#1c1917" }}>{st.label}</div>
              {st.date && <div style={{ fontSize: 9, color: "#78716c", fontFamily: "ui-monospace, monospace", marginTop: 1 }}>{st.date}{st.time ? ` · ${st.time}` : ""}</div>}
            </div>
          </m2.div>
        ))}
      </div>

      <m2.div
        initial={{ opacity: 0, y: 8 }} animate={{ opacity: 1, y: 0 }}
        transition={{ delay: 0.4 }}
        style={{
          background: "#fff", border: "1px solid #f5f5f4", borderRadius: 10, padding: 12,
        }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 8 }}>
          <div style={{ fontSize: 11, fontWeight: 600, color: "#1c1917" }}>Margin per SKU</div>
          <span style={{ fontSize: 9, color: "#78716c", fontFamily: "ui-monospace, monospace" }}>projection</span>
        </div>
        <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
          {margins.map((m, i) => (
            <div key={m.sup}>
              <div style={{ display: "flex", justifyContent: "space-between", fontSize: 10, fontFamily: "ui-monospace, monospace", color: "#57534e", marginBottom: 3 }}>
                <span>{m.sup}</span>
                <span style={{ color: "#1c1917", fontWeight: 600 }}>{m.pct}%</span>
              </div>
              <div style={{ height: 6, background: "#f5f5f4", borderRadius: 3, overflow: "hidden" }}>
                <m2.div
                  initial={{ width: 0 }} animate={{ width: `${m.pct * 2}%` }}
                  transition={{ duration: 0.8, delay: 0.5 + i * 0.1 }}
                  style={{ height: "100%", background: "oklch(0.55 0.16 40)" }} />
              </div>
            </div>
          ))}
        </div>
        <div style={{ marginTop: 10, padding: "8px 0 0", borderTop: "1px solid #f5f5f4", fontSize: 10, color: "#78716c", fontFamily: "ui-monospace, monospace" }}>
          Next order suggested in <span style={{ color: "#1c1917", fontWeight: 600 }}>32 days</span> · 90d ROI: <span style={{ color: "oklch(0.42 0.16 40)", fontWeight: 600 }}>+18%</span>
        </div>
      </m2.div>

      <div style={{ marginTop: "auto", paddingTop: 12 }}>
        <m2.button
          animate={{ scale: [1, 1.03, 1] }}
          transition={{ duration: 2, repeat: Infinity }}
          style={{
            width: "100%", padding: "12px 0", border: "none",
            background: "oklch(0.55 0.16 40)", color: "#fafaf9", borderRadius: 10,
            fontSize: 13, fontWeight: 600,
            boxShadow: "0 8px 24px -8px oklch(0.55 0.16 40 / 0.4)",
          }}>
          Start your first order →
        </m2.button>
      </div>
    </div>
  );
}

// ====== CLOSING investor card ======
function ClosingCard() {
  const c = D2().closing;
  return (
    <div style={{
      maxWidth: 414, width: "100%", padding: "32px 28px",
      color: "#fafaf9", fontFamily: "inherit",
    }}>
      <window.SokoWordmark size={36} color="#fafaf9" />
      <div style={{
        marginTop: 24, fontSize: 26, lineHeight: 1.2,
        fontFamily: "'Inter', -apple-system, sans-serif",
        fontWeight: 600,
        color: "#fafaf9",
      }}>
        {c.headline}
      </div>

      <div style={{ marginTop: 28, display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 12 }}>
        {Object.entries(c.tam).map(([k, v]) => (
          <div key={k}>
            <div style={{ fontSize: 9, color: "rgba(250,250,249,0.5)", fontFamily: "ui-monospace, monospace", letterSpacing: 0.5, textTransform: "uppercase" }}>{k}</div>
            <div style={{ fontSize: 16, fontWeight: 600, marginTop: 3 }}>{v}</div>
          </div>
        ))}
      </div>

      <div style={{ marginTop: 28 }}>
        <div style={{ fontSize: 10, color: "rgba(250,250,249,0.5)", fontFamily: "ui-monospace, monospace", letterSpacing: 0.5, marginBottom: 10 }}>REVENUE STREAMS</div>
        {c.revenue.map(r => (
          <div key={r.label} style={{
            display: "flex", justifyContent: "space-between",
            padding: "10px 0", borderBottom: "1px solid rgba(250,250,249,0.1)",
            fontSize: 12,
          }}>
            <span>{r.label}</span>
            <span style={{ fontFamily: "ui-monospace, monospace", color: "oklch(0.85 0.10 50)" }}>{r.pct}</span>
          </div>
        ))}
      </div>

      <div style={{ marginTop: 24 }}>
        <div style={{ fontSize: 10, color: "rgba(250,250,249,0.5)", fontFamily: "ui-monospace, monospace", letterSpacing: 0.5, marginBottom: 8 }}>MOAT</div>
        {c.moat.map((m, i) => (
          <div key={i} style={{ fontSize: 12, marginTop: 6, display: "flex", gap: 8, alignItems: "flex-start" }}>
            <span style={{ color: "oklch(0.85 0.10 50)" }}>·</span>
            <span style={{ color: "rgba(250,250,249,0.85)" }}>{m}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, { Scene6Cart, Scene7Forwarder, Scene8ThreePL, Scene9Tracking, ClosingCard });