const Characteristics = ({ variant }) => {
  const rows = [
    ['Stratégie', 'Bridge Crédit — dette privée court terme'],
    ['Type de fonds', 'Mandat de gestion via Fundora'],
    ['Objectif de rendement net', '9 % à 12 % par an'],
    ['Distribution', 'Trimestrielle (au prorata)'],
    ["Durée d'investissement", '2 ans'],
    ["Ticket d'entrée", 'À partir de 1 000 €'],
    ['Géographie', 'Australie'],
    ['Sous-jacent', 'Prêts adossés (parts non cotées + immobilier)'],
    ['LVR moyen / plafond', '10,9 % en moyenne / plafond contractuel à 25 %'],
    ['Sûretés', 'Premier rang sur actifs gagés + garantie personnelle'],
    ['Devise du sous-jacent', 'AUD'],
    ["Frais (déjà déduits de l'objectif)", "3 % de frais d'entrée, 1,5 % par an (dégressif selon montant investi)"],
  ];

  return (
    <section data-screen-label="05 Caractéristiques" style={{ background: '#fff', padding: '128px 40px' }}>
      <div style={{ maxWidth: 1100, 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'
          }}>03 — Caractéristiques</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 64px', color: '#1E1E1E', maxWidth: 720
        }}>
          La fiche, en clair.
        </h2>

        <div style={{
          background: '#fff', borderRadius: 16, border: '1px solid #DEDEDE', overflow: 'hidden'
        }}>
          {rows.map(([k, v], i) => (
            <div key={k} style={{
              display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 32,
              padding: '20px 32px',
              borderBottom: i < rows.length - 1 ? '1px solid #EEE' : 'none',
              alignItems: 'center',
              background: i % 2 === 0 ? '#fff' : '#FAFAFC'
            }}>
              <div style={{
                fontSize: 13, fontWeight: 500, color: '#A3A3A3',
                textTransform: 'uppercase', letterSpacing: '0.06em'
              }}>{k}</div>
              <div style={{ fontSize: 16, color: '#1E1E1E', fontWeight: 500 }}>{v}</div>
            </div>
          ))}
        </div>

        <small style={{ display: 'block', marginTop: 24, fontSize: 13, color: '#888', lineHeight: 1.6 }}>
          Investir comporte des risques, notamment de perte en capital. Les performances passées ne préjugent pas
          des performances futures. Avant tout investissement, il est recommandé de bien comprendre les
          caractéristiques et les risques de la stratégie.
        </small>
      </div>
    </section>
  );
};
window.Characteristics = Characteristics;