/* global React, window */
// =====================================================================
// CRO · Ejecutivos — analytics ejecutivo de margen de contribución.
// Lee windmar-marketing (RPCs cro_month / cro_winloss / cro_product / cro_lead_status).
// CM real por producto via __CRO_ECON; blended a nivel mes/canal. Filtro por canal.
// =====================================================================
(function () {
  const { useState, useEffect, useMemo } = React;

  if (window.i18n) {
    if (window.i18n.es && window.i18n.es.tabs) window.i18n.es.tabs.ejecutivos = "Ejecutivos";
    if (window.i18n.en && window.i18n.en.tabs) window.i18n.en.tabs.ejecutivos = "Executive";
  }

  const ECON = window.__CRO_ECON || {};
  const BLENDED_CM = 2000;
  const isSales = (p) => p !== "careers" && p !== "awareness";
  // lee window.__CRO_ECON EN VIVO (lo refresca el RPC cro_unit_economics); baked solo fallback.
  const cmFor = (p) => { const E = window.__CRO_ECON || ECON || {}; return isSales(p) ? Number((E[p] && E[p].cm_usd) || BLENDED_CM) : 0; };
  const money = (n) => (n == null ? "—" : (n < 0 ? "-$" : "$") + Math.abs(Math.round(n)).toLocaleString("en-US"));
  const pct = (n) => (n == null ? "—" : (n * 100).toFixed(1) + "%");
  const MES = ["ene", "feb", "mar", "abr", "may", "jun", "jul", "ago", "sep", "oct", "nov", "dic"];
  const NAVY = "var(--wm-blue,#1D429B)", ORANGE = "var(--wm-orange,#F89B24)";
  const GREEN = "var(--op-green,#1f9d57)", RED = "var(--op-red,#d23b3b)", AMBER = "var(--op-amber,#F89B24)";

  // Zoho Lead_Status → bucket
  const BUCKET = {
    "Caso Vendido": "vendido", "Caso Vendido sin Match": "vendido",
    "Credit Fail": "credit",
    "DQ o No le Interesa": "perdido", "Junk Lead": "perdido", "No Contesta": "perdido", "Lead Frio": "perdido",
  };
  const bucketOf = (s) => BUCKET[s] || "proceso"; // citas / seguimiento / nuevo → en proceso
  const BUCKET_META = {
    vendido: { label: "Vendido", color: GREEN },
    proceso: { label: "En proceso", color: NAVY },
    credit: { label: "Credit Fail", color: AMBER },
    perdido: { label: "Perdido", color: RED },
  };

  // dateRange (preset string o {from,to}) → {from,to} ISO. Espeja la lógica del DateRangePicker.
  const fmtISO = (d) => d.toISOString().slice(0, 10);
  function resolveRange(dr) {
    const today = new Date(); const t = fmtISO(today);
    if (dr && typeof dr === "object" && dr.from && dr.to) return { from: dr.from, to: dr.to };
    switch (dr) {
      case "today": return { from: t, to: t };
      case "7d": return { from: fmtISO(new Date(Date.now() - 6 * 864e5)), to: t };
      case "30d": return { from: fmtISO(new Date(Date.now() - 29 * 864e5)), to: t };
      case "90d": return { from: fmtISO(new Date(Date.now() - 89 * 864e5)), to: t };
      case "mtd": return { from: fmtISO(new Date(today.getFullYear(), today.getMonth(), 1)), to: t };
      case "qtd": { const q = Math.floor(today.getMonth() / 3) * 3; return { from: fmtISO(new Date(today.getFullYear(), q, 1)), to: t }; }
      default: return { from: fmtISO(new Date(Date.now() - 29 * 864e5)), to: t };
    }
  }
  // "2026-05-20" → "20 may"  ·  con año si difiere
  const lblDate = (iso, withYear) => {
    const [y, m, d] = iso.split("-"); return Number(d) + " " + MES[Number(m) - 1] + (withYear ? " " + y : "");
  };
  const rangeLabel = (r) => {
    const sameY = r.from.slice(0, 4) === r.to.slice(0, 4);
    return lblDate(r.from, !sameY) + " – " + lblDate(r.to, true);
  };

  function ExecView({ lang = "es", dateRange = "90d" }) {
    const es = lang === "es";
    const [month, setMonth] = useState(null);
    const [winloss, setWinloss] = useState(null);
    const [product, setProduct] = useState(null);
    const [leadStatus, setLeadStatus] = useState(null);
    const [totals, setTotals] = useState(null);
    const [err, setErr] = useState(false);
    const [ch, setCh] = useState("all"); // all | meta | google
    const [econV, setEconV] = useState(0); // bump cuando carga econ en vivo

    const range = useMemo(() => resolveRange(dateRange), [dateRange]);
    const rLabel = rangeLabel(range);

    // Unit economics EN VIVO → window.__CRO_ECON (mata el hardcodeado); baked solo rellena.
    useEffect(() => {
      if (window.wm && window.wm.ready && window.wm.croEconomics) {
        window.wm.croEconomics().then((ec) => {
          if (ec && Object.keys(ec).length) { window.__CRO_ECON = Object.assign({}, window.__CRO_ECON, ec); setEconV((v) => v + 1); }
        });
      }
    }, []);

    useEffect(() => {
      if (!(window.wm && window.wm.ready && window.wm.croExec)) { setErr(true); setMonth([]); setWinloss([]); setProduct([]); setLeadStatus([]); setTotals({}); return; }
      setMonth(null); setWinloss(null); setProduct(null); setErr(false);
      window.wm.croExec(range.from, range.to).then((o) => {
        if (o == null) { setErr(true); setMonth([]); setWinloss([]); setProduct([]); setLeadStatus([]); setTotals({}); return; }
        setMonth(Array.isArray(o.months) ? o.months : []);
        setWinloss(Array.isArray(o.winloss) ? o.winloss : []);
        setProduct(Array.isArray(o.products) ? o.products : []);
        setLeadStatus(Array.isArray(o.status) ? o.status : []);
        setTotals(o.totals || {});
      }).catch(() => { setErr(true); setMonth([]); setWinloss([]); setProduct([]); setLeadStatus([]); setTotals({}); });
    }, [range.from, range.to]);

    const inScope = (c) => ch === "all" || c === ch;

    // ---- Serie ROLLING 7 meses para el chart (independiente del date picker) ----
    const [mseries, setMseries] = useState(null);
    useEffect(() => {
      if (!(window.wm && window.wm.ready && window.wm.croExec)) { setMseries([]); return; }
      const t = new Date();
      const from = fmtISO(new Date(t.getFullYear(), t.getMonth() - 6, 1)); // 7 meses (actual + 6 atrás)
      window.wm.croExec(from, fmtISO(t)).then(o => setMseries(o && Array.isArray(o.months) ? o.months : [])).catch(() => setMseries([]));
    }, []);

    // Siempre 7 columnas (rellena ceros) → vista clara de 6+ meses con spend/CM/margen.
    const chartMonths = useMemo(() => {
      const t = new Date(); const keys = [];
      for (let i = 6; i >= 0; i--) { const d = new Date(t.getFullYear(), t.getMonth() - i, 1); keys.push(d.getFullYear() + "-" + String(d.getMonth() + 1).padStart(2, "0")); }
      const m = {};
      (mseries || []).forEach(r => { const k = String(r.month).slice(0, 7); const c = r.channel === "google" ? "google" : "meta"; m[k] = m[k] || { meta: { spend: 0, wins: 0, cm: 0 }, google: { spend: 0, wins: 0, cm: 0 } }; m[k][c].spend += Number(r.spend || 0); m[k][c].wins += Number(r.wins || 0); m[k][c].cm += Number(r.cm_real || 0); });
      return keys.map(k => {
        const x = m[k] || { meta: { spend: 0, wins: 0, cm: 0 }, google: { spend: 0, wins: 0, cm: 0 } };
        const spend = (inScope("meta") ? x.meta.spend : 0) + (inScope("google") ? x.google.spend : 0);
        const wins = (inScope("meta") ? x.meta.wins : 0) + (inScope("google") ? x.google.wins : 0);
        const cm = (inScope("meta") ? x.meta.cm : 0) + (inScope("google") ? x.google.cm : 0); // CM REAL por producto
        return { month: k, meta: x.meta, google: x.google, spend, wins, cm, margin: cm - spend };
      });
    }, [mseries, ch, econV]);

    // ---- Mensual por canal (sólo meses con inversión) ----
    const months = useMemo(() => {
      const m = {};
      (month || []).forEach(r => {
        const k = String(r.month).slice(0, 7); const c = r.channel === "google" ? "google" : "meta";
        m[k] = m[k] || { month: k, meta: { spend: 0, wins: 0, cm: 0 }, google: { spend: 0, wins: 0, cm: 0 } };
        m[k][c].spend += Number(r.spend || 0); m[k][c].wins += Number(r.wins || 0); m[k][c].cm += Number(r.cm_real || 0);
      });
      return Object.values(m).sort((a, b) => a.month.localeCompare(b.month)).map(x => {
        const spend = (inScope("meta") ? x.meta.spend : 0) + (inScope("google") ? x.google.spend : 0);
        const wins = (inScope("meta") ? x.meta.wins : 0) + (inScope("google") ? x.google.wins : 0);
        const cm = (inScope("meta") ? x.meta.cm : 0) + (inScope("google") ? x.google.cm : 0); // CM REAL por producto
        return { month: x.month, meta: x.meta, google: x.google, spend, wins, cm, margin: cm - spend };
      }).filter(x => x.spend > 0 || x.wins > 0);
    }, [month, ch, econV]);

    const kpis = useMemo(() => {
      const spend = months.reduce((s, m) => s + m.spend, 0);
      const cm = months.reduce((s, m) => s + m.cm, 0);
      const wins = months.reduce((s, m) => s + m.wins, 0);
      return { spend, cm, wins, margin: cm - spend, roas: spend > 0 ? cm / spend : null };
    }, [months]);

    // ---- Win/loss por canal (respeta filtro) ----
    const channels = useMemo(() => (winloss || []).filter(c => inScope(c.channel)).map(c => {
      const wins = Number(c.wins || 0), lost = Number(c.lost || 0), leads = Number(c.leads || 0);
      return { channel: c.channel, wins, lost, leads, winRate: leads ? wins / leads : null, lossRate: leads ? lost / leads : null, cm: wins * BLENDED_CM };
    }).sort((a, b) => b.wins - a.wins), [winloss, ch]);

    // ---- Status buckets por canal ----
    const statusByCh = useMemo(() => {
      const out = {};
      (leadStatus || []).filter(r => inScope(r.channel)).forEach(r => {
        const c = r.channel; out[c] = out[c] || { channel: c, total: 0, buckets: { vendido: 0, proceso: 0, credit: 0, perdido: 0 }, detail: [] };
        const n = Number(r.n || 0); out[c].total += n; out[c].buckets[bucketOf(r.zoho_status)] += n;
        out[c].detail.push({ status: r.zoho_status, n, bucket: bucketOf(r.zoho_status) });
      });
      return Object.values(out).map(c => { c.detail.sort((a, b) => b.n - a.n); return c; }).sort((a, b) => b.total - a.total);
    }, [leadStatus, ch]);

    // ---- Por producto (respeta filtro) ----
    const products = useMemo(() => {
      const p = {};
      (product || []).filter(r => inScope(r.channel) && r.product !== "careers").forEach(r => {
        const key = r.product || "mixed"; p[key] = p[key] || { product: key, spend: 0, wins: 0, leads: 0 };
        p[key].spend += Number(r.spend || 0); p[key].wins += Number(r.wins || 0); p[key].leads += Number(r.leads || 0);
      });
      return Object.values(p).map(x => { const cm = x.wins * cmFor(x.product); return { ...x, sales: isSales(x.product), cm, margin: isSales(x.product) ? cm - x.spend : -x.spend }; }).sort((a, b) => b.spend - a.spend);
    }, [product, ch, econV]);

    const loading = month === null || winloss === null || product === null;
    const maxSpendM = Math.max(1, ...chartMonths.map(m => Math.max(inScope("meta") ? m.meta.spend : 0, inScope("google") ? m.google.spend : 0)));
    const maxProdSpend = Math.max(1, ...products.map(p => p.spend));

    const Card = ({ children, style }) => (<div style={{ border: "1px solid var(--op-line,#e7ebf3)", borderRadius: 14, padding: 16, background: "var(--wm-card,#fff)", ...style }}>{children}</div>);
    const H = ({ icon, children }) => (<div style={{ display: "flex", alignItems: "center", gap: 8, margin: "18px 0 8px" }}><window.Icon name={icon} size={18} /><h3 style={{ margin: 0, fontSize: 15, fontWeight: 800 }}>{children}</h3></div>);
    const Pill = ({ k, label }) => (
      <button onClick={() => setCh(k)} style={{ padding: "4px 12px", borderRadius: 20, fontSize: 12, fontWeight: 800, cursor: "pointer", border: "1px solid " + (ch === k ? NAVY : "var(--op-line,#ddd)"), background: ch === k ? NAVY : "transparent", color: ch === k ? "#fff" : "var(--wm-fg-muted)" }}>{label}</button>
    );

    return (
      <div style={{ padding: "4px 2px" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 10, flexWrap: "wrap" }}>
          <window.Icon name="briefcase" size={20} />
          <h2 style={{ margin: 0, fontSize: 18, fontWeight: 800 }}>{es ? "Ejecutivos · CRO" : "Executive · CRO"}</h2>
          {!err && <span style={{ fontSize: 11, fontWeight: 700, color: GREEN, background: "var(--op-green-50,#E8F4EE)", padding: "3px 9px", borderRadius: 9 }}>● live · windmar-marketing</span>}
          <span style={{ display: "inline-flex", alignItems: "center", gap: 4, fontSize: 11, fontWeight: 800, color: NAVY, background: "var(--op-blue-50,#EAF0FB)", padding: "3px 9px", borderRadius: 9 }}><window.Icon name="calendar" size={11} /> {rLabel}</span>
          {err && <span style={{ fontSize: 11, fontWeight: 700, color: "#b56a00", background: "var(--op-amber-50,#FCF1DE)", padding: "3px 9px", borderRadius: 9 }}>● sin conexión a datos</span>}
          <div style={{ marginLeft: "auto", display: "flex", gap: 6 }}>
            <Pill k="all" label={es ? "Todos" : "All"} /><Pill k="meta" label="Meta" /><Pill k="google" label="Google" />
          </div>
        </div>
        <div style={{ fontSize: 12, color: "var(--wm-fg-muted)", margin: "6px 0 4px" }}>
          {es ? "CM por mes (split Meta/Google) · ganados/perdidos + status real del lead · qué producto corrió el movimiento." : "CM by month (Meta/Google split) · win/loss + real lead status · which product drove the movement."}
        </div>

        {loading && <div style={{ color: "var(--wm-fg-muted)", padding: 24 }}>{es ? "Cargando…" : "Loading…"}</div>}
        {!loading && err && (<div style={{ border: "1px solid " + ORANGE, background: "var(--op-amber-50,#FCF1DE)", borderRadius: 12, padding: 16, fontSize: 13 }}>⚠️ {es ? "No se pudo cargar la data en vivo. Cifras ocultas para no fabricar ceros." : "Could not load live data."}</div>)}

        {!loading && !err && <>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 12, marginTop: 10 }}>
            {[
              { l: es ? "Inversión" : "Spend", v: money(kpis.spend), c: "var(--wm-fg,#13203f)" },
              { l: es ? "Contribución est." : "Contribution est.", v: money(kpis.cm), c: "var(--wm-fg,#13203f)", sub: kpis.wins + (es ? " ventas" : " wins") },
              { l: es ? "Margen neto est." : "Net margin est.", v: money(kpis.margin), c: kpis.margin >= 0 ? GREEN : RED },
              { l: "CM-ROAS", v: kpis.roas == null ? "—" : kpis.roas.toFixed(2) + "×", c: NAVY },
            ].map((k, i) => (
              <Card key={i}>
                <div style={{ fontSize: 11, fontWeight: 700, color: "var(--wm-fg-muted)", textTransform: "uppercase", letterSpacing: ".4px" }}>{k.l}</div>
                <div style={{ fontSize: 28, fontWeight: 900, marginTop: 4, color: k.c }}>{k.v}</div>
                <div style={{ display: "flex", alignItems: "center", gap: 4, marginTop: 6, fontSize: 10.5, fontWeight: 700, color: "var(--wm-fg-muted)" }}>
                  <window.Icon name="calendar" size={11} /> {rLabel}{k.sub ? <span style={{ marginLeft: "auto", color: "var(--wm-fg,#13203f)" }}>{k.sub}</span> : null}
                </div>
              </Card>
            ))}
          </div>

          {/* Rolling 7 meses — spend / contribución / margen (independiente del filtro de fechas) */}
          <H icon="bar-chart-3">{es ? "Spend · Contribución · Margen — rolling 7 meses" : "Spend · Contribution · Margin — rolling 7 months"}{ch !== "all" ? " · " + (ch === "meta" ? "Meta" : "Google") : ""}</H>
          <Card>
            <div style={{ display: "flex", gap: 10, alignItems: "flex-end", height: 200, padding: "8px 4px 0" }}>
              {chartMonths.map((m, i) => {
                const [yy, mm] = m.month.split("-");
                const bar = (v) => Math.max(v > 0 ? 2 : 0, Math.round((v / maxSpendM) * 120));
                return (
                  <div key={i} style={{ flex: 1, display: "flex", flexDirection: "column", alignItems: "center", gap: 3, minWidth: 0 }}>
                    <div style={{ fontSize: 11, fontWeight: 800, color: m.spend <= 0 ? "var(--wm-fg-subtle,#9aa)" : (m.margin >= 0 ? GREEN : RED) }} title={m.spend <= 0 ? (es ? "Sin inversión ingestada este mes (no se puede calcular margen)" : "No spend ingested this month") : ""}>{m.spend <= 0 ? "—" : money(m.margin)}</div>
                    <div style={{ display: "flex", gap: 3, alignItems: "flex-end", height: 124 }}>
                      {inScope("meta") && <div title={"Meta inversión " + money(m.meta.spend)} style={{ width: ch === "all" ? 15 : 26, height: bar(m.meta.spend), background: NAVY, borderRadius: "3px 3px 0 0" }} />}
                      {inScope("google") && <div title={"Google inversión " + money(m.google.spend)} style={{ width: ch === "all" ? 15 : 26, height: bar(m.google.spend), background: ORANGE, borderRadius: "3px 3px 0 0" }} />}
                    </div>
                    <div style={{ fontSize: 11, fontWeight: 800, color: "var(--wm-fg,#13203f)" }}>{MES[Number(mm) - 1]} {yy.slice(2)}</div>
                    <div style={{ fontSize: 10, color: "var(--wm-fg-muted)", lineHeight: 1.35, textAlign: "center" }}>
                      {es ? "Inv" : "Sp"} {money(m.spend)}<br />CM {money(m.cm)}<br />{m.wins} {es ? "v" : "w"}
                    </div>
                  </div>
                );
              })}
            </div>
            <div style={{ display: "flex", gap: 14, marginTop: 8, fontSize: 11, color: "var(--wm-fg-muted)", flexWrap: "wrap" }}>
              <span><b style={{ color: NAVY }}>▮</b> Meta inv.</span><span><b style={{ color: ORANGE }}>▮</b> Google inv.</span>
              <span><b style={{ color: GREEN }}>#</b> {es ? "margen neto (arriba)" : "net margin (top)"}</span>
              <span>CM = {es ? "contribución est." : "est. contribution"}</span>
              <span style={{ marginLeft: "auto" }}>{es ? "rolling 7 meses · no afectado por el filtro de fechas" : "rolling 7 months · ignores date filter"}</span>
            </div>
          </Card>

          {/* Win/loss + status real */}
          <H icon="git-compare">{es ? "Ganados vs perdidos + status del lead" : "Win/loss + lead status"}</H>
          <div style={{ display: "grid", gridTemplateColumns: channels.length > 1 ? "1fr 1fr" : "1fr", gap: 12 }}>
            {channels.map((c, i) => {
              const st = statusByCh.find(s => s.channel === c.channel);
              const tot = st ? st.total : 0;
              return (
                <Card key={i} style={{ borderTop: "3px solid " + (c.channel === "meta" ? NAVY : ORANGE) }}>
                  <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                    <div style={{ fontWeight: 800, fontSize: 16 }}>{c.channel === "meta" ? "Facebook / Meta" : "Google"}</div>
                    <div style={{ fontSize: 12, fontWeight: 800, color: GREEN }}>{pct(c.winRate)} {es ? "cierre" : "win"}</div>
                  </div>
                  {/* barra de buckets de status */}
                  {st && tot > 0 && <div style={{ display: "flex", height: 14, borderRadius: 7, overflow: "hidden", margin: "12px 0 6px", background: "var(--op-line,#eee)" }}>
                    {["vendido", "proceso", "credit", "perdido"].map(b => st.buckets[b] > 0 ? <div key={b} title={BUCKET_META[b].label + ": " + st.buckets[b]} style={{ width: (st.buckets[b] / tot * 100) + "%", background: BUCKET_META[b].color }} /> : null)}
                  </div>}
                  <div style={{ display: "flex", gap: 12, flexWrap: "wrap", fontSize: 11, marginBottom: 8 }}>
                    {st && ["vendido", "proceso", "credit", "perdido"].map(b => <span key={b} style={{ color: BUCKET_META[b].color, fontWeight: 700 }}>● {BUCKET_META[b].label} {st.buckets[b]}</span>)}
                  </div>
                  {/* detalle de status reales (top 6) */}
                  {st && <div style={{ borderTop: "1px dashed var(--op-line)", paddingTop: 6 }}>
                    {st.detail.slice(0, 6).map((d, j) => (
                      <div key={j} style={{ display: "flex", justifyContent: "space-between", fontSize: 11, padding: "2px 0", color: "var(--wm-fg-muted)" }}>
                        <span><span style={{ color: BUCKET_META[d.bucket].color }}>●</span> {d.status}</span><b style={{ color: "var(--wm-fg,#13203f)" }}>{d.n}</b>
                      </div>
                    ))}
                  </div>}
                  <div style={{ fontSize: 11, marginTop: 8, color: "var(--wm-fg-muted)" }}>{c.leads} leads · {es ? "Contribución est." : "Contribution est."} <b style={{ color: "var(--wm-fg,#13203f)" }}>{money(c.cm)}</b></div>
                </Card>
              );
            })}
          </div>

          {/* Por producto */}
          <H icon="package">{es ? "Qué producto corrió el movimiento" : "Which product drove the movement"} <span style={{ fontSize: 11, fontWeight: 700, color: "var(--wm-fg-muted)" }}>· {rLabel}</span></H>
          <Card style={{ padding: 0 }}>
            <table style={{ width: "100%", borderCollapse: "collapse", fontSize: 12 }}>
              <thead><tr style={{ textAlign: "right", color: "var(--wm-fg-muted)", fontSize: 10, textTransform: "uppercase", letterSpacing: ".4px" }}>
                <th style={{ textAlign: "left", padding: "10px 14px" }}>{es ? "Producto" : "Product"}</th><th style={{ padding: "10px 14px" }}>{es ? "Inversión" : "Spend"}</th><th style={{ padding: "10px 14px" }}>{es ? "Ventas" : "Wins"}</th><th style={{ padding: "10px 14px" }}>CM (est.)</th><th style={{ padding: "10px 14px" }}>{es ? "Margen" : "Margin"}</th>
              </tr></thead>
              <tbody>
                {products.map((p, i) => (
                  <tr key={i} style={{ borderTop: "1px solid var(--op-line,#eee)", textAlign: "right", opacity: p.sales ? 1 : 0.55 }}>
                    <td style={{ textAlign: "left", padding: "9px 14px", fontWeight: 700 }}><span style={{ display: "inline-block", width: 8, height: 8, borderRadius: 2, background: `linear-gradient(90deg, ${NAVY} ${(p.spend / maxProdSpend) * 100}%, transparent 0)`, marginRight: 8 }} />{p.product}{!p.sales && <span style={{ fontSize: 10, color: "var(--wm-fg-muted)", marginLeft: 6 }}>· {es ? "no-venta" : "non-sales"}</span>}</td>
                    <td style={{ padding: "9px 14px" }}>{money(p.spend)}</td><td style={{ padding: "9px 14px" }}>{p.sales ? p.wins : "—"}</td><td style={{ padding: "9px 14px" }}>{p.sales ? money(p.cm) : "—"}</td>
                    <td style={{ padding: "9px 14px", fontWeight: 800, color: p.margin >= 0 ? GREEN : RED }}>{money(p.margin)}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </Card>

          <div style={{ fontSize: 10.5, color: "var(--wm-fg-muted)", marginTop: 14, lineHeight: 1.5 }}>
            {es ? "Fuente: windmar-marketing. Inversión real (daily_metrics + google). Contribución = CM REAL por producto (unit_economics: epc real × cm_pct, fuente deals Zoho) × ventas mapeadas a producto — NO blended. Nota: ventas a nivel canal (atribución por lead asociado) pueden ser más que las mapeadas a producto; el CM solo cuenta las mapeadas. Status = Zoho Lead_Status real. careers/awareness = no-venta." : "Source: windmar-marketing. Real spend. Contribution = REAL per-product CM (unit_economics, not blended) × product-mapped wins. Channel-level wins may exceed product-mapped wins; CM counts mapped only. Lead status = real Zoho."}
          </div>
        </>}
      </div>
    );
  }

  window.ExecView = ExecView;
})();