const SubscribeBar = () => {
  const [montant, setMontant] = React.useState(1000);
  const fmt = (n) => new Intl.NumberFormat('fr-FR').format(n);

  return (
    <section data-screen-label="08 CTA final" style={{
      background: '#1E1E1E', color: '#fff', padding: '128px 40px',
      position: 'relative', overflow: 'hidden'
    }}>
      <div style={{
        position: 'absolute', bottom: '-30%', left: '-10%', width: 800, height: 800,
        background: 'radial-gradient(circle, rgba(32,54,255,0.18) 0%, transparent 60%)',
        pointerEvents: 'none'
      }} />
      <div style={{ maxWidth: 1100, margin: '0 auto', position: 'relative' }}>
        <div style={{
          display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 80, alignItems: 'center'
        }}>
          {/* Left */}
          <div>
            <h2 style={{
              fontSize: 'clamp(40px, 5vw, 72px)', fontWeight: 900,
              lineHeight: 0.95, letterSpacing: '-0.03em', textTransform: 'uppercase', margin: 0
            }}>
              Investissez<br />
              dans <span style={{ color: '#2036FF' }}>Bridge Crédit.</span>
            </h2>
            <p style={{ fontSize: 18, lineHeight: 1.55, color: '#A3A3A3', maxWidth: 480, marginTop: 24 }}>
              Réservez votre allocation avant l'ouverture officielle de la collecte.
            </p>
            <div style={{
              marginTop: 32, display: 'flex', gap: 12, alignItems: 'center', flexWrap: 'wrap'
            }}>
              <a
                href="https://meetings-eu1.hubspot.com/alanhuet/decouvrez-fundora-meet"
                target="_blank" rel="noopener"
                style={{
                  background: 'transparent', color: '#fff',
                  border: '1px solid rgba(255,255,255,0.4)', borderRadius: 999,
                  padding: '14px 24px', fontSize: 13, fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit',
                  display: 'inline-flex', alignItems: 'center', gap: 8, textDecoration: 'none'
                }}>
                📅 Prendre rendez-vous avec l'équipe →
              </a>
              <small style={{ fontSize: 12, color: '#888' }}>30 min · gratuit · sans engagement</small>
            </div>
          </div>

          {/* Right — subscription card */}
          <div style={{
            background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(255,255,255,0.12)',
            borderRadius: 16, padding: 32, backdropFilter: 'blur(8px)'
          }}>
            <div style={{
              display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 4
            }}>
              <span style={{
                fontSize: 12, color: '#A3A3A3', textTransform: 'uppercase', letterSpacing: '0.08em'
              }}>Collecte recherchée</span>
              <span style={{
                fontSize: 11, fontWeight: 600, color: '#2036FF',
                padding: '4px 10px', background: 'rgba(32,54,255,0.15)', borderRadius: 999,
                border: '1px solid rgba(32,54,255,0.3)', letterSpacing: '0.05em', textTransform: 'uppercase'
              }}>● À venir</span>
            </div>
            <div style={{
              fontSize: 36, fontWeight: 900, letterSpacing: '-0.02em', marginBottom: 24
            }}>2 000 000 €</div>

            {/* Countdown */}
            <div style={{
              display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 8,
              padding: 16, background: 'rgba(255,255,255,0.05)', borderRadius: 12, marginBottom: 24
            }}>
              {[['06', 'jours'], ['23', 'heures'], ['49', 'min']].map(([v, l]) => (
                <div key={l} style={{ textAlign: 'center' }}>
                  <div style={{ fontSize: 24, fontWeight: 900, color: '#2036FF', lineHeight: 1 }}>{v}</div>
                  <div style={{
                    fontSize: 10, color: '#A3A3A3', textTransform: 'uppercase',
                    letterSpacing: '0.1em', marginTop: 4
                  }}>{l}</div>
                </div>
              ))}
            </div>

            <label style={{
              fontSize: 12, color: '#A3A3A3', textTransform: 'uppercase',
              letterSpacing: '0.08em', display: 'block', marginBottom: 8
            }}>Montant investi</label>
            <div style={{
              display: 'flex', alignItems: 'center',
              background: 'rgba(255,255,255,0.06)', border: '1px solid rgba(255,255,255,0.15)',
              borderRadius: 12, padding: '0 16px', marginBottom: 16
            }}>
              <input
                type="number" value={montant}
                onChange={(e) => setMontant(Number(e.target.value) || 0)}
                style={{
                  flex: 1, background: 'transparent', border: 'none', outline: 'none',
                  color: '#fff', fontSize: 18, fontWeight: 600, padding: '14px 0', fontFamily: 'inherit'
                }} />
              <span style={{ color: '#A3A3A3', fontSize: 16 }}>€</span>
            </div>

            <a
              href="https://invest.fundora.fr/?utm_source=LP%20dette&utm_campaign=bridge%20cr%C3%A9dit"
              target="_blank" rel="noopener"
              style={{
                display: 'block', textAlign: 'center', textDecoration: 'none',
                width: '100%', background: '#2036FF', color: '#fff', border: 'none',
                borderRadius: 999, padding: 16, fontSize: 14, fontWeight: 600,
                cursor: 'pointer', fontFamily: 'inherit', boxSizing: 'border-box'
              }}>
              Pré-souscrire maintenant →
            </a>
            <small style={{
              display: 'block', marginTop: 12, fontSize: 13, color: '#888',
              textAlign: 'center', lineHeight: 1.55
            }}>
              Tout investissement comporte un risque de perte en capital.
            </small>
          </div>
        </div>
      </div>
    </section>
  );
};
window.SubscribeBar = SubscribeBar;