const Hero = ({ variant }) => {
  const isEditorial = variant === 'B';
  return (
    <section data-screen-label="01 Hero" className="lp-hero" style={{
      background: '#1E1E1E', color: '#fff', position: 'relative', overflow: 'hidden',
      paddingTop: 80
    }}>
      {/* Radial accent light */}
      <div style={{
        position: 'absolute', top: '-20%', right: '-10%', width: 700, height: 700,
        background: 'radial-gradient(circle, rgba(32,54,255,0.18) 0%, transparent 60%)',
        pointerEvents: 'none'
      }} />

      <div className="hero-wrap" style={{ maxWidth: 1240, margin: '0 auto', padding: '0 40px', position: 'relative' }}>
        {/* Eyebrow */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 32 }}>
          <span style={{
            fontSize: 11, fontWeight: 600, letterSpacing: '0.18em', textTransform: 'uppercase',
            color: '#2036FF', padding: '6px 12px', background: 'rgba(32,54,255,0.12)',
            borderRadius: 999, border: '1px solid rgba(32,54,255,0.3)'
          }}>● COLLECTE DISPONIBLE</span>
          <span style={{ fontSize: 12, color: '#A3A3A3', letterSpacing: '0.05em' }}>
            Stratégie · Dette privée · Fundora
          </span>
        </div>

        <div className="hero-grid" style={{
          display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 40, alignItems: 'center',
          minHeight: 620
        }}>
          {/* Left — headline + CTAs */}
          <div className="hero-left" style={{ paddingBottom: 64 }}>
            <h1 className="hero-h1" style={{
              fontSize: isEditorial ? 'clamp(56px, 7.2vw, 112px)' : 'clamp(56px, 7.2vw, 108px)',
              fontWeight: 900, lineHeight: 0.92, letterSpacing: '-0.035em',
              margin: 0, textTransform: 'uppercase',
              fontStyle: isEditorial ? 'italic' : 'normal'
            }}>
              Bridge<br />
              <span style={{ color: '#2036FF' }}>Crédit.</span>
            </h1>
            <p style={{
              fontSize: 22, lineHeight: 1.5, color: '#E6E6E6',
              maxWidth: 520, marginTop: 32, fontWeight: 400
            }}>
              Prêtez aux dirigeants d'entreprises fortunés que les banques laissent de côté.
              <br />
              <span style={{ color: '#A3A3A3', fontSize: 18, lineHeight: 1.55, display: 'block', marginTop: 12 }}>
                Une stratégie de prêts court terme, garantis par des actifs solides, qui vous verse
                des intérêts chaque trimestre. Accessible dès 1&nbsp;000&nbsp;€.
              </span>
            </p>

            <div className="hero-ctas" style={{ marginTop: 40, display: 'flex', gap: 12, alignItems: 'center', flexWrap: 'wrap' }}>
              <a
                href="https://invest.fundora.fr/?utm_source=LP%20dette&utm_campaign=bridge%20cr%C3%A9dit"
                target="_blank" rel="noopener"
                style={{
                  background: '#fff', color: '#1E1E1E', border: 'none', borderRadius: 999,
                  padding: '16px 32px', fontSize: 14, fontWeight: 600, cursor: 'pointer',
                  fontFamily: 'inherit', display: 'inline-flex', alignItems: 'center', gap: 8,
                  textDecoration: 'none', transition: 'opacity 0.2s'
                }}>
                Pré-souscrire dès 1&nbsp;000&nbsp;€
                <span style={{ fontSize: 16, fontWeight: 400 }}>→</span>
              </a>
              <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.3)', borderRadius: 999,
                  padding: '16px 28px', fontSize: 14, fontWeight: 500, cursor: 'pointer',
                  fontFamily: 'inherit', display: 'inline-flex', alignItems: 'center', gap: 8,
                  textDecoration: 'none'
                }}>
                <span>📅</span> Prendre rendez-vous
              </a>
            </div>
            <small style={{ display: 'block', marginTop: 20, fontSize: 13, color: '#A3A3A3', lineHeight: 1.5 }}>
              Échangez 30 minutes avec l'équipe Fundora — gratuit, sans engagement.
              Tout investissement comporte un risque de perte en capital.
            </small>
          </div>

          {/* Right — KPI panel */}
          <div className="hero-right" style={{
            position: 'relative', alignSelf: 'stretch',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            paddingTop: 32, paddingBottom: 96
          }}>
            <div style={{
              width: '100%', maxWidth: 480,
              display: 'flex', flexDirection: 'column', gap: 16
            }}>
              {/* Rendement */}
              <div style={{
                background: 'linear-gradient(180deg, rgba(32,54,255,0.18) 0%, rgba(32,54,255,0.05) 100%)',
                border: '1px solid rgba(32,54,255,0.4)',
                borderRadius: 20, padding: '32px 28px',
                position: 'relative', overflow: 'hidden'
              }}>
                <div style={{
                  position: 'absolute', top: -40, right: -40, width: 200, height: 200,
                  background: 'radial-gradient(circle, rgba(32,54,255,0.4) 0%, transparent 70%)',
                  pointerEvents: 'none'
                }} />
                <div style={{
                  fontSize: 11, fontWeight: 600, letterSpacing: '0.16em', textTransform: 'uppercase',
                  color: '#A3A3A3', marginBottom: 12
                }}>Objectif de rendement net</div>
                <div className="hero-rendement-num" style={{
                  fontSize: 80, fontWeight: 900, lineHeight: 0.95, letterSpacing: '-0.04em',
                  color: '#fff', fontVariantNumeric: 'tabular-nums'
                }}>
                  9&nbsp;–&nbsp;12<span className="hero-rendement-suffix" style={{ fontSize: 48, color: '#2036FF', marginLeft: 4 }}>% net</span>
                </div>
                <div style={{ fontSize: 14, color: '#A3A3A3', marginTop: 12 }}>
                  par an, distribué <strong style={{ color: '#fff' }}>chaque trimestre</strong>
                </div>
              </div>

              {/* Durée + Ticket */}
              <div className="hero-kpi-row" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
                <div style={{
                  background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(255,255,255,0.12)',
                  borderRadius: 20, padding: '24px 20px'
                }}>
                  <div style={{
                    fontSize: 11, fontWeight: 600, letterSpacing: '0.16em', textTransform: 'uppercase',
                    color: '#A3A3A3', marginBottom: 10
                  }}>Durée</div>
                  <div style={{
                    fontSize: 42, fontWeight: 900, lineHeight: 0.95, letterSpacing: '-0.03em', color: '#fff'
                  }}>2 ans</div>
                  <div style={{ fontSize: 13, color: '#A3A3A3', marginTop: 8 }}>capital déployé à 100 % dès J+1</div>
                </div>
                <div style={{
                  background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(255,255,255,0.12)',
                  borderRadius: 20, padding: '24px 20px'
                }}>
                  <div style={{
                    fontSize: 11, fontWeight: 600, letterSpacing: '0.16em', textTransform: 'uppercase',
                    color: '#A3A3A3', marginBottom: 10
                  }}>TICKET MIN</div>
                  <div style={{
                    fontSize: 42, fontWeight: 900, lineHeight: 0.95, letterSpacing: '-0.03em', color: '#fff'
                  }}>1 000 €</div>
                  <div style={{ fontSize: 13, color: '#A3A3A3', marginTop: 8 }}>par carte ou virement instantané</div>
                </div>
              </div>

              {/* Reassurance */}
              <div style={{
                background: 'rgba(0,189,130,0.08)', border: '1px solid rgba(0,189,130,0.3)',
                borderRadius: 20, padding: '20px 24px',
                display: 'flex', alignItems: 'center', gap: 16
              }}>
                <div style={{
                  width: 44, height: 44, borderRadius: '50%',
                  background: 'rgba(0,189,130,0.15)',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  fontSize: 22, color: '#00BD82', fontWeight: 700, flexShrink: 0
                }}>✓</div>
                <div>
                  <div style={{ fontSize: 16, fontWeight: 700, color: '#fff', lineHeight: 1.2 }}>
                    0 perte en capital à ce jour
                  </div>
                  <div style={{ fontSize: 12, color: '#A3A3A3', marginTop: 4 }}>LVR moyen 10,9 %</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};
window.Hero = Hero;