const SimRow = ({ label, value, accent, bold }) => (
  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
    <span style={{ fontSize: 14, color: '#393A3D' }}>{label}</span>
    <span style={{
      fontSize: bold ? 20 : 16,
      fontWeight: bold ? 900 : 600,
      color: accent ? '#2036FF' : '#1E1E1E',
      letterSpacing: '-0.01em'
    }}>{value}</span>
  </div>
);

const Simulator = ({ variant }) => {
  const [amount, setAmount] = React.useState(10000);
  const [yieldPct, setYieldPct] = React.useState(10.5);

  const quarterly = amount * (yieldPct / 100) / 4;
  const total2y = amount * (yieldPct / 100) * 2;
  const finalCapital = amount + total2y;

  const quarters = Array.from({ length: 8 }, (_, i) => ({
    label: `T${i % 4 + 1}`,
    year: Math.floor(i / 4) + 1,
    value: quarterly
  }));
  const maxQ = quarterly * 1.2;

  const fmt = (n) => new Intl.NumberFormat('fr-FR', { maximumFractionDigits: 0 }).format(Math.round(n));

  return (
    <section data-screen-label="06 Simulateur" style={{ background: '#F6F6F9', padding: '128px 40px' }}>
      <div style={{ maxWidth: 1240, margin: '0 auto' }}>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 16, marginBottom: 48 }}>
          <span style={{
            fontSize: 12, fontWeight: 600, letterSpacing: '0.16em', textTransform: 'uppercase',
            color: '#2036FF'
          }}>04 — Simulateur</span>
          <div style={{ flex: 1, height: 1, background: '#DEDEDE' }} />
        </div>

        <h2 style={{
          fontSize: 'clamp(36px, 4.2vw, 56px)',
          fontWeight: 900, lineHeight: 1.0, letterSpacing: '-0.028em',
          textTransform: 'uppercase', margin: '0 0 16px', color: '#1E1E1E'
        }}>
          Projetez vos coupons.
        </h2>
        <p style={{ fontSize: 18, color: '#393A3D', margin: '0 0 64px', maxWidth: 640 }}>
          Estimez les distributions trimestrielles brutes que vous percevriez sur 2 ans.
          Objectif indicatif net de frais, hors fiscalité. (non garanti)
        </p>

        <div className="sim-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1.5fr', gap: 48 }}>
          {/* Controls */}
          <div style={{
            background: '#fff', borderRadius: 16, padding: 40, border: '1px solid #DEDEDE',
            display: 'flex', flexDirection: 'column', gap: 32
          }}>
            {/* Amount slider */}
            <div>
              <div style={{
                display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 12
              }}>
                <label style={{
                  fontSize: 13, fontWeight: 500, color: '#393A3D',
                  textTransform: 'uppercase', letterSpacing: '0.06em'
                }}>Montant investi</label>
                <div style={{ fontSize: 28, fontWeight: 900, color: '#1E1E1E', letterSpacing: '-0.02em' }}>
                  {fmt(amount)} €
                </div>
              </div>
              <input
                type="range" min={1000} max={100000} step={500}
                value={amount}
                onChange={(e) => setAmount(Number(e.target.value))}
                style={{ width: '100%', height: 4 }} />
              <div style={{
                display: 'flex', justifyContent: 'space-between',
                fontSize: 11, color: '#A3A3A3', marginTop: 8
              }}>
                <span>1 000 €</span><span>100 000 €</span>
              </div>
            </div>

            {/* Yield slider */}
            <div>
              <div style={{
                display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 12
              }}>
                <label style={{
                  fontSize: 13, fontWeight: 500, color: '#393A3D',
                  textTransform: 'uppercase', letterSpacing: '0.06em'
                }}>Hypothèse de rendement</label>
                <div style={{ fontSize: 28, fontWeight: 900, color: '#2036FF', letterSpacing: '-0.02em' }}>
                  {yieldPct.toFixed(1)} %
                </div>
              </div>
              <input
                type="range" min={9} max={12} step={0.1}
                value={yieldPct}
                onChange={(e) => setYieldPct(Number(e.target.value))}
                style={{ width: '100%', height: 4 }} />
              <div style={{
                display: 'flex', justifyContent: 'space-between',
                fontSize: 11, color: '#A3A3A3', marginTop: 8
              }}>
                <span>9 %</span><span>12 %</span>
              </div>
            </div>

            <div style={{ height: 1, background: '#EEE' }} />

            <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
              <SimRow label="Coupon trimestriel brut" value={`${fmt(quarterly)} €`} />
              <SimRow label="Total intérêts sur 2 ans" value={`${fmt(total2y)} €`} accent />
              <SimRow label="Capital + intérêts à terme" value={`${fmt(finalCapital)} €`} bold />
            </div>
          </div>

          {/* Chart */}
          <div style={{
            background: '#fff', borderRadius: 16, padding: 40, border: '1px solid #DEDEDE'
          }}>
            <div style={{
              display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 32
            }}>
              <div style={{ fontSize: 16, fontWeight: 600, color: '#1E1E1E' }}>
                Distributions trimestrielles
              </div>
              <div style={{ fontSize: 12, color: '#A3A3A3' }}>
                Au prorata · Net de frais, brut de fiscalité
              </div>
            </div>

            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24, marginBottom: 16 }}>
              {[1, 2].map((y) => (
                <div key={y} style={{
                  fontSize: 11, fontWeight: 600, letterSpacing: '0.16em', textTransform: 'uppercase',
                  color: '#393A3D', textAlign: 'center', paddingBottom: 8, borderBottom: '1px solid #DEDEDE'
                }}>
                  Année {y}
                </div>
              ))}
            </div>

            <div style={{
              display: 'grid', gridTemplateColumns: 'repeat(8, 1fr)', gap: 8,
              alignItems: 'end', height: 240, marginBottom: 12
            }}>
              {quarters.map((q, i) => (
                <div key={i} style={{
                  display: 'flex', flexDirection: 'column', alignItems: 'center',
                  height: '100%', justifyContent: 'flex-end'
                }}>
                  <div style={{
                    fontSize: 10, color: '#2036FF', fontWeight: 600, marginBottom: 4
                  }}>
                    {fmt(q.value)} €
                  </div>
                  <div style={{
                    width: '100%',
                    height: `${(q.value / maxQ) * 100}%`,
                    background: 'linear-gradient(180deg, #2036FF 0%, rgba(32,54,255,0.6) 100%)',
                    borderRadius: '4px 4px 0 0',
                    transition: 'height .4s var(--ease-out)'
                  }} />
                </div>
              ))}
            </div>

            <div style={{
              display: 'grid', gridTemplateColumns: 'repeat(8, 1fr)', gap: 8,
              fontSize: 11, color: '#A3A3A3', textAlign: 'center'
            }}>
              {quarters.map((q, i) => <div key={i}>{q.label}</div>)}
            </div>

            <small style={{ display: 'block', marginTop: 32, fontSize: 13, color: '#888', lineHeight: 1.6 }}>
              Cette projection est strictement indicative et ne constitue pas un engagement de performance.
              Les distributions effectives dépendent de la performance réelle du fonds.
              Les performances passées ne préjugent pas des performances futures.
              Tout investissement comporte un risque de perte en capital.
            </small>
          </div>
        </div>

        {/* CTA — investir / prendre rendez-vous */}
        <div className="sim-cta" style={{
          marginTop: 48, padding: 32,
          background: '#fff', border: '1px solid #DEDEDE', borderRadius: 16,
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          gap: 32, flexWrap: 'wrap'
        }}>
          <div style={{ flex: '1 1 320px' }}>
            <h3 style={{
              fontSize: 22, fontWeight: 800, letterSpacing: '-0.015em',
              margin: 0, color: '#1E1E1E'
            }}>
              Prêt à transformer cette projection en investissement ?
            </h3>
            <p style={{ fontSize: 15, lineHeight: 1.55, color: '#393A3D', margin: '8px 0 0', maxWidth: 520 }}>
              Inscrivez-vous en quelques minutes ou échangez avec l'équipe Fundora pour cadrer votre allocation.
            </p>
          </div>
          <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
            <a
              href="https://invest.fundora.fr/?utm_source=LP%20dette&utm_campaign=bridge%20cr%C3%A9dit"
              target="_blank" rel="noopener"
              style={{
                background: '#1E1E1E', color: '#fff', border: 'none', borderRadius: 999,
                padding: '14px 24px', fontSize: 14, fontWeight: 600, cursor: 'pointer',
                fontFamily: 'inherit', display: 'inline-flex', alignItems: 'center', gap: 8,
                textDecoration: 'none', whiteSpace: 'nowrap'
              }}>
              S'inscrire <span style={{ fontWeight: 400 }}>→</span>
            </a>
            <a
              href="https://meetings-eu1.hubspot.com/alanhuet/decouvrez-fundora-meet"
              target="_blank" rel="noopener"
              style={{
                background: 'transparent', color: '#1E1E1E',
                border: '1px solid #1E1E1E', borderRadius: 999,
                padding: '14px 24px', fontSize: 14, fontWeight: 600, cursor: 'pointer',
                fontFamily: 'inherit', display: 'inline-flex', alignItems: 'center', gap: 8,
                textDecoration: 'none', whiteSpace: 'nowrap'
              }}>
              📅 Prendre rendez-vous
            </a>
          </div>
        </div>
      </div>
    </section>
  );
};
window.Simulator = Simulator;