const HowItWorks = ({ variant }) => {
  const isEditorial = variant === 'B';

  const steps = [
    {
      n: '01',
      t: 'Vous investissez en quelques minutes',
      d: 'À partir de 1 000 €, par carte bancaire ou virement instantané. Pas de paperasse interminable, pas de minimum institutionnel.'
    },
    {
      n: '02',
      t: 'Votre capital rejoint celui des autres investisseurs',
      d: 'Fundora regroupe les souscriptions dans une enveloppe dédiée. Ensemble, vous atteignez le ticket institutionnel — ce qui était réservé aux family offices devient accessible.'
    },
    {
      n: '03',
      t: 'Le gestionnaire prête, vous percevez des coupons',
      d: 'Le capital est déployé sur des prêts solidement garantis. Chaque trimestre, votre quote-part des intérêts est versée directement sur votre compte. Vous suivez tout depuis votre espace Fundora.'
    },
    {
      n: '04',
      t: 'À 2 ans, vous récupérez votre capital',
      d: "Au terme de l'engagement, l'investisseur retrouve sa flexibilité : récupérer le capital, ou le réinvestir sur une nouvelle stratégie."
    }
  ];

  return (
    <section data-screen-label="04 Comment ça marche" style={{
      background: '#1E1E1E', color: '#fff', 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'
          }}>02 — Comment ça marche</span>
          <div style={{ flex: 1, height: 1, background: 'rgba(255,255,255,0.15)' }} />
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 96, alignItems: 'start' }}>
          <h2 style={{
            fontSize: 'clamp(36px, 4.2vw, 56px)',
            fontWeight: 900, lineHeight: 1.0, letterSpacing: '-0.028em',
            textTransform: 'uppercase', margin: 0, position: 'sticky', top: 120,
            fontStyle: isEditorial ? 'italic' : 'normal'
          }}>
            En 4 étapes,<br />sans jargon.
          </h2>

          <div style={{ display: 'flex', flexDirection: 'column' }}>
            {steps.map((s, i) => (
              <div key={s.n} style={{
                display: 'grid', gridTemplateColumns: '80px 1fr', gap: 32,
                padding: '32px 0',
                borderBottom: i < steps.length - 1 ? '1px solid rgba(255,255,255,0.1)' : 'none'
              }}>
                <div style={{
                  fontSize: 14, fontWeight: 600, letterSpacing: '0.1em',
                  color: '#2036FF', paddingTop: 4
                }}>{s.n}</div>
                <div>
                  <h3 style={{
                    fontSize: 26, fontWeight: 700, letterSpacing: '-0.01em',
                    margin: '0 0 12px', color: '#fff', lineHeight: 1.2
                  }}>{s.t}</h3>
                  <p style={{
                    fontSize: 16, lineHeight: 1.65, color: '#A3A3A3', margin: 0, maxWidth: 540
                  }}>{s.d}</p>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* RDV CTA */}
        <div style={{
          marginTop: 64, padding: 32,
          background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(255,255,255,0.12)',
          borderRadius: 16,
          display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 32, flexWrap: 'wrap'
        }}>
          <div>
            <div style={{ fontSize: 18, fontWeight: 600, color: '#fff', marginBottom: 6 }}>
              Une question avant d'investir ?
            </div>
            <div style={{ fontSize: 14, color: '#A3A3A3' }}>
              Échangez 30 minutes avec l'équipe Fundora. Gratuit, sans engagement.
            </div>
          </div>
          <a
            href="https://meetings-eu1.hubspot.com/alanhuet/decouvrez-fundora-meet"
            target="_blank" rel="noopener"
            style={{
              background: 'transparent', color: '#fff',
              border: '1px solid #fff', borderRadius: 999,
              padding: '14px 28px', fontSize: 14, fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit',
              display: 'inline-flex', alignItems: 'center', gap: 8, textDecoration: 'none'
            }}>
            📅 Prendre rendez-vous →
          </a>
        </div>

        <small style={{
          display: 'block', marginTop: 24, fontSize: 13, color: '#888', lineHeight: 1.6
        }}>
          La dette privée non cotée comporte un risque de perte en capital et est peu liquide.
          Le capital n'est pas accessible avant l'échéance des 2 ans.
        </small>
      </div>
    </section>
  );
};
window.HowItWorks = HowItWorks;