// WealthSimulator — projection patrimoniale 10 ans partageable (Vague 5 PR 5.2)
// Affiche équité + cashflow cumulé + comparaison CELI, sans login requis.
// Mode compact=true pour intégration dans ListingDrawer.

const { useState: useStateWS, useMemo: useMemoWS } = React;

// ── Calculs projection 10 ans ────────────────────────────────────────────────
function computeWealthProjection(listing, overrides = {}) {
  const price        = listing.price || 0;
  const units        = listing.units || 1;

  // Hypothèses standard (sauf si override)
  const downPct      = overrides.downPct      ?? 0.20;
  const rate         = overrides.rate         ?? 0.055;
  const amort        = overrides.amort        ?? 25;
  const priceGrowth  = overrides.priceGrowth  ?? 0.03;
  const opexRatio    = overrides.opexRatio    ?? 0.40;
  const celiRate     = overrides.celiRate     ?? 0.06;

  // Revenu locatif annuel brut
  let grossRent;
  if (listing.metrics?.potentialGrossIncome > 0) {
    grossRent = listing.metrics.potentialGrossIncome;
  } else if (listing.metrics?.effectiveIncome > 0) {
    grossRent = listing.metrics.effectiveIncome;
  } else {
    grossRent = units * 1100 * 12; // 1100$/porte/mois
  }

  const downPayment  = price * downPct;
  const loanAmt      = price - downPayment;

  // Paiement mensuel hypothèque (formule canadienne — renouvellement 5 ans)
  const r = rate / 2; // taux semi-annuel
  const effRate = Math.pow(1 + r, 2) - 1; // taux effectif annuel
  const mRate   = Math.pow(1 + effRate, 1 / 12) - 1;
  const n       = amort * 12;
  const monthlyPayment = n === 0 ? 0 :
    loanAmt * (mRate * Math.pow(1 + mRate, n)) / (Math.pow(1 + mRate, n) - 1);
  const annualDebtService = monthlyPayment * 12;

  // Projection année par année
  const years = 10;
  const equityData    = [];
  const cashflowData  = [];
  let balance = loanAmt;
  let cumulCF = 0;
  let celiBalance = downPayment; // même mise de fonds investie en CELI

  for (let y = 1; y <= years; y++) {
    // Remboursement capital cette année
    let principalPaid = 0;
    for (let m = 0; m < 12; m++) {
      const interest = balance * mRate;
      const principal = monthlyPayment - interest;
      principalPaid += principal;
      balance = Math.max(0, balance - principal);
    }

    // Prix estimé en fin d'année
    const estimatedPrice = price * Math.pow(1 + priceGrowth, y);

    // Équité = prix estimé - solde hypothèque
    const equity = estimatedPrice - balance;

    // Cashflow annuel (revenu brut × (1 - opex ratio) - service dette)
    const noi = grossRent * (1 - opexRatio);
    const annualCF = noi - annualDebtService;
    cumulCF += annualCF;

    // Croissance CELI
    celiBalance *= (1 + celiRate);

    equityData.push({ y, equity, estimatedPrice, loanBalance: balance });
    cashflowData.push({ y, cumulCF, annualCF });
  }

  const finalEquity     = equityData[years - 1].equity;
  const finalCF         = cashflowData[years - 1].cumulCF;
  const totalReturn     = finalEquity + finalCF;
  const roi             = downPayment > 0 ? (totalReturn - downPayment) / downPayment : 0;
  const celiValue       = celiBalance;

  return {
    downPayment, loanAmt, monthlyPayment, grossRent,
    equityData, cashflowData,
    finalEquity, finalCF, totalReturn, roi, celiValue,
  };
}

// ── Graphique SVG inline 2 courbes ───────────────────────────────────────────
function WealthChart({ equityData, cashflowData, lang, compact }) {
  const W   = compact ? 300 : 500;
  const H   = compact ? 140 : 200;
  const PAD = { top: 16, right: 16, bottom: 28, left: 56 };

  const innerW = W - PAD.left - PAD.right;
  const innerH = H - PAD.top - PAD.bottom;
  const years  = equityData.length;

  const allValues = [
    ...equityData.map(d => d.equity),
    ...cashflowData.map(d => d.cumulCF),
    0,
  ];
  const vMin = Math.min(...allValues);
  const vMax = Math.max(...allValues);
  const vRange = vMax - vMin || 1;

  const xScale = (i) => PAD.left + (i / (years - 1)) * innerW;
  const yScale = (v) => PAD.top + innerH - ((v - vMin) / vRange) * innerH;

  const pathFor = (data, getter) => {
    return data
      .map((d, i) => `${i === 0 ? 'M' : 'L'}${xScale(i).toFixed(1)},${yScale(getter(d)).toFixed(1)}`)
      .join(' ');
  };

  const fmtK = (v) => {
    if (Math.abs(v) >= 1000000) return `${(v / 1000000).toFixed(1)}M`;
    if (Math.abs(v) >= 1000)    return `${Math.round(v / 1000)}k`;
    return Math.round(v).toString();
  };

  // Ticks axe Y (3 valeurs)
  const yTicks = [vMin, (vMin + vMax) / 2, vMax].map(v => ({ v, y: yScale(v) }));

  return (
    <svg
      viewBox={`0 0 ${W} ${H}`}
      width="100%"
      style={{ display: 'block', overflow: 'visible' }}
      aria-label={lang === 'fr' ? 'Graphique projection 10 ans' : '10-year projection chart'}
    >
      {/* Grille horizontale */}
      {yTicks.map((t, i) => (
        <g key={i}>
          <line
            x1={PAD.left} y1={t.y.toFixed(1)}
            x2={PAD.left + innerW} y2={t.y.toFixed(1)}
            stroke="#e5e7eb" strokeWidth="1"
          />
          <text x={PAD.left - 4} y={t.y} textAnchor="end" fontSize={compact ? 9 : 10}
            dominantBaseline="middle" fill="#9ca3af">
            {fmtK(t.v)}
          </text>
        </g>
      ))}

      {/* Axe X — années */}
      {[1, 3, 5, 7, 10].filter(y => y <= years).map(yr => {
        const i = yr - 1;
        const x = xScale(i);
        return (
          <text key={yr} x={x.toFixed(1)} y={H - 6} textAnchor="middle"
            fontSize={compact ? 9 : 10} fill="#9ca3af">
            {yr === 10 ? `an ${yr}` : yr}
          </text>
        );
      })}

      {/* Ligne zéro si cashflow négatif */}
      {vMin < 0 && (
        <line
          x1={PAD.left} y1={yScale(0).toFixed(1)}
          x2={PAD.left + innerW} y2={yScale(0).toFixed(1)}
          stroke="#d1d5db" strokeWidth="1.5" strokeDasharray="4 3"
        />
      )}

      {/* Courbe équité (vert) */}
      <path
        d={pathFor(equityData, d => d.equity)}
        fill="none" stroke="#16a34a" strokeWidth={compact ? 2 : 2.5}
        strokeLinecap="round" strokeLinejoin="round"
      />

      {/* Courbe cashflow cumulé (violet) */}
      <path
        d={pathFor(cashflowData, d => d.cumulCF)}
        fill="none" stroke="#7c3aed" strokeWidth={compact ? 2 : 2.5}
        strokeLinecap="round" strokeLinejoin="round"
        strokeDasharray={compact ? '4 2' : ''}
      />

      {/* Légende */}
      <g transform={`translate(${PAD.left + 4}, ${PAD.top + 6})`}>
        <line x1="0" y1="5" x2="18" y2="5" stroke="#16a34a" strokeWidth="2"/>
        <text x="22" y="9" fontSize={compact ? 9 : 10} fill="#374151">
          {lang === 'fr' ? 'Équité' : 'Equity'}
        </text>
        <line x1={compact ? 64 : 70} y1="5" x2={compact ? 82 : 88} y2="5"
          stroke="#7c3aed" strokeWidth="2" strokeDasharray="4 2"/>
        <text x={compact ? 86 : 92} y="9" fontSize={compact ? 9 : 10} fill="#374151">
          {lang === 'fr' ? 'CF cumulé' : 'Cumul. CF'}
        </text>
      </g>
    </svg>
  );
}

// ── Composant principal ──────────────────────────────────────────────────────
function WealthSimulator({ listing, lang, compact }) {
  const FR = lang !== 'en';

  const proj = useMemoWS(() => {
    if (!listing || !listing.price) return null;
    return computeWealthProjection(listing);
  }, [listing && listing.id]);

  if (!proj) return null;

  const fmt = window.fmt || {
    money:      (v) => `${Math.round(v || 0).toLocaleString('fr-CA')} $`,
    moneyShort: (v) => {
      const abs = Math.abs(v || 0);
      if (abs >= 1000000) return `${(v / 1000000).toFixed(1)}M $`;
      if (abs >= 1000)    return `${Math.round(v / 1000)}k $`;
      return `${Math.round(v)} $`;
    },
    pct: (v) => v != null ? `${(v * 100).toFixed(1)} %` : '—',
  };

  const shareUrl = typeof window !== 'undefined'
    ? `${window.location.origin}/#/simulator/${listing.id}`
    : `#/simulator/${listing.id}`;

  const handleShare = () => {
    if (navigator.clipboard) {
      navigator.clipboard.writeText(shareUrl).catch(() => {});
    }
    // Feedback visuel via alert (fallback universel sans toast library)
    alert(FR ? 'Lien copié ! Partagez-le avec vos contacts.' : 'Link copied! Share it with your contacts.');
  };

  const handleShareTwitter = () => {
    const text = FR
      ? `Ce plex à ${fmt.moneyShort(listing.price)} à ${listing.city} pourrait générer ${fmt.moneyShort(proj.finalEquity)} d'équité en 10 ans. Analyse via Vestora :`
      : `This plex at ${fmt.moneyShort(listing.price)} in ${listing.city} could generate ${fmt.moneyShort(proj.finalEquity)} equity in 10 years. Analysis via Vestora:`;
    window.open(`https://twitter.com/intent/tweet?text=${encodeURIComponent(text)}&url=${encodeURIComponent(shareUrl)}`, '_blank');
  };

  const handleShareFB = () => {
    window.open(`https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(shareUrl)}`, '_blank');
  };

  const roiPositive = proj.roi > 0;
  const cfPositive  = proj.finalCF > 0;

  if (compact) {
    return (
      <section id="section-wealth-simulator" style={{ marginTop: 16 }}>
        <h3 className="section-title" style={{ marginBottom: 8 }}>
          {FR ? 'Projection patrimoniale 10 ans' : '10-Year Wealth Projection'}
          <small>{FR ? 'Estimation Vestora' : 'Vestora Estimate'}</small>
        </h3>

        {/* KPI row compact */}
        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)',
          gap: 8, marginBottom: 10,
        }}>
          <div style={{ textAlign: 'center', padding: '10px 6px', background: 'oklch(0.97 0.04 145)', borderRadius: 8 }}>
            <div style={{ fontSize: 10, color: '#6b7280', marginBottom: 2, textTransform: 'uppercase', letterSpacing: '0.04em' }}>
              {FR ? 'Équité 10 ans' : 'Equity 10y'}
            </div>
            <div style={{ fontSize: 15, fontWeight: 700, color: '#15803d', fontFamily: 'var(--font-mono, monospace)' }}>
              {fmt.moneyShort(proj.finalEquity)}
            </div>
          </div>
          <div style={{ textAlign: 'center', padding: '10px 6px', background: cfPositive ? 'oklch(0.97 0.04 145)' : 'oklch(0.97 0.04 25)', borderRadius: 8 }}>
            <div style={{ fontSize: 10, color: '#6b7280', marginBottom: 2, textTransform: 'uppercase', letterSpacing: '0.04em' }}>
              {FR ? 'CF cumulé' : 'Cumul. CF'}
            </div>
            <div style={{ fontSize: 15, fontWeight: 700, color: cfPositive ? '#15803d' : '#dc2626', fontFamily: 'var(--font-mono, monospace)' }}>
              {cfPositive ? '+' : ''}{fmt.moneyShort(proj.finalCF)}
            </div>
          </div>
          <div style={{ textAlign: 'center', padding: '10px 6px', background: 'oklch(0.97 0.04 280)', borderRadius: 8 }}>
            <div style={{ fontSize: 10, color: '#6b7280', marginBottom: 2, textTransform: 'uppercase', letterSpacing: '0.04em' }}>
              {FR ? 'vs CELI 6%' : 'vs TFSA 6%'}
            </div>
            <div style={{ fontSize: 13, fontWeight: 600, color: '#7c3aed', fontFamily: 'var(--font-mono, monospace)' }}>
              {fmt.moneyShort(proj.celiValue)}
            </div>
          </div>
        </div>

        {/* Mini graphique */}
        <WealthChart
          equityData={proj.equityData}
          cashflowData={proj.cashflowData}
          lang={lang}
          compact={true}
        />

        {/* Watermark + CTA */}
        <div style={{
          marginTop: 10, padding: '10px 12px',
          background: 'linear-gradient(135deg, oklch(0.97 0.04 145), oklch(0.97 0.04 280))',
          borderRadius: 8, fontSize: 11, color: '#374151',
          display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8,
          flexWrap: 'wrap',
        }}>
          <span style={{ color: '#6b7280', fontStyle: 'italic' }}>
            {FR ? 'Estimation Vestora — hypothèses standard (20% mise de fonds, 5.5%, 25 ans, 3%/an)' : 'Vestora estimate — standard assumptions (20% down, 5.5%, 25yr, 3%/yr)'}
          </span>
          <div style={{ display: 'flex', gap: 6, flexShrink: 0 }}>
            <button
              onClick={() => window.navigateTo && window.navigateTo(`#/simulator/${listing.id}`)}
              style={{
                fontSize: 11, fontWeight: 600, padding: '5px 10px',
                background: 'var(--accent, oklch(0.36 0.07 155))', color: '#fff',
                border: 'none', borderRadius: 6, cursor: 'pointer', fontFamily: 'inherit',
              }}
            >
              {FR ? 'Partager' : 'Share'}
            </button>
            <button
              onClick={() => window.vestora?.auth?.openModal && window.vestora.auth.openModal()}
              style={{
                fontSize: 11, fontWeight: 600, padding: '5px 10px',
                background: '#fff', color: 'var(--accent, oklch(0.36 0.07 155))',
                border: '1px solid var(--accent, oklch(0.36 0.07 155))',
                borderRadius: 6, cursor: 'pointer', fontFamily: 'inherit',
              }}
            >
              {FR ? 'Personnaliser' : 'Customize'}
            </button>
          </div>
        </div>
      </section>
    );
  }

  // Mode full (page partageable)
  return (
    <div style={{ fontFamily: 'var(--font-body, system-ui, sans-serif)', maxWidth: 680, margin: '0 auto', padding: '0 16px' }}>
      {/* En-tête */}
      <div style={{ marginBottom: 24 }}>
        <div style={{ fontSize: 13, color: '#6b7280', marginBottom: 4 }}>
          {FR ? 'Projection patrimoniale' : 'Wealth Projection'}
          {' · '}
          <span style={{ fontWeight: 600, color: '#374151' }}>
            {listing.address || listing.city}
          </span>
        </div>
        <h2 style={{ margin: 0, fontSize: 22, fontWeight: 700, color: '#111827' }}>
          {FR ? 'Si vous achetiez ce bien, dans 10 ans...' : 'If you bought this property, in 10 years...'}
        </h2>
        <div style={{ fontSize: 13, color: '#6b7280', marginTop: 4 }}>
          {FR
            ? `${listing.type || 'Immeuble'} · ${listing.units} unité${listing.units > 1 ? 's' : ''} · ${fmt.money(listing.price, 'fr-CA')}`
            : `${listing.type || 'Building'} · ${listing.units} unit${listing.units > 1 ? 's' : ''} · ${fmt.money(listing.price)}`}
        </div>
      </div>

      {/* KPIs principaux */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 12, marginBottom: 24 }}>
        <div style={{
          padding: 20, borderRadius: 12,
          background: 'linear-gradient(135deg, #dcfce7, #bbf7d0)',
          border: '1px solid #86efac',
        }}>
          <div style={{ fontSize: 11, color: '#166534', textTransform: 'uppercase', letterSpacing: '0.05em', marginBottom: 6 }}>
            {FR ? 'Équité estimée à 10 ans' : 'Estimated equity at 10 years'}
          </div>
          <div style={{ fontSize: 28, fontWeight: 800, color: '#15803d', fontFamily: 'var(--font-mono, monospace)', lineHeight: 1.1 }}>
            {fmt.money(proj.finalEquity, 'fr-CA')}
          </div>
          <div style={{ fontSize: 12, color: '#166534', marginTop: 4 }}>
            {FR
              ? `(mise de fonds initiale : ${fmt.moneyShort(proj.downPayment)})`
              : `(initial down payment: ${fmt.moneyShort(proj.downPayment)})`}
          </div>
        </div>

        <div style={{
          padding: 20, borderRadius: 12,
          background: cfPositive
            ? 'linear-gradient(135deg, #ede9fe, #ddd6fe)'
            : 'linear-gradient(135deg, #fef2f2, #fecaca)',
          border: `1px solid ${cfPositive ? '#a78bfa' : '#fca5a5'}`,
        }}>
          <div style={{ fontSize: 11, color: cfPositive ? '#5b21b6' : '#991b1b', textTransform: 'uppercase', letterSpacing: '0.05em', marginBottom: 6 }}>
            {FR ? 'Cashflow cumulé 10 ans' : '10-year cumulative cash flow'}
          </div>
          <div style={{ fontSize: 28, fontWeight: 800, color: cfPositive ? '#7c3aed' : '#dc2626', fontFamily: 'var(--font-mono, monospace)', lineHeight: 1.1 }}>
            {cfPositive ? '+' : ''}{fmt.money(proj.finalCF, 'fr-CA')}
          </div>
          <div style={{ fontSize: 12, color: cfPositive ? '#6d28d9' : '#991b1b', marginTop: 4 }}>
            {FR
              ? `(${fmt.moneyShort(proj.finalCF / 10)} / an en moyenne)`
              : `(${fmt.moneyShort(proj.finalCF / 10)} / year on average)`}
          </div>
        </div>
      </div>

      {/* Comparaison CELI */}
      <div style={{
        padding: '14px 18px', borderRadius: 10, marginBottom: 20,
        background: '#f9fafb', border: '1px solid #e5e7eb',
        display: 'flex', alignItems: 'center', gap: 16, flexWrap: 'wrap',
      }}>
        <div style={{ flex: 1, minWidth: 160 }}>
          <div style={{ fontSize: 11, color: '#6b7280', marginBottom: 2 }}>
            {FR ? 'vs CELI à 6 %/an (même mise de fonds)' : 'vs TFSA at 6%/yr (same down payment)'}
          </div>
          <div style={{ fontSize: 16, fontWeight: 700, color: '#7c3aed', fontFamily: 'var(--font-mono, monospace)' }}>
            {fmt.money(proj.celiValue, 'fr-CA')}
          </div>
        </div>
        <div style={{ flex: 1, minWidth: 160 }}>
          <div style={{ fontSize: 11, color: '#6b7280', marginBottom: 2 }}>
            {FR ? 'ROI total immobilier 10 ans' : 'Total real estate ROI 10yr'}
          </div>
          <div style={{ fontSize: 16, fontWeight: 700, color: roiPositive ? '#16a34a' : '#dc2626', fontFamily: 'var(--font-mono, monospace)' }}>
            {roiPositive ? '+' : ''}{fmt.pct(proj.roi)}
          </div>
        </div>
        <div style={{ fontSize: 11, color: '#9ca3af', flex: '0 0 auto', maxWidth: 180 }}>
          {FR
            ? `L'immobilier inclut l'appréciation + remboursement capital + cashflows.`
            : `Real estate includes appreciation + principal paydown + cash flows.`}
        </div>
      </div>

      {/* Graphique */}
      <div style={{ marginBottom: 20 }}>
        <WealthChart
          equityData={proj.equityData}
          cashflowData={proj.cashflowData}
          lang={lang}
          compact={false}
        />
      </div>

      {/* Watermark hypothèses */}
      <div style={{
        padding: '12px 16px', borderRadius: 8, marginBottom: 20,
        background: 'oklch(0.97 0.03 145)', border: '1px solid oklch(0.90 0.05 145)',
        fontSize: 12, color: '#374151', lineHeight: 1.6,
      }}>
        <strong style={{ color: '#166534' }}>
          {FR ? 'Estimation Vestora' : 'Vestora Estimate'}
        </strong>
        {' — '}
        {FR
          ? `Hypothèses standard : mise de fonds 20 %, taux 5,5 %, amortissement 25 ans, croissance prix 3 %/an, OpEx 40 % des revenus bruts, loyer ${listing.units} unité${listing.units > 1 ? 's' : ''} × 1 100 $/mois (si non déclaré). Ces projections sont indicatives et non garanties.`
          : `Standard assumptions: 20% down, 5.5% rate, 25-year amortization, 3%/yr price growth, OpEx 40% of gross income, rent ${listing.units} unit${listing.units > 1 ? 's' : ''} × $1,100/month (if not declared). These projections are indicative and not guaranteed.`}
      </div>

      {/* Boutons partage */}
      <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap', marginBottom: 24 }}>
        <button
          onClick={handleShareTwitter}
          style={{
            display: 'flex', alignItems: 'center', gap: 7,
            padding: '10px 16px', borderRadius: 8,
            background: '#1d9bf0', color: '#fff',
            border: 'none', cursor: 'pointer', fontWeight: 600, fontSize: 13,
            fontFamily: 'inherit',
          }}
        >
          <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
            <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-4.714-6.231-5.401 6.231H2.734l7.738-8.835L1.254 2.25H8.08l4.259 5.63zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>
          </svg>
          {FR ? 'Partager sur X' : 'Share on X'}
        </button>
        <button
          onClick={handleShareFB}
          style={{
            display: 'flex', alignItems: 'center', gap: 7,
            padding: '10px 16px', borderRadius: 8,
            background: '#1877f2', color: '#fff',
            border: 'none', cursor: 'pointer', fontWeight: 600, fontSize: 13,
            fontFamily: 'inherit',
          }}
        >
          <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
            <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
          </svg>
          {FR ? 'Partager sur Facebook' : 'Share on Facebook'}
        </button>
        <button
          onClick={handleShare}
          style={{
            display: 'flex', alignItems: 'center', gap: 7,
            padding: '10px 16px', borderRadius: 8,
            background: '#fff', color: '#374151',
            border: '1px solid #d1d5db', cursor: 'pointer', fontWeight: 600, fontSize: 13,
            fontFamily: 'inherit',
          }}
        >
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
            <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/>
            <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/>
          </svg>
          {FR ? 'Copier le lien' : 'Copy link'}
        </button>
      </div>

      {/* CTA compte */}
      <div style={{
        padding: 20, borderRadius: 12,
        background: 'linear-gradient(135deg, oklch(0.22 0.05 155), oklch(0.30 0.08 155))',
        color: '#fff', textAlign: 'center',
      }}>
        <div style={{ fontSize: 16, fontWeight: 700, marginBottom: 6 }}>
          {FR
            ? 'Personnalisez vos hypothèses et obtenez une analyse complète'
            : 'Customize your assumptions and get a full analysis'}
        </div>
        <div style={{ fontSize: 13, opacity: 0.85, marginBottom: 14 }}>
          {FR
            ? 'Taux, mise de fonds, scénarios pessimiste/optimiste, fiscalité QC, stress test — gratuit avec votre compte Vestora.'
            : 'Rate, down payment, pessimistic/optimistic scenarios, QC tax, stress test — free with your Vestora account.'}
        </div>
        <button
          onClick={() => window.vestora?.auth?.openModal && window.vestora.auth.openModal()}
          style={{
            display: 'inline-block', padding: '11px 28px',
            background: '#fff', color: 'oklch(0.28 0.07 155)',
            border: 'none', borderRadius: 8,
            fontSize: 14, fontWeight: 700, cursor: 'pointer', fontFamily: 'inherit',
          }}
        >
          {FR ? 'Créer mon compte gratuit' : 'Create my free account'}
        </button>
      </div>
    </div>
  );
}

Object.assign(window, { WealthSimulator });