// Blog ROI Comparator — module séquentiel en 5 actes pour articles BOFU comparatifs.
// 1. Comparateur dynamique de prix vs concurrent (sliders propiedades/usuarios, toggles devise/período)
// 2. Transition narrative
// 3. Simulateur ROI publicitaire (réinvestissement de l'économie en pub LATAM)
// 4. Punch line — coût d'opportunité
// 5. CTA "Empezar mi 21 días gratis"
//
// Auto-mount via <div data-cb-roi-comparator data-context="vs-easybroker"></div> dans le markdown.

// ─────────────────────────────────────────────────────────────
// CONSTANTES PRICING — CloserBroker (Plan Pionero)
// ─────────────────────────────────────────────────────────────

const CB_PRICING = {
  monthly: {
    base:    { MXN: 1199, USD: 59, COP: 239000 },
    addUser: { MXN: 180,  USD: 9,  COP: 35000  },
    included: 2,
  },
  annual: {
    base:    { MXN: 1020, USD: 49, COP: 200000 },
    addUser: { MXN: 130,  USD: 7,  COP: 25000  },
    included: 4,
  },
};

// ─────────────────────────────────────────────────────────────
// CONSTANTES PRICING — EasyBroker
// MX en MXN (pago mensual). Anual = -15%.
// CO en USD (pago mensual). Anual = -20%.
// Add-on sitio web : $500 MXN / $30 USD par mois.
// ─────────────────────────────────────────────────────────────

const EB_PLANS_MX = [
  // [maxAnuncios, prixMensualMXN]
  { maxAnuncios: 10,   price: 990,   label: 'Emprendedor' },
  { maxAnuncios: 25,   price: 1490,  label: 'Independiente' },
  { maxAnuncios: 50,   price: 1990,  label: 'Agencia' },
  { maxAnuncios: 70,   price: 2490,  label: 'Personalizado' },
  { maxAnuncios: 150,  price: 4150,  label: 'Personalizado' },
  { maxAnuncios: 200,  price: 5090,  label: 'Personalizado' },
  { maxAnuncios: 300,  price: 6990,  label: 'Personalizado' },
  { maxAnuncios: 400,  price: 8490,  label: 'Personalizado' },
  { maxAnuncios: 500,  price: 10490, label: 'Personalizado' },
  { maxAnuncios: 600,  price: 12490, label: 'Personalizado' },
  { maxAnuncios: 750,  price: 14990, label: 'Personalizado' },
  { maxAnuncios: 1000, price: 19490, label: 'Personalizado' },
  { maxAnuncios: 1500, price: 28490, label: 'Personalizado' },
  { maxAnuncios: 2000, price: 37190, label: 'Personalizado' },
];

const EB_PLANS_USD = [
  { maxAnuncios: 10,   price: 59,   label: 'Emprendedor' },
  { maxAnuncios: 25,   price: 89,   label: 'Independiente' },
  { maxAnuncios: 50,   price: 119,  label: 'Agencia' },
  { maxAnuncios: 70,   price: 139,  label: 'Personalizado' },
  { maxAnuncios: 150,  price: 189,  label: 'Personalizado' },
  { maxAnuncios: 200,  price: 249,  label: 'Personalizado' },
  { maxAnuncios: 300,  price: 309,  label: 'Personalizado' },
  { maxAnuncios: 400,  price: 429,  label: 'Personalizado' },
  { maxAnuncios: 500,  price: 529,  label: 'Personalizado' },
  { maxAnuncios: 600,  price: 649,  label: 'Personalizado' },
  { maxAnuncios: 750,  price: 769,  label: 'Personalizado' },
  { maxAnuncios: 1000, price: 929,  label: 'Personalizado' },
  { maxAnuncios: 1500, price: 1220, label: 'Personalizado' },
  { maxAnuncios: 2000, price: 1770, label: 'Personalizado' },
];

// Conversion : Mexique a publicado les prix MXN, Colombie en USD → on dérive pour les autres devises.
// Taux figés au moment du build, à updater si gros décalage.
const FX = { MXN_USD: 17, COP_USD: 4200, MXN_COP: 247 }; // 1 MXN = 247 COP

const EB_ADDON_SITIO = { MXN: 500, USD: 30 }; // pago mensual

const EB_ANNUAL_DISCOUNT = 0.20; // -20% en pago anual

// ─────────────────────────────────────────────────────────────
// CONSTANTES ROI — Données pub LATAM
// ─────────────────────────────────────────────────────────────

const ROI_DEFAULTS = {
  MX: { cpl: 150,    conversion: 3.0, commission: 80000   },  // MXN
  CO: { cpl: 30000,  conversion: 3.0, commission: 12000000 }, // COP
  US_FROM_MX: { cpl: 9, conversion: 3.0, commission: 4700 },  // USD converti depuis MXN (150 / 17)
  US_FROM_CO: { cpl: 7, conversion: 3.0, commission: 2860 },  // USD converti depuis COP (30 000 / 4 200)
};

const ROI_RANGES = {
  MX: { cpl: [50, 1000], commission: [20000, 500000] },
  CO: { cpl: [10000, 200000], commission: [3000000, 60000000] },
  USD: { cpl: [3, 200], commission: [500, 25000] },
};

// ─────────────────────────────────────────────────────────────
// HELPERS
// ─────────────────────────────────────────────────────────────

const cbFmt = (n, c) => {
  const v = Math.round(n);
  if (c === 'USD') return `$${v.toLocaleString('en-US')}`;
  if (c === 'COP') return `$${v.toLocaleString('es-CO')}`;
  return `$${v.toLocaleString('es-MX')}`;
};

const getEbPlan = (propiedades, currency) => {
  const plans = currency === 'USD' ? EB_PLANS_USD : EB_PLANS_MX;
  // Si > 2000 anuncios, on plafonne au dernier (le slider article s'arrête à 2000)
  for (const plan of plans) {
    if (propiedades <= plan.maxAnuncios) return plan;
  }
  return plans[plans.length - 1];
};

// Convertit un prix de la devise locale (MXN ou COP) vers la devise demandée
const convertEbPrice = (priceLocal, fromCurrency, toCurrency) => {
  if (fromCurrency === toCurrency) return priceLocal;
  // EB MX publie en MXN, EB CO en USD → on convertit selon le contexte
  if (fromCurrency === 'MXN' && toCurrency === 'USD') return priceLocal / FX.MXN_USD;
  if (fromCurrency === 'MXN' && toCurrency === 'COP') return priceLocal * FX.MXN_COP;
  if (fromCurrency === 'USD' && toCurrency === 'MXN') return priceLocal * FX.MXN_USD;
  if (fromCurrency === 'USD' && toCurrency === 'COP') return priceLocal * FX.COP_USD;
  if (fromCurrency === 'COP' && toCurrency === 'USD') return priceLocal / FX.COP_USD;
  if (fromCurrency === 'COP' && toCurrency === 'MXN') return priceLocal / FX.MXN_COP;
  return priceLocal;
};

// Devise primaire d'un pays
const primaryCurrencyOf = (country) => (country === 'mx' ? 'MXN' : 'COP');

// ─────────────────────────────────────────────────────────────
// COMPOSANT PRINCIPAL
// ─────────────────────────────────────────────────────────────

const BlogRoiComparator = ({ context = 'vs-easybroker' }) => {
  const ctx = (typeof useCountry === 'function') ? useCountry() : { country: 'co' };
  const country = ctx.country || 'co';
  const primaryCurrency = primaryCurrencyOf(country);
  const preciosHref = `/${country}/precios/`;

  // ── State ──────────────────────────────────────────────────
  const [currency, setCurrency] = React.useState(primaryCurrency);
  const [period, setPeriod] = React.useState('annual');
  const [propiedades, setPropiedades] = React.useState(50);
  const [usuarios, setUsuarios] = React.useState(5);
  const [withWebsite, setWithWebsite] = React.useState(true);

  // ── Pricing CloserBroker ──────────────────────────────────
  const cbCfg = CB_PRICING[period];
  const cbBase = cbCfg.base[currency];
  const cbAddPrice = cbCfg.addUser[currency];
  const cbExtra = Math.max(0, usuarios - cbCfg.included);
  const cbTotal = cbBase + cbExtra * cbAddPrice;

  // ── Pricing EasyBroker ────────────────────────────────────
  // EB MX pricing source = MXN ; EB CO pricing source = USD
  const ebSourceCurrency = country === 'mx' ? 'MXN' : 'USD';
  const ebPlan = getEbPlan(propiedades, ebSourceCurrency);
  let ebMonthly = ebPlan.price;
  if (withWebsite) ebMonthly += EB_ADDON_SITIO[ebSourceCurrency];
  if (period === 'annual') ebMonthly = ebMonthly * (1 - EB_ANNUAL_DISCOUNT);
  // Conversion vers la devise affichée
  const ebTotal = convertEbPrice(ebMonthly, ebSourceCurrency, currency);

  // ── Économie ──────────────────────────────────────────────
  const monthlySavings = Math.max(0, ebTotal - cbTotal);
  const annualSavings = monthlySavings * 12;

  // ── ROI defaults selon devise/pays ────────────────────────
  const roiDefaultKey = currency === 'USD'
    ? (country === 'mx' ? 'US_FROM_MX' : 'US_FROM_CO')
    : (country === 'mx' ? 'MX' : 'CO');
  const roiDef = ROI_DEFAULTS[roiDefaultKey];
  const roiRangeKey = currency === 'USD' ? 'USD' : (country === 'mx' ? 'MX' : 'CO');
  const roiRange = ROI_RANGES[roiRangeKey];

  const [cpl, setCpl] = React.useState(roiDef.cpl);
  const [conversion, setConversion] = React.useState(roiDef.conversion);
  const [commission, setCommission] = React.useState(roiDef.commission);

  // Resync les défauts si l'utilisateur change devise/pays (sauf si déjà modifié manuellement on garde)
  // Pour simplifier : on re-sync à chaque changement de devise.
  React.useEffect(() => {
    setCpl(roiDef.cpl);
    setCommission(roiDef.commission);
  }, [currency, country]); // eslint-disable-line

  // ── Calculs ROI ───────────────────────────────────────────
  const leadsPerMonth = cpl > 0 ? monthlySavings / cpl : 0;
  const clientsPerMonth = leadsPerMonth * (conversion / 100);
  const revenueAddPerMonth = clientsPerMonth * commission;
  const revenueAddPerYear = revenueAddPerMonth * 12;

  // ── Fill percentages pour sliders ─────────────────────────
  const propsFillPct = ((propiedades - 10) / (2000 - 10)) * 100;
  const usersFillPct = ((usuarios - 1) / (50 - 1)) * 100;
  const cplFillPct = ((cpl - roiRange.cpl[0]) / (roiRange.cpl[1] - roiRange.cpl[0])) * 100;
  const convFillPct = ((conversion - 0.5) / (10 - 0.5)) * 100;
  const commFillPct = ((commission - roiRange.commission[0]) / (roiRange.commission[1] - roiRange.commission[0])) * 100;

  // ── Helpers d'affichage ───────────────────────────────────
  const fmtCurrency = (n) => `${cbFmt(n, currency)} ${currency}`;
  const fmtCpl = (n) => cbFmt(n, currency);

  return (
    <div className="cb-roi">
      {/* ════════════════════════════════════════════════════
          ACTE 1 — COMPARATEUR DYNAMIQUE
          ════════════════════════════════════════════════════ */}
      <div className="cb-roi-header">
        <div className="eyebrow"><span className="eyebrow-dot" />Calculadora interactiva</div>
        <h3 className="cb-roi-h3">
          ¿Cuánto ahorras con <span className="grad-text">CloserBroker?</span>
        </h3>
        <p className="cb-roi-sub">
          Ajusta los parámetros a tu realidad. El cálculo se actualiza en tiempo real.
        </p>
      </div>

      {/* Toggles devise + período */}
      <div className="cb-roi-toggles">
        <div className="cb-roi-pill">
          <button className={period === 'monthly' ? 'on' : ''} onClick={() => setPeriod('monthly')}>Mensual</button>
          <button className={period === 'annual' ? 'on' : ''} onClick={() => setPeriod('annual')}>
            Anual <span className="cb-roi-badge">−15%</span>
          </button>
        </div>
        <div className="cb-roi-pill">
          <button className={currency === primaryCurrency ? 'on' : ''} onClick={() => setCurrency(primaryCurrency)}>{primaryCurrency}</button>
          <button className={currency === 'USD' ? 'on' : ''} onClick={() => setCurrency('USD')}>USD</button>
        </div>
      </div>

      {/* Sliders propiedades + usuarios */}
      <div className="cb-roi-inputs">
        <div className="cb-roi-slider-block">
          <div className="cb-roi-slider-label">
            <span>Propiedades en tu inventario</span>
            <span className="cb-roi-slider-value"><strong>{propiedades}</strong></span>
          </div>
          <div className="cb-roi-slider-wrap" style={{ '--fill': `${propsFillPct}%` }}>
            <input type="range" min={10} max={2000} step={10} value={propiedades}
              onChange={e => setPropiedades(Number(e.target.value))} className="cb-roi-slider" />
            <div className="cb-roi-slider-track" />
            <div className="cb-roi-slider-fill" />
            <div className="cb-roi-slider-ticks">
              {[10, 500, 1000, 1500, 2000].map(t => (
                <div key={t} className="cb-roi-tick" style={{ left: `${((t - 10) / 1990) * 100}%` }}>
                  <div className="cb-roi-tick-mark" />
                  <div className="cb-roi-tick-label">{t === 10 ? '10' : `${t/1000 >= 1 ? (t/1000 + 'k') : t}`}</div>
                </div>
              ))}
            </div>
          </div>
        </div>

        <div className="cb-roi-slider-block">
          <div className="cb-roi-slider-label">
            <span>Usuarios en tu agencia</span>
            <span className="cb-roi-slider-value"><strong>{usuarios}</strong></span>
          </div>
          <div className="cb-roi-slider-wrap" style={{ '--fill': `${usersFillPct}%` }}>
            <input type="range" min={1} max={50} step={1} value={usuarios}
              onChange={e => setUsuarios(Number(e.target.value))} className="cb-roi-slider" />
            <div className="cb-roi-slider-track" />
            <div className="cb-roi-slider-fill" />
            <div className="cb-roi-slider-ticks">
              {[1, 10, 20, 30, 40, 50].map(t => (
                <div key={t} className="cb-roi-tick" style={{ left: `${((t - 1) / 49) * 100}%` }}>
                  <div className="cb-roi-tick-mark" />
                  <div className="cb-roi-tick-label">{t}</div>
                </div>
              ))}
            </div>
          </div>
        </div>

        <div className="cb-roi-toggle-line">
          <span className="cb-roi-toggle-label">¿Quieres un sitio web propio?</span>
          <div className="cb-roi-pill cb-roi-pill-binary">
            <button className={withWebsite ? 'on' : ''} onClick={() => setWithWebsite(true)}>Sí, con sitio web</button>
            <button className={!withWebsite ? 'on' : ''} onClick={() => setWithWebsite(false)}>Solo CRM</button>
          </div>
        </div>
      </div>

      {/* Cards de comparaison */}
      <div className="cb-roi-cards">
        {/* EasyBroker */}
        <div className="cb-roi-card cb-roi-card-eb">
          <div className="cb-roi-card-header">
            <div className="cb-roi-card-logo">EasyBroker</div>
            <div className="cb-roi-card-plan">{ebPlan.label} ({ebPlan.maxAnuncios} anuncios)</div>
          </div>
          <div className="cb-roi-card-price" style={{ fontSize: 38 }}>{cbFmt(ebTotal, currency)}<span style={{ fontSize: 14, fontWeight: 500, color: 'var(--fg-muted)', marginLeft: 6 }}>{currency}/mes</span></div>
          <div className="cb-roi-card-breakdown">
            <div className="cb-roi-card-line">
              <span>Plan base</span>
              <span>{cbFmt(convertEbPrice(period === 'annual' ? ebPlan.price * (1 - EB_ANNUAL_DISCOUNT) : ebPlan.price, ebSourceCurrency, currency), currency)}</span>
            </div>
            <div className="cb-roi-card-line">
              <span>Sitio web</span>
              <span>{withWebsite
                ? cbFmt(convertEbPrice(period === 'annual' ? EB_ADDON_SITIO[ebSourceCurrency] * (1 - EB_ANNUAL_DISCOUNT) : EB_ADDON_SITIO[ebSourceCurrency], ebSourceCurrency, currency), currency)
                : <em style={{ color: 'var(--fg-faint)' }}>No incluido</em>}</span>
            </div>
            <div className="cb-roi-card-line cb-roi-card-line-warning">
              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
                <span style={{ color: '#d97706' }}>⚠</span>
                Máx. {ebPlan.maxAnuncios} anuncios publicados
              </span>
            </div>
          </div>
        </div>

        {/* CloserBroker */}
        <div className="cb-roi-card cb-roi-card-cb">
          <div className="cb-roi-card-recommended">Recomendado</div>
          <div className="cb-roi-card-header">
            <div className="cb-roi-card-logo cb-roi-card-logo-cb">CloserBroker</div>
            <div className="cb-roi-card-plan">Plan Pionero · todo incluido</div>
          </div>
          <div className="cb-roi-card-price-cb" style={{ fontSize: 36, fontWeight: 800, color: '#15803d', letterSpacing: '-0.02em', marginBottom: 18, fontVariantNumeric: 'tabular-nums' }}>
            {cbFmt(cbTotal, currency)}<span style={{ fontSize: 14, fontWeight: 500, color: 'var(--fg-muted)', marginLeft: 6 }}>{currency}/mes</span>
          </div>
          <div className="cb-roi-card-breakdown">
            <div className="cb-roi-card-line">
              <span>CRM + Bolsa</span>
              <span style={{ color: '#16a34a', fontWeight: 600 }}>Incluido</span>
            </div>
            <div className="cb-roi-card-line">
              <span>Sitio web</span>
              <span style={{ color: '#16a34a', fontWeight: 600 }}>Incluido</span>
            </div>
            <div className="cb-roi-card-line cb-roi-card-line-success">
              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
                <span style={{ color: '#16a34a' }}>✓</span>
                Anuncios ilimitados
              </span>
            </div>
          </div>
        </div>
      </div>

      {/* Résultat économie */}
      <div className="cb-roi-savings">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1px 1fr', gap: 24, alignItems: 'stretch' }}>
          <div style={{ textAlign: 'center' }}>
            <div className="cb-roi-savings-label">Ahorro mensual</div>
            <div style={{ fontSize: 28, fontWeight: 700, color: 'var(--fg)', letterSpacing: '-0.02em', fontVariantNumeric: 'tabular-nums', lineHeight: 1.1 }}>
              {cbFmt(monthlySavings, currency)}<span style={{ fontSize: 14, fontWeight: 500, color: 'var(--fg-muted)', marginLeft: 6 }}>{currency}</span>
            </div>
          </div>
          <div style={{ width: 1, background: 'var(--border)', alignSelf: 'stretch' }} />
          <div style={{ textAlign: 'center' }}>
            <div className="cb-roi-savings-label">Ahorro anual</div>
            <div style={{ fontSize: 28, fontWeight: 800, color: '#15803d', letterSpacing: '-0.02em', fontVariantNumeric: 'tabular-nums', lineHeight: 1.1 }}>
              {cbFmt(annualSavings, currency)}<span style={{ fontSize: 14, fontWeight: 500, color: 'var(--fg-muted)', marginLeft: 6 }}>{currency}</span>
            </div>
          </div>
        </div>
      </div>

      {/* ════════════════════════════════════════════════════
          ACTE 2 — TRANSITION NARRATIVE
          ════════════════════════════════════════════════════ */}
      <div className="cb-roi-bridge">
        <div className="cb-roi-bridge-line" />
        <div className="cb-roi-bridge-text">
          Pero ahorrar no es lo importante. <br />
          <strong>Lo importante es lo que puedes hacer con ese dinero.</strong>
        </div>
        <div className="cb-roi-bridge-arrow">↓</div>
      </div>

      {/* ════════════════════════════════════════════════════
          ACTE 3 — SIMULATEUR PUB (réinvestissement)
          ════════════════════════════════════════════════════ */}
      <div className="cb-roi-header">
        <div className="eyebrow"><span className="eyebrow-dot" />Simulador de reinversión</div>
        <h3 className="cb-roi-h3">
          Reinvierte tu ahorro en <span className="grad-text">publicidad.</span>
        </h3>
        <p className="cb-roi-sub">
          Esto es lo que generas si pones <strong>{cbFmt(monthlySavings, currency)} {currency}/mes</strong> en Meta Ads o Google Ads.
        </p>
      </div>

      <div className="cb-roi-inputs">
        <div className="cb-roi-slider-block">
          <div className="cb-roi-slider-label">
            <span>Tu CPL (Costo Por Lead)</span>
            <span className="cb-roi-slider-value">
              <strong>{fmtCpl(cpl)}</strong> {currency}
            </span>
          </div>
          <div className="cb-roi-slider-wrap" style={{ '--fill': `${cplFillPct}%` }}>
            <input type="range" min={roiRange.cpl[0]} max={roiRange.cpl[1]}
              step={currency === 'USD' ? 1 : (currency === 'COP' ? 5000 : 10)}
              value={cpl} onChange={e => setCpl(Number(e.target.value))} className="cb-roi-slider" />
            <div className="cb-roi-slider-track" />
            <div className="cb-roi-slider-fill" />
          </div>
        </div>

        <div className="cb-roi-slider-block">
          <div className="cb-roi-slider-label">
            <span>Tu tasa de conversión lead → cliente</span>
            <span className="cb-roi-slider-value">
              <strong>{conversion.toFixed(1)}%</strong>
            </span>
          </div>
          <div className="cb-roi-slider-wrap" style={{ '--fill': `${convFillPct}%` }}>
            <input type="range" min={0.5} max={10} step={0.1} value={conversion}
              onChange={e => setConversion(Number(e.target.value))} className="cb-roi-slider" />
            <div className="cb-roi-slider-track" />
            <div className="cb-roi-slider-fill" />
          </div>
        </div>

        <div className="cb-roi-slider-block">
          <div className="cb-roi-slider-label">
            <span>Tu comisión promedio por venta</span>
            <span className="cb-roi-slider-value">
              <strong>{cbFmt(commission, currency)}</strong> {currency}
            </span>
          </div>
          <div className="cb-roi-slider-wrap" style={{ '--fill': `${commFillPct}%` }}>
            <input type="range" min={roiRange.commission[0]} max={roiRange.commission[1]}
              step={currency === 'USD' ? 100 : (currency === 'COP' ? 500000 : 5000)}
              value={commission} onChange={e => setCommission(Number(e.target.value))} className="cb-roi-slider" />
            <div className="cb-roi-slider-track" />
            <div className="cb-roi-slider-fill" />
          </div>
        </div>
      </div>

      {/* Funnel résultat */}
      <div className="cb-roi-funnel">
        <div className="cb-roi-funnel-step">
          <div className="cb-roi-funnel-icon">💰</div>
          <div className="cb-roi-funnel-label">Presupuesto pub/mes</div>
          <div className="cb-roi-funnel-value">{cbFmt(monthlySavings, currency)}</div>
          <div className="cb-roi-funnel-unit">{currency}</div>
        </div>
        <div className="cb-roi-funnel-arrow">→</div>
        <div className="cb-roi-funnel-step">
          <div className="cb-roi-funnel-icon">📊</div>
          <div className="cb-roi-funnel-label">Leads generados/mes</div>
          <div className="cb-roi-funnel-value">{leadsPerMonth.toFixed(1)}</div>
          <div className="cb-roi-funnel-unit">leads</div>
        </div>
        <div className="cb-roi-funnel-arrow">→</div>
        <div className="cb-roi-funnel-step">
          <div className="cb-roi-funnel-icon">🎯</div>
          <div className="cb-roi-funnel-label">Clientes nuevos/mes</div>
          <div className="cb-roi-funnel-value">{clientsPerMonth.toFixed(2)}</div>
          <div className="cb-roi-funnel-unit">clientes</div>
        </div>
        <div className="cb-roi-funnel-arrow">→</div>
        <div className="cb-roi-funnel-step cb-roi-funnel-step-final">
          <div className="cb-roi-funnel-icon">💎</div>
          <div className="cb-roi-funnel-label">Ingresos adicionales/mes</div>
          <div className="cb-roi-funnel-value cb-roi-funnel-value-final">
            <span className="grad-text">{cbFmt(revenueAddPerMonth, currency)}</span>
          </div>
          <div className="cb-roi-funnel-unit">{currency}</div>
        </div>
      </div>

      {/* ════════════════════════════════════════════════════
          ACTE 4 — PUNCH LINE (coût d'opportunité)
          ════════════════════════════════════════════════════ */}
      <div className="cb-roi-punch">
        <div className="cb-roi-punch-eyebrow">El verdadero costo de no migrar:</div>
        <div className="cb-roi-punch-strike">
          {cbFmt(monthlySavings, currency)} {currency}/mes de diferencia de precio
        </div>
        <div className="cb-roi-punch-big">
          <span className="cb-roi-punch-amount grad-text">{cbFmt(revenueAddPerYear, currency)}</span>
          <span className="cb-roi-punch-unit grad-text">{currency}/año</span>
        </div>
        <div className="cb-roi-punch-desc">
          de comisiones adicionales que dejas sobre la mesa cada año <br />
          al no reinvertir tu ahorro en captación.
        </div>
      </div>

      {/* ════════════════════════════════════════════════════
          ACTE 5 — CTA
          ════════════════════════════════════════════════════ */}
      <div className="cb-roi-cta-wrap">
        <a href={preciosHref} className="btn btn-grad cb-roi-cta">
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
            Empezar mi 21 días gratis
            <Icon name="arrow" size={15} color="#fff" />
          </span>
        </a>
        <div className="cb-roi-cta-sub">
          Sin compromiso · Solo 100 agencias acceden al Plan Pionero
        </div>
      </div>

      {/* Sources */}
      <div className="cb-roi-sources">
        Fuentes: Trichter Consulting (CPL inmobiliario MX/CO 2026), Sperant (tasa conversión LATAM 2025),
        Albeiro Ochoa (CPL Bogotá), AMPI · Metrocuadrado (comisión promedio).
        Pricing EasyBroker oficial (mayo 2026). Valores ajustables a tu situación.
      </div>

      <style>{`
        .cb-roi {
          margin: 56px 0;
          padding: 48px 40px;
          background: linear-gradient(180deg, #fff 0%, var(--bg-soft) 100%);
          border: 1px solid var(--border);
          border-radius: 28px;
          box-shadow: 0 24px 60px -28px rgba(84,181,227,0.18), 0 1px 2px rgba(15,23,42,0.04);
          font-family: inherit;
        }
        .cb-roi-header {
          text-align: center;
          max-width: 620px;
          margin: 0 auto 32px;
        }
        .cb-roi-header + .cb-roi-toggles,
        .cb-roi-header + .cb-roi-inputs {
          margin-top: 28px;
        }
        .cb-roi-h3 {
          font-size: clamp(22px, 2.6vw, 30px);
          font-weight: 600;
          letter-spacing: -0.02em;
          line-height: 1.2;
          margin: 16px 0 12px;
          color: var(--fg);
          text-wrap: balance;
        }
        .cb-roi-sub {
          font-size: 15px;
          color: var(--fg-soft);
          line-height: 1.55;
          text-wrap: pretty;
        }

        /* ── Toggles ── */
        .cb-roi-toggles {
          display: flex;
          justify-content: center;
          gap: 16px;
          margin-bottom: 32px;
          flex-wrap: wrap;
        }
        .cb-roi-pill {
          display: inline-flex;
          padding: 4px;
          background: var(--bg-soft);
          border: 1px solid var(--border);
          border-radius: 999px;
        }
        .cb-roi-pill button {
          padding: 8px 18px;
          font-size: 14px;
          font-weight: 500;
          color: var(--fg-muted);
          border-radius: 999px;
          border: none;
          background: transparent;
          cursor: pointer;
          display: inline-flex;
          align-items: center;
          gap: 6px;
          transition: all 0.2s;
        }
        .cb-roi-pill button.on {
          background: #fff;
          color: var(--fg);
          box-shadow: var(--shadow-sm);
        }
        .cb-roi-badge {
          font-size: 10px;
          font-weight: 600;
          padding: 2px 6px;
          border-radius: 4px;
          background: linear-gradient(90deg, #54B5E3, #C69CFF);
          color: #fff;
          letter-spacing: 0.02em;
        }

        /* ── Inputs / sliders ── */
        .cb-roi-inputs {
          background: #fff;
          border: 1px solid var(--border);
          border-radius: 18px;
          padding: 28px 32px;
          margin-bottom: 28px;
          display: flex;
          flex-direction: column;
          gap: 24px;
        }
        .cb-roi-slider-block { padding: 0 4px; }
        .cb-roi-slider-label {
          display: flex;
          justify-content: space-between;
          align-items: baseline;
          margin-bottom: 14px;
          font-size: 14px;
          color: var(--fg-soft);
        }
        .cb-roi-slider-value strong {
          font-size: 18px;
          font-weight: 600;
          color: transparent;
          background: linear-gradient(90deg, #54B5E3, #C69CFF);
          -webkit-background-clip: text;
          background-clip: text;
          margin-right: 4px;
        }
        .cb-roi-slider-wrap {
          position: relative;
          height: 44px;
          padding-top: 20px;
        }
        .cb-roi-slider-track {
          position: absolute;
          top: 28px;
          left: 0; right: 0;
          height: 4px;
          background: var(--bg-muted);
          border-radius: 999px;
          pointer-events: none;
        }
        .cb-roi-slider-fill {
          position: absolute;
          top: 28px;
          left: 0;
          height: 4px;
          width: var(--fill);
          background: linear-gradient(90deg, #54B5E3, #C69CFF);
          border-radius: 999px;
          pointer-events: none;
          transition: width 0.15s ease;
        }
        .cb-roi-slider {
          position: absolute;
          top: 22px;
          left: 0; right: 0;
          width: 100%;
          height: 16px;
          margin: 0;
          background: transparent;
          -webkit-appearance: none;
          appearance: none;
          cursor: pointer;
          z-index: 2;
        }
        .cb-roi-slider::-webkit-slider-runnable-track { height: 16px; background: transparent; }
        .cb-roi-slider::-moz-range-track { height: 16px; background: transparent; }
        .cb-roi-slider::-webkit-slider-thumb {
          -webkit-appearance: none;
          appearance: none;
          width: 22px; height: 22px;
          border-radius: 50%;
          background: #fff;
          border: 2px solid transparent;
          background-image: linear-gradient(#fff, #fff), linear-gradient(90deg, #54B5E3, #C69CFF);
          background-origin: border-box;
          background-clip: padding-box, border-box;
          box-shadow: 0 2px 8px rgba(84,181,227,0.4), 0 1px 2px rgba(0,0,0,0.05);
          margin-top: -3px;
          cursor: grab;
          transition: transform 0.15s;
        }
        .cb-roi-slider::-webkit-slider-thumb:active { transform: scale(1.15); cursor: grabbing; }
        .cb-roi-slider::-moz-range-thumb {
          width: 22px; height: 22px;
          border-radius: 50%;
          background: #fff;
          border: 2px solid #54B5E3;
          box-shadow: 0 2px 8px rgba(84,181,227,0.4);
          cursor: grab;
        }
        .cb-roi-slider-ticks {
          position: absolute;
          top: 36px;
          left: 0; right: 0;
          height: 16px;
          pointer-events: none;
        }
        .cb-roi-tick {
          position: absolute;
          transform: translateX(-50%);
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 4px;
        }
        .cb-roi-tick-mark { width: 1px; height: 4px; background: var(--border); }
        .cb-roi-tick-label {
          font-family: 'Geist Mono', monospace;
          font-size: 10px;
          color: var(--fg-faint);
        }
        .cb-roi-toggle-line {
          display: flex;
          justify-content: space-between;
          align-items: center;
          gap: 16px;
          flex-wrap: wrap;
        }
        .cb-roi-toggle-label {
          font-size: 14px;
          color: var(--fg-soft);
          font-weight: 500;
        }
        .cb-roi-pill-binary button { padding: 8px 14px; font-size: 13px; }

        /* ── Cards comparaison ── */
        .cb-roi-cards {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 20px;
          margin-bottom: 28px;
        }
        .cb-roi-card {
          position: relative;
          padding: 26px 28px;
          background: #fff;
          border: 1px solid var(--border);
          border-radius: 18px;
          transition: transform 0.25s ease;
        }
        .cb-roi-card-cb {
          border: 2px solid transparent;
          background-image: linear-gradient(#fff, #fff), linear-gradient(135deg, #54B5E3, #C69CFF);
          background-origin: border-box;
          background-clip: padding-box, border-box;
          box-shadow: 0 16px 40px -20px rgba(84,181,227,0.4);
        }
        .cb-roi-card-recommended {
          position: absolute;
          top: -12px;
          right: 16px;
          padding: 4px 10px;
          background: linear-gradient(90deg, #54B5E3, #C69CFF);
          color: #fff;
          font-size: 10px;
          font-weight: 600;
          letter-spacing: 0.06em;
          text-transform: uppercase;
          border-radius: 999px;
          box-shadow: 0 4px 12px -2px rgba(84,181,227,0.4);
        }
        .cb-roi-card-header { margin-bottom: 18px; }
        .cb-roi-card-logo {
          font-size: 18px;
          font-weight: 600;
          color: var(--fg);
          letter-spacing: -0.01em;
          margin-bottom: 4px;
        }
        .cb-roi-card-logo-cb {
          background: linear-gradient(90deg, #54B5E3, #C69CFF);
          -webkit-background-clip: text;
          background-clip: text;
          color: transparent;
        }
        .cb-roi-card-plan {
          font-size: 13px;
          color: var(--fg-muted);
        }
        .cb-roi-card-price {
          font-size: 32px;
          font-weight: 700;
          letter-spacing: -0.02em;
          color: var(--fg);
          margin-bottom: 18px;
          font-variant-numeric: tabular-nums;
        }
        .cb-roi-card-price span {
          font-size: 14px;
          font-weight: 500;
          color: var(--fg-muted);
          margin-left: 6px;
        }
        .cb-roi-card-price-cb { font-size: 30px; }
        .cb-roi-price-green {
          color: #15803d;
          font-weight: 800;
          letter-spacing: -0.015em;
        }
        .cb-roi-card-breakdown {
          padding-top: 16px;
          border-top: 1px solid var(--border-soft);
          display: flex;
          flex-direction: column;
          gap: 10px;
          font-size: 13.5px;
          color: var(--fg-soft);
        }
        .cb-roi-card-line {
          display: flex;
          justify-content: space-between;
          align-items: baseline;
          gap: 12px;
        }
        .cb-roi-card-line-warning {
          margin-top: 4px;
          padding: 10px 12px;
          background: rgba(217, 119, 6, 0.08);
          border: 1px solid rgba(217, 119, 6, 0.2);
          border-radius: 8px;
          font-size: 12.5px;
          font-weight: 500;
        }
        .cb-roi-card-line-success {
          margin-top: 4px;
          padding: 10px 12px;
          background: rgba(22, 163, 74, 0.08);
          border: 1px solid rgba(22, 163, 74, 0.2);
          border-radius: 8px;
          font-size: 12.5px;
          font-weight: 500;
          color: #166534;
        }

        /* ── Savings ── */
        .cb-roi-savings {
          margin-bottom: 56px;
          padding: 24px 28px;
          background: linear-gradient(135deg, rgba(84,181,227,0.06) 0%, rgba(198,156,255,0.06) 100%);
          border: 1px solid rgba(198,156,255,0.25);
          border-radius: 16px;
        }
        .cb-roi-savings-row {
          display: grid;
          grid-template-columns: 1fr auto 1fr;
          align-items: end;
          gap: 24px;
        }
        .cb-roi-savings-item {
          text-align: center;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: flex-end;
        }
        .cb-roi-savings-divider {
          width: 1px;
          height: 64px;
          background: var(--border);
          justify-self: center;
        }
        .cb-roi-savings-label {
          font-size: 12px;
          text-transform: uppercase;
          letter-spacing: 0.08em;
          color: var(--fg-muted);
          font-weight: 600;
          margin-bottom: 6px;
          font-family: 'Geist Mono', monospace;
        }
        .cb-roi-savings-value {
          font-size: 28px;
          font-weight: 700;
          letter-spacing: -0.02em;
          color: var(--fg);
          font-variant-numeric: tabular-nums;
        }
        .cb-roi-savings-value span { font-size: 14px; font-weight: 500; color: var(--fg-muted); margin-left: 6px; }
        .cb-roi-savings-value-big { font-size: 42px; }
        .cb-roi-savings-green {
          color: #15803d;
          font-weight: 800;
          letter-spacing: -0.025em;
        }

        /* ── Bridge / transition ── */
        .cb-roi-bridge {
          text-align: center;
          margin: 0 auto 48px;
          max-width: 540px;
        }
        .cb-roi-bridge-line {
          width: 1px;
          height: 32px;
          background: linear-gradient(180deg, transparent, var(--border));
          margin: 0 auto 18px;
        }
        .cb-roi-bridge-text {
          font-size: 19px;
          line-height: 1.5;
          color: var(--fg-soft);
          font-weight: 400;
          text-wrap: balance;
        }
        .cb-roi-bridge-text strong {
          color: var(--fg);
          font-weight: 600;
          background: linear-gradient(90deg, #54B5E3, #C69CFF);
          -webkit-background-clip: text;
          background-clip: text;
          color: transparent;
        }
        .cb-roi-bridge-arrow {
          margin-top: 18px;
          font-size: 24px;
          color: #C69CFF;
          animation: cb-roi-bounce 2s ease-in-out infinite;
        }
        @keyframes cb-roi-bounce {
          0%, 100% { transform: translateY(0); }
          50% { transform: translateY(6px); }
        }

        /* ── Funnel ── */
        .cb-roi-funnel {
          display: flex;
          align-items: stretch;
          justify-content: center;
          gap: 8px;
          margin-bottom: 56px;
          padding: 22px 18px;
          background: #fff;
          border: 1px solid var(--border);
          border-radius: 18px;
        }
        .cb-roi-funnel-step {
          flex: 1;
          min-width: 0;
          text-align: center;
          padding: 12px 6px;
          border-radius: 12px;
          transition: background 0.2s;
        }
        .cb-roi-funnel-step-final {
          background: linear-gradient(135deg, rgba(84,181,227,0.08) 0%, rgba(198,156,255,0.08) 100%);
        }
        .cb-roi-funnel-icon { font-size: 18px; margin-bottom: 6px; }
        .cb-roi-funnel-label {
          font-size: 10px;
          text-transform: uppercase;
          letter-spacing: 0.04em;
          color: var(--fg-muted);
          font-weight: 600;
          margin-bottom: 8px;
          font-family: 'Geist Mono', monospace;
          min-height: 26px;
          line-height: 1.3;
        }
        .cb-roi-funnel-value {
          font-size: 17px;
          font-weight: 700;
          color: var(--fg);
          letter-spacing: -0.015em;
          font-variant-numeric: tabular-nums;
          line-height: 1.1;
          word-break: break-word;
          overflow-wrap: anywhere;
        }
        .cb-roi-funnel-value-final { font-size: 18px; }
        .cb-roi-funnel-unit { font-size: 10px; color: var(--fg-muted); margin-top: 4px; }
        .cb-roi-funnel-arrow {
          display: flex;
          align-items: center;
          color: var(--fg-faint);
          font-size: 16px;
          font-weight: 400;
          flex-shrink: 0;
        }

        /* ── Punch ── */
        .cb-roi-punch {
          text-align: center;
          padding: 40px 32px;
          background: linear-gradient(135deg, rgba(84,181,227,0.05) 0%, rgba(198,156,255,0.05) 100%);
          border: 1px solid rgba(198,156,255,0.25);
          border-radius: 20px;
          margin-bottom: 32px;
        }
        .cb-roi-punch-eyebrow {
          font-size: 12px;
          text-transform: uppercase;
          letter-spacing: 0.1em;
          color: var(--fg-muted);
          font-weight: 600;
          font-family: 'Geist Mono', monospace;
          margin-bottom: 18px;
        }
        .cb-roi-punch-strike {
          font-size: 16px;
          color: var(--fg-muted);
          text-decoration: line-through;
          text-decoration-color: rgba(198,156,255,0.5);
          margin-bottom: 14px;
          font-variant-numeric: tabular-nums;
        }
        .cb-roi-punch-big {
          display: flex;
          align-items: baseline;
          justify-content: center;
          gap: 12px;
          flex-wrap: nowrap;
          white-space: nowrap;
          margin-bottom: 18px;
          font-variant-numeric: tabular-nums;
        }
        .cb-roi-punch-amount {
          font-size: clamp(30px, 5.4vw, 52px);
          font-weight: 700;
          letter-spacing: -0.03em;
          line-height: 1.05;
        }
        .cb-roi-punch-unit {
          font-size: clamp(16px, 2.2vw, 22px);
          font-weight: 600;
          letter-spacing: -0.01em;
        }
        .cb-roi-punch-desc {
          font-size: 16px;
          color: var(--fg-soft);
          line-height: 1.6;
          max-width: 480px;
          margin: 0 auto;
          text-wrap: pretty;
        }

        /* ── CTA ── */
        .cb-roi-cta-wrap { text-align: center; margin-bottom: 28px; }
        .cb-roi-cta,
        .cb-roi-cta:hover,
        .cb-roi-cta:visited,
        .cb-prose .cb-roi-cta,
        .cb-prose .cb-roi-cta:hover,
        .cb-prose .cb-roi-cta:visited {
          display: inline-flex;
          align-items: center;
          gap: 8px;
          padding: 16px 32px !important;
          font-size: 16px !important;
          font-weight: 600;
          border-radius: 999px;
          text-decoration: none !important;
          color: #fff !important;
        }
        .cb-roi-cta-sub {
          margin-top: 14px;
          font-size: 13px;
          color: var(--fg-muted);
        }

        .cb-roi-sources {
          padding-top: 20px;
          border-top: 1px solid var(--border-soft);
          font-size: 11.5px;
          color: var(--fg-faint);
          text-align: center;
          line-height: 1.6;
          font-family: 'Geist Mono', monospace;
          letter-spacing: 0.01em;
        }

        /* ── Responsive ── */
        @media (max-width: 760px) {
          .cb-roi {
            margin: 40px -16px;
            padding: 32px 20px;
            border-radius: 22px;
          }
          .cb-roi-toggles { gap: 10px; }
          .cb-roi-pill button { padding: 7px 14px; font-size: 13px; }
          .cb-roi-inputs { padding: 22px 18px; gap: 18px; }
          .cb-roi-cards { grid-template-columns: 1fr; gap: 16px; }
          .cb-roi-savings-row { flex-direction: column; gap: 16px; }
          .cb-roi-savings-divider { width: 56px; height: 1px; }
          .cb-roi-savings-value { font-size: 24px; }
          .cb-roi-savings-value-big { font-size: 30px; }
          .cb-roi-funnel {
            flex-direction: column;
            gap: 8px;
            padding: 20px 16px;
          }
          .cb-roi-funnel-arrow { transform: rotate(90deg); justify-content: center; }
          .cb-roi-funnel-label { min-height: auto; }
          .cb-roi-punch { padding: 28px 20px; }
          .cb-roi-toggle-line { flex-direction: column; align-items: flex-start; gap: 10px; }
        }
        @media (max-width: 420px) {
          .cb-roi-card-price { font-size: 26px; }
          .cb-roi-card-price-cb { font-size: 30px; }
        }
      `}</style>
    </div>
  );
};

// ─────────────────────────────────────────────────────────────
// AUTO-MOUNT
// Cherche tous les <div data-cb-roi-comparator data-context="..."> et y monte le composant.
// Réutilisable : appelé après chaque parse de markdown blog.
// ─────────────────────────────────────────────────────────────

const mountBlogRoiComparators = (root) => {
  const scope = root || document;
  const targets = scope.querySelectorAll('[data-cb-roi-comparator]:not([data-cb-roi-mounted])');
  targets.forEach((el) => {
    const context = el.getAttribute('data-context') || 'vs-easybroker';
    el.setAttribute('data-cb-roi-mounted', '1');
    try {
      const Provider = window.CountryProvider;
      const element = Provider
        ? React.createElement(Provider, null, React.createElement(BlogRoiComparator, { context }))
        : React.createElement(BlogRoiComparator, { context });
      if (window.ReactDOM && window.ReactDOM.createRoot) {
        window.ReactDOM.createRoot(el).render(element);
      } else if (window.ReactDOM && window.ReactDOM.render) {
        window.ReactDOM.render(element, el);
      }
    } catch (e) {
      console.error('mountBlogRoiComparators error:', e);
    }
  });
};

window.BlogRoiComparator = BlogRoiComparator;
window.mountBlogRoiComparators = mountBlogRoiComparators;