Source: BantQualificationGate.jsx
import React, { useState } from 'react';
export default function BantQualificationGate() {
const [stage, setStage] = useState('ANALYSE_ACTIVE');
const [authConfirmed, setAuthConfirmed] = useState(true);
return (
<div style={{
background: '#121214',
border: '1px solid #27272A',
borderRadius: '10px',
padding: '28px',
maxWidth: '560px',
color: '#F4F4F5',
fontFamily: 'Inter Tight, -apple-system, sans-serif',
boxShadow: '0 8px 24px rgba(0,0,0,0.5)'
}}>
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '20px', borderBottom: '1px solid #27272A', paddingBottom: '16px' }}>
<div>
<div style={{ fontSize: '11px', color: '#A1A1AA', textTransform: 'uppercase', letterSpacing: '0.08em', fontFamily: 'Geist Mono, monospace' }}>
SAS DE CONTRÔLE SAAE // BANT GATEWAY
</div>
<div style={{ fontSize: '16px', fontWeight: 600, color: '#FFFFFF', marginTop: '4px' }}>
Portail de Qualification Décisionnelle
</div>
</div>
<span style={{
fontSize: '11px',
background: 'rgba(34, 197, 94, 0.1)',
color: '#22C55E',
border: '1px solid rgba(34, 197, 94, 0.3)',
padding: '4px 10px',
borderRadius: '4px',
fontFamily: 'Geist Mono, monospace',
fontWeight: 600
}}>
RING 0 CERTIFIÉ
</span>
</div>
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '12px', marginBottom: '20px' }}>
<div style={{ background: '#0A0A0B', border: '1px solid #27272A', padding: '14px', borderRadius: '6px' }}>
<div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '6px' }}>
<span style={{ fontSize: '10px', color: '#A1A1AA', fontFamily: 'Geist Mono, monospace' }}>[B] BUDGET EBITDA</span>
<span style={{ fontSize: '10px', color: '#22C55E', fontFamily: 'Geist Mono, monospace' }}>ÉLIGIBLE</span>
</div>
<div style={{ fontSize: '15px', fontWeight: 600, color: '#FFFFFF', fontFamily: 'Geist Mono, monospace' }}>
15 750 € <span style={{ fontSize: '11px', color: '#A1A1AA', fontWeight: 400 }}>NET</span>
</div>
<div style={{ fontSize: '10px', color: '#22C55E', marginTop: '2px', fontFamily: 'Geist Mono, monospace' }}>
-65% via France 2030 + CIR
</div>
</div>
<div style={{ background: '#0A0A0B', border: '1px solid #27272A', padding: '14px', borderRadius: '6px' }}>
<div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '6px' }}>
<span style={{ fontSize: '10px', color: '#A1A1AA', fontFamily: 'Geist Mono, monospace' }}>[A] AUTORITÉ</span>
<span style={{ fontSize: '10px', color: '#22C55E', fontFamily: 'Geist Mono, monospace' }}>VÉRIFIÉ</span>
</div>
<div style={{ fontSize: '14px', fontWeight: 600, color: '#FFFFFF' }}>
Gérant Statutaire
</div>
<div style={{ fontSize: '10px', color: '#A1A1AA', marginTop: '2px', fontFamily: 'Geist Mono, monospace' }}>
Signature légale habilitée
</div>
</div>
<div style={{ background: '#0A0A0B', border: '1px solid #27272A', padding: '14px', borderRadius: '6px' }}>
<div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '6px' }}>
<span style={{ fontSize: '10px', color: '#A1A1AA', fontFamily: 'Geist Mono, monospace' }}>[N] FRICTION OPÉR.</span>
<span style={{ fontSize: '10px', color: '#E11D48', fontFamily: 'Geist Mono, monospace' }}>CRITIQUE</span>
</div>
<div style={{ fontSize: '15px', fontWeight: 600, color: '#E11D48', fontFamily: 'Geist Mono, monospace' }}>
42h / sem.
</div>
<div style={{ fontSize: '10px', color: '#A1A1AA', marginTop: '2px', fontFamily: 'Geist Mono, monospace' }}>
Perte : ~15 450 € / mois
</div>
</div>
<div style={{ background: '#0A0A0B', border: '1px solid #27272A', padding: '14px', borderRadius: '6px' }}>
<div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '6px' }}>
<span style={{ fontSize: '10px', color: '#A1A1AA', fontFamily: 'Geist Mono, monospace' }}>[T] DÉPLOIEMENT</span>
<span style={{ fontSize: '10px', color: '#22C55E', fontFamily: 'Geist Mono, monospace' }}>J+14</span>
</div>
<div style={{ fontSize: '14px', fontWeight: 600, color: '#FFFFFF' }}>
SaaE Dédié
</div>
<div style={{ fontSize: '10px', color: '#A1A1AA', marginTop: '2px', fontFamily: 'Geist Mono, monospace' }}>
Amorti en 3,8 mois
</div>
</div>
</div>
<div style={{
background: 'rgba(39, 39, 42, 0.4)',
border: '1px solid #27272A',
padding: '12px 16px',
borderRadius: '6px',
marginBottom: '20px',
fontSize: '11px',
color: '#A1A1AA',
lineHeight: 1.5
}}>
<strong style={{ color: '#F4F4F5' }}>Constat Clinique :</strong> La fuite OpEx actuelle détruit 30% de marge brute en gestion manuelle. Le déploiement de l actif SaaE sous micro-noyau gVisor sanctuarise le savoir-faire au bilan.
</div>
<button
onClick={() => setStage(stage === 'QUALIFIÉ' ? 'ANALYSE_ACTIVE' : 'QUALIFIÉ')}
style={{
width: '100%',
background: stage === 'QUALIFIÉ' ? '#22C55E' : '#FFFFFF',
color: '#0A0A0B',
border: 'none',
padding: '12px 16px',
borderRadius: '6px',
fontWeight: 600,
fontSize: '13px',
cursor: 'pointer',
fontFamily: 'Inter Tight, sans-serif',
transition: 'all 0.2s ease'
}}
>
{stage === 'QUALIFIÉ' ? '✓ LEAD BANT QUALIFIÉ DANS TWENTYCRM' : 'VERROUILLER LE CRÉNEAU DE CADRAGE CLINIQUE →'}
</button>
</div>
);
}