/* ───────────────────────────────────────────────────────────
   App.jsx — Orchestrateur du démonstrateur eIDAS2
   Deux modalités, choisies au démarrage :
     • cross-device  : banque (desktop) + téléphone, QR code
     • same-device   : un seul téléphone, site banque → wallet (deep link)
   Machine à états cross-device + liaison OpenID4VP animée + Tweaks
   ─────────────────────────────────────────────────────────── */

const { useState, useEffect, useRef } = React;
const { PROFILES, REQUESTED_CLAIMS, Ic, IIc, BankApp, MobileBankApp, WalletApp,
        ChromeWindow, IOSDevice, ArfDiagram,
        useTweaks, TweaksPanel, TweakSection, TweakSelect, TweakRadio, TweakToggle, TweakButton } = window;

const SPEEDS = { 'Lent': 4200, 'Normal': 2400, 'Rapide': 1100 };

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "profile": "camille",
  "verifySpeed": "Normal",
  "annot": true
}/*EDITMODE-END*/;

// étape du parcours pour le Stepper banque (cross-device)
function stepIndexOf(stage, wallet) {
  if (stage === 'choose') return 1;
  if (stage === 'qr') return (wallet === 'consent' || wallet === 'auth') ? 3 : 2;
  if (stage === 'verifying') return 4;
  if (stage === 'summary') return 5;
  return 0;
}

function RelationApp({ onHome }) {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const profile = PROFILES.find(p => p.id === t.profile) || PROFILES[0];

  const [mode, setMode]   = useState(null);          // null·crossdevice·samedevice
  const [stage, setStage] = useState('home');        // home·choose·qr·verifying·summary
  const [wallet, setWallet] = useState('idle');      // idle·launch·scan·consent·auth·sharing·success
  const [front, setFront] = useState('bank');        // same-device : bank·wallet
  const [shared, setShared] = useState(['adresse']); // claims optionnels inclus
  const [modal, setModal] = useState(false);
  const [arfOpen, setArfOpen] = useState(true);   // schéma ARF déplié
  const [focusDox, setFocusDox] = useState(false); // survol d'un composant Doxallia
  const timers = useRef([]);

  const clearTimers = () => { timers.current.forEach(clearTimeout); timers.current = []; };
  const after = (ms, fn) => { const id = setTimeout(fn, ms); timers.current.push(id); };

  // scan auto-détecté (cross-device uniquement)
  useEffect(() => {
    if (wallet === 'scan') after(1900, () => setWallet('consent'));
  }, [wallet]);

  const startMode = (m) => {
    clearTimers(); setMode(m);
    setStage('home'); setWallet('idle'); setFront('bank'); setShared(['adresse']); setModal(false);
  };
  const reset = () => {
    if (!mode) return;
    clearTimers(); setStage('home'); setWallet('idle'); setFront('bank'); setShared(['adresse']); setModal(false);
  };

  // Pilotage externe (export PPTX) : fige un état cross-device
  useEffect(() => {
    window.__demo = {
      set: (st, wl, sh) => {
        clearTimers(); setMode('crossdevice'); setFront('bank');
        setStage(st); setWallet(wl || 'idle'); if (sh) setShared(sh); setModal(false);
      },
    };
  }, []);

  const dur = SPEEDS[t.verifySpeed] || 2400;
  const handlers = {
    onStart: () => setStage('choose'),
    onChooseWallet: () => {
      if (mode === 'samedevice') {
        setFront('wallet'); setWallet('launch');
        after(850, () => setWallet('consent'));
      } else {
        setStage('qr'); setWallet('idle');
      }
    },
    onScan: () => setWallet('scan'),
    toggleClaim: (k) => setShared(s => s.includes(k) ? s.filter(x => x !== k) : [...s, k]),
    onAllow: () => setWallet('auth'),
    onRefuse: () => {
      if (mode === 'samedevice') { setFront('bank'); setWallet('idle'); setStage('choose'); }
      else setWallet('idle');
    },
    onAuthDone: () => {
      if (mode === 'samedevice') {
        setWallet('sharing');
        after(900, () => setWallet('success'));
        after(900 + dur * 0.5, () => { setFront('bank'); setStage('verifying'); });
        after(900 + dur, () => setStage('summary'));
      } else {
        setWallet('sharing'); setStage('verifying');
        after(Math.min(900, dur * 0.45), () => setWallet('success'));
        after(dur, () => setStage('summary'));
      }
    },
    onNext: () => setModal(true),
    onReset: reset,
  };

  // direction du flux pour la liaison (cross-device)
  let flow = 'none';
  if (stage === 'qr' && (wallet === 'idle' || wallet === 'scan')) flow = 'idle';
  else if (stage === 'qr' && (wallet === 'consent' || wallet === 'auth')) flow = 'soft';
  else if (stage === 'verifying') flow = 'strong';

  // ─ scale-to-fit (dimensions selon la modalité) ─
  const DW = mode === 'samedevice' ? 920 : 1480;
  const DH = mode === 'samedevice' ? 980 : 868;
  const [scale, setScale] = useState(1);
  const bandH = (mode && t.annot) ? (arfOpen ? 250 : 52) : 0;
  useEffect(() => {
    const fit = () => setScale(Math.min(window.innerWidth * 0.985 / DW, (window.innerHeight - bandH) / DH, 1));
    fit(); window.addEventListener('resize', fit);
    return () => window.removeEventListener('resize', fit);
  }, [DW, DH, bandH]);

  const exchanging = front === 'wallet' || stage === 'verifying';

  return (
    <div style={{ width: '100vw', height: '100vh', background: 'var(--stage-bg)',
      display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
      <div style={{ flex: '1 1 auto', minHeight: 0, display: 'flex', alignItems: 'center',
        justifyContent: 'center', overflow: 'hidden' }}>
        <div id="demo-frame" style={{ width: DW, height: DH, transform: `scale(${scale})`, transformOrigin: 'center',
          position: 'relative', flexShrink: 0 }}>

        {/* barre démo */}
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', height: 54, padding: '0 6px' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
            <button onClick={onHome} style={{ display: 'inline-flex', alignItems: 'center', gap: 7,
              padding: '8px 13px', borderRadius: 9, border: '1px solid rgba(14,23,38,.16)', background: '#fff',
              fontSize: 13.5, fontWeight: 700, color: '#0e1726', cursor: 'pointer' }}>
              <IIc.back s={16} /> Démonstrateurs
            </button>
            <span style={{ fontSize: 17, fontWeight: 800, color: '#0e1726', letterSpacing: '-.01em' }}>
              Entrée en relation bancaire
            </span>
            <span style={{ fontSize: 12.5, fontWeight: 700, color: '#fff', background: '#0e1726',
              padding: '4px 10px', borderRadius: 999, whiteSpace: 'nowrap' }}>
              {mode === 'samedevice' ? 'Same-device · lien' : mode === 'crossdevice' ? 'Cross-device · QR' : 'Wallet EUDI · eIDAS2'}
            </span>
          </div>
          <div style={{ display: 'flex', gap: 8 }}>
            {mode && (
              <button onClick={() => setMode(null)} style={{ display: 'inline-flex', alignItems: 'center', gap: 8,
                padding: '9px 14px', borderRadius: 9, border: '1px solid rgba(14,23,38,.16)', background: '#fff',
                fontSize: 14, fontWeight: 700, color: '#0e1726', cursor: 'pointer' }}>
                Changer de modalité
              </button>
            )}
            <button onClick={reset} style={{ display: 'inline-flex', alignItems: 'center', gap: 8,
              padding: '9px 16px', borderRadius: 9, border: '1px solid rgba(14,23,38,.16)', background: '#fff',
              fontSize: 14, fontWeight: 700, color: '#0e1726', cursor: 'pointer' }}>
              <Ic.refresh s={16} /> Recommencer
            </button>
          </div>
        </div>

        {/* scène */}
        {mode === 'samedevice'
          ? <SameDeviceScene stage={stage} wallet={wallet} front={front} profile={profile}
              claims={REQUESTED_CLAIMS} sharedKeys={shared} handlers={handlers} exchanging={exchanging}
              annotate={t.annot} onFocusDox={setFocusDox} />
          : <CrossDeviceScene stage={stage} wallet={wallet} flow={flow} profile={profile}
              claims={REQUESTED_CLAIMS} sharedKeys={shared} handlers={handlers}
              stepIndex={stepIndexOf(stage, wallet)}
              annotate={t.annot} onFocusDox={setFocusDox} />}

        {modal && <EndModal onReset={reset} onClose={() => setModal(false)} />}
        </div>
      </div>

      {/* schéma ARF dynamique — cadre séparé sous la scène */}
      {mode && t.annot && (
        <ArfDiagram mode={mode} stage={stage} wallet={wallet} focusDox={focusDox}
          open={arfOpen} onToggle={() => setArfOpen(o => !o)} />
      )}

      {/* écran de démarrage : choix de la modalité */}
      {!mode && <ModeChooser onPick={startMode} />}

      {/* Tweaks */}
      <TweaksPanel>
        <TweakSection label="Modalité de présentation" />
        <TweakRadio label="Parcours" value={mode === 'samedevice' ? 'Smartphone' : 'Ordinateur'}
          options={['Ordinateur', 'Smartphone']}
          onChange={(v) => startMode(v === 'Smartphone' ? 'samedevice' : 'crossdevice')} />
        <TweakSection label="Jeu de données" />
        <TweakSelect label="Profil client" value={t.profile}
          options={PROFILES.map(p => ({ value: p.id, label: `${p.prenom} ${p.nom}` }))}
          onChange={(v) => setTweak('profile', v)} />
        <TweakSection label="Animation" />
        <TweakRadio label="Vitesse de vérification" value={t.verifySpeed}
          options={['Lent', 'Normal', 'Rapide']} onChange={(v) => setTweak('verifySpeed', v)} />
        <TweakSection label="Lecture pédagogique" />
        <TweakToggle label="Schéma ARF & repères Doxallia" value={t.annot}
          onChange={(v) => setTweak('annot', v)} />
        <TweakSection label="Démo" />
        <TweakButton label="Recommencer le parcours" onClick={reset} />
      </TweaksPanel>
    </div>
  );
}

/* ── Écran de démarrage : choix de la modalité ── */
function ModeChooser({ onPick }) {
  const cards = [
    { id: 'crossdevice', tag: 'Cross-device · QR code',
      title: 'Client sur ordinateur',
      desc: 'Le site de la banque est ouvert sur un poste. Le client scanne un QR code avec son téléphone pour s\'identifier.',
      icon: <Ic.scan s={26} c="var(--bank-primary)" />,
      visual: <MiniCross /> },
    { id: 'samedevice', tag: 'Same-device · lien profond',
      title: 'Client sur smartphone',
      desc: 'Tout se passe sur le téléphone : le site mobile ouvre directement l\'app ID Wallet par lien, sans QR code.',
      icon: <Ic.phone s={26} c="var(--bank-primary)" />,
      visual: <MiniSame /> },
  ];
  return (
    <div style={{ position: 'fixed', inset: 0, zIndex: 200, background: 'rgba(14,23,38,.55)',
      backdropFilter: 'blur(4px)', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 24 }}>
      <div className="rise" style={{ width: 'min(820px, 94vw)', background: '#fff', borderRadius: 22,
        padding: '36px 36px 34px', boxShadow: '0 50px 110px -30px rgba(0,0,0,.55)' }}>
        <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, padding: '6px 12px', borderRadius: 999,
          background: 'var(--bank-soft)', color: 'var(--bank-primary)', fontSize: 12.5, fontWeight: 700, marginBottom: 16 }}>
          <Ic.shield s={15} /> Démonstrateur eIDAS2
        </div>
        <h1 style={{ fontSize: 27, fontWeight: 800, letterSpacing: '-.02em', color: 'var(--bank-ink)', margin: '0 0 8px' }}>
          Quelle modalité souhaitez-vous présenter ?
        </h1>
        <p style={{ fontSize: 15, color: 'var(--bank-muted)', margin: '0 0 26px', lineHeight: 1.5, maxWidth: 620 }}>
          Le wallet EUDI permet plusieurs façons de partager son identité. Choisissez le scénario à dérouler —
          vous pourrez en changer à tout moment.
        </p>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 18 }}>
          {cards.map(c => <ModeCard key={c.id} {...c} onClick={() => onPick(c.id)} />)}
        </div>
      </div>
    </div>
  );
}
function ModeCard({ tag, title, desc, icon, visual, onClick }) {
  const [h, setH] = useState(false);
  return (
    <button onClick={onClick} onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
      style={{ textAlign: 'left', padding: 22, borderRadius: 18, background: h ? 'var(--bank-soft)' : '#fff',
        border: `1.5px solid ${h ? 'var(--bank-primary)' : 'var(--bank-line)'}`, cursor: 'pointer',
        boxShadow: h ? '0 18px 40px -22px rgba(22,87,200,.55)' : 'none',
        transition: 'all .18s', transform: h ? 'translateY(-2px)' : 'none',
        display: 'flex', flexDirection: 'column', gap: 14 }}>
      <div style={{ height: 96, borderRadius: 12, background: '#eef2f7', border: '1px solid var(--bank-line)',
        display: 'flex', alignItems: 'center', justifyContent: 'center', overflow: 'hidden' }}>{visual}</div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 11 }}>
        <div style={{ width: 46, height: 46, borderRadius: 12, background: 'var(--bank-soft)', flexShrink: 0,
          display: 'flex', alignItems: 'center', justifyContent: 'center' }}>{icon}</div>
        <div>
          <div style={{ fontSize: 11, fontWeight: 700, color: 'var(--bank-primary)', textTransform: 'uppercase',
            letterSpacing: '.04em' }}>{tag}</div>
          <div style={{ fontSize: 18, fontWeight: 800, color: 'var(--bank-ink)', letterSpacing: '-.01em' }}>{title}</div>
        </div>
      </div>
      <p style={{ fontSize: 13.5, lineHeight: 1.5, color: 'var(--bank-muted)', margin: 0 }}>{desc}</p>
      <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8, fontSize: 14, fontWeight: 700,
        color: 'var(--bank-primary)', marginTop: 2 }}>Présenter ce parcours <Ic.arrow s={18} c="var(--bank-primary)" /></span>
    </button>
  );
}
// petites illustrations
function MiniCross() {
  return (
    <svg width="170" height="74" viewBox="0 0 170 74">
      <rect x="14" y="14" width="80" height="56" rx="6" fill="#fff" stroke="#cdd5e0" strokeWidth="2" />
      <rect x="14" y="14" width="80" height="11" rx="6" fill="var(--bank-primary)" />
      <rect x="118" y="8" width="38" height="62" rx="9" fill="#161616" />
      <rect x="121" y="11" width="32" height="56" rx="7" fill="#fff" />
      <line x1="98" y1="42" x2="114" y2="42" stroke="#1657c8" strokeWidth="2.5" strokeDasharray="2 5" strokeLinecap="round" />
      <rect x="62" y="36" width="22" height="22" rx="3" fill="none" stroke="var(--bank-primary)" strokeWidth="2" />
      <rect x="129" y="26" width="16" height="16" rx="2" fill="#eef2f7" stroke="#cdd5e0" />
    </svg>
  );
}
function MiniSame() {
  return (
    <svg width="170" height="74" viewBox="0 0 170 74">
      <rect x="46" y="8" width="40" height="62" rx="9" fill="#161616" />
      <rect x="49" y="11" width="34" height="56" rx="7" fill="#fff" />
      <rect x="53" y="20" width="26" height="9" rx="2" fill="var(--bank-primary)" />
      <rect x="53" y="34" width="26" height="26" rx="3" fill="#eef2f7" stroke="#cdd5e0" />
      <rect x="96" y="8" width="40" height="62" rx="9" fill="#222834" opacity="0.12" />
      <rect x="99" y="11" width="34" height="56" rx="7" fill="#fff" stroke="#dddddd" />
      <rect x="103" y="18" width="9" height="11" rx="1.5" fill="#222834" />
      <rect x="103" y="33" width="26" height="6" rx="3" fill="#e7e9f3" />
      <rect x="103" y="43" width="26" height="6" rx="3" fill="#e7e9f3" />
      <rect x="103" y="56" width="26" height="8" rx="3" fill="#222834" />
      <path d="M88 40 l8 0 m-3 -3 l3 3 -3 3" stroke="var(--rf-blue)" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

/* ── Scène CROSS-DEVICE : banque (desktop) + téléphone ── */
function CrossDeviceScene({ stage, wallet, flow, profile, claims, sharedKeys, handlers, stepIndex, annotate, onFocusDox }) {
  return (
    <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'center', gap: 0, marginTop: 8 }}>
      <Labeled label="Application web — Banque Démo" sub="poste client en agence / à domicile">
        <ChromeWindow width={880} height={720} url="banque-demo.fr/ouverture-de-compte"
          tabs={[{ title: 'Banque Démo — Ouvrir un compte' }]}>
          <BankApp stage={stage} walletStage={wallet} profile={profile} claims={claims}
            sharedKeys={sharedKeys} stepIndex={stepIndex} annotate={annotate} onFocusDox={onFocusDox} {...handlers} />
        </ChromeWindow>
      </Labeled>
      <Connector flow={flow} />
      <Labeled label="Smartphone — ID Wallet" sub="portefeuille d'identité de l'utilisateur">
        <div style={{ transform: 'translateY(-4px)' }}>
          <IOSDevice width={344} height={724} dark={wallet === 'scan'}>
            <WalletApp walletStage={wallet} profile={profile} claims={claims}
              sharedKeys={sharedKeys} {...handlers} />
          </IOSDevice>
        </div>
      </Labeled>
    </div>
  );
}

/* ── Scène SAME-DEVICE : un seul téléphone (banque mobile ↔ wallet) ── */
function SameDeviceScene({ stage, wallet, front, profile, claims, sharedKeys, handlers, exchanging, annotate, onFocusDox }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', marginTop: 6 }}>
      <IOSDevice width={392} height={812}>
        <div style={{ position: 'relative', height: '100%', overflow: 'hidden' }}>
          {/* site mobile de la banque (fond) */}
          <div style={{ position: 'absolute', inset: 0 }}>
            <MobileBankApp stage={stage} profile={profile} claims={claims} sharedKeys={sharedKeys}
              annotate={annotate} onFocusDox={onFocusDox} {...handlers} />
          </div>
          {/* app wallet (glisse depuis le bas — deep link) */}
          <div style={{ position: 'absolute', inset: 0,
            transform: front === 'wallet' ? 'translateY(0)' : 'translateY(101%)',
            transition: 'transform .52s cubic-bezier(.34,.85,.25,1)',
            boxShadow: front === 'wallet' ? '0 -24px 60px rgba(8,12,22,.3)' : 'none' }}>
            <WalletApp walletStage={wallet} profile={profile} claims={claims}
              sharedKeys={sharedKeys} {...handlers} />
          </div>
        </div>
      </IOSDevice>

      {/* libellé + protocole */}
      <div style={{ textAlign: 'center', marginTop: 16, whiteSpace: 'nowrap' }}>
        <div style={{ fontSize: 13.5, fontWeight: 700, color: '#0e1726' }}>
          Smartphone du client — site mobile de la banque + wallet
        </div>
        <div style={{ marginTop: 8, display: 'inline-flex', alignItems: 'center', gap: 8, padding: '5px 12px',
          borderRadius: 999, transition: 'all .2s',
          background: exchanging ? 'rgba(22,87,200,.1)' : '#e7ecf3',
          color: exchanging ? '#1657c8' : '#8a93a6', fontSize: 11.5, fontWeight: 700 }}>
          <Ic.lock s={13} c={exchanging ? '#1657c8' : '#8a93a6'} />
          OpenID4VP · lien profond <span style={{ fontFamily: 'monospace' }}>openid4vp://</span>
        </div>
      </div>
    </div>
  );
}

// — cadre avec libellé sous le device (cross-device) —
function Labeled({ label, sub, children }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 0 }}>
      {children}
      <div style={{ textAlign: 'center', marginTop: 16, whiteSpace: 'nowrap' }}>
        <div style={{ fontSize: 13.5, fontWeight: 700, color: '#0e1726' }}>{label}</div>
        <div style={{ fontSize: 12, color: '#5b6678', marginTop: 1 }}>{sub}</div>
      </div>
    </div>
  );
}

// — liaison OpenID4VP animée (cross-device) —
function Connector({ flow }) {
  const active = flow === 'soft' || flow === 'strong';
  const stroke = active ? '#1657c8' : '#aab4c4';
  const W = 132, H = 720, cy = 300;
  return (
    <div style={{ width: W, height: H, position: 'relative', flexShrink: 0,
      display: 'flex', alignItems: 'flex-start', justifyContent: 'center', paddingTop: 0 }}>
      <svg width={W} height={H} style={{ position: 'absolute', top: 0, left: 0 }}>
        <line x1={8} y1={cy} x2={W - 8} y2={cy} stroke="#cdd5e0" strokeWidth={2} />
        {active && (
          <line x1={8} y1={cy} x2={W - 8} y2={cy} stroke={stroke}
            strokeWidth={flow === 'strong' ? 3 : 2.4} strokeLinecap="round" strokeDasharray="2 12"
            style={{ animation: `flow-left ${flow === 'strong' ? 0.7 : 1.1}s linear infinite` }} />
        )}
        <circle cx={8} cy={cy} r={5} fill={active ? stroke : '#aab4c4'} />
        <circle cx={W - 8} cy={cy} r={5} fill={active ? stroke : '#aab4c4'} />
        {flow === 'idle' && (
          <circle cx={W / 2} cy={cy} r={4} fill="#1657c8" style={{ animation: 'pulse-soft 1.3s infinite' }} />
        )}
      </svg>
      <div style={{ position: 'absolute', top: cy + 14, left: '50%', transform: 'translateX(-50%)',
        display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6, width: 120 }}>
        <div style={{ display: 'inline-flex', alignItems: 'center', gap: 6, padding: '5px 10px', borderRadius: 999,
          background: active ? 'rgba(22,87,200,.1)' : '#e7ecf3', color: active ? '#1657c8' : '#8a93a6',
          fontSize: 11, fontWeight: 700, whiteSpace: 'nowrap', transition: 'all .2s' }}>
          <Ic.lock s={13} c={active ? '#1657c8' : '#8a93a6'} /> OpenID4VP
        </div>
        <div style={{ fontSize: 10.5, color: '#8a93a6', textAlign: 'center', lineHeight: 1.3, fontFamily: 'monospace' }}>
          {flow === 'idle' && 'liaison établie'}
          {flow === 'soft' && 'consentement…'}
          {flow === 'strong' && 'présentation\nvérifiable'}
          {flow === 'none' && 'verifier'}
        </div>
      </div>
    </div>
  );
}

// — modale fin de démo —
function EndModal({ onReset, onClose }) {
  return (
    <div onClick={onClose} style={{ position: 'absolute', inset: 0, zIndex: 100,
      background: 'rgba(10,16,26,.45)', backdropFilter: 'blur(3px)',
      display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
      <div onClick={e => e.stopPropagation()} className="rise" style={{ width: 440, background: '#fff',
        borderRadius: 18, padding: 32, boxShadow: '0 40px 90px -30px rgba(0,0,0,.5)', textAlign: 'center' }}>
        <div style={{ width: 56, height: 56, borderRadius: 14, background: 'var(--bank-soft)', margin: '0 auto 18px',
          display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <Ic.check s={30} c="var(--bank-ok)" />
        </div>
        <h3 style={{ fontSize: 21, fontWeight: 800, color: '#0e1726', margin: '0 0 10px' }}>
          Identité récupérée — fin du démonstrateur
        </h3>
        <p style={{ fontSize: 14.5, lineHeight: 1.55, color: '#56627a', margin: '0 0 24px' }}>
          La suite du parcours d'entrée en relation (choix de l'offre, signature électronique du contrat,
          premier versement…) n'est pas incluse dans cette démonstration.
        </p>
        <div style={{ display: 'flex', gap: 12, justifyContent: 'center' }}>
          <button onClick={onClose} style={{ padding: '13px 22px', borderRadius: 10, border: '1.5px solid var(--bank-line)',
            background: '#fff', fontSize: 15, fontWeight: 700, color: 'var(--bank-primary)', cursor: 'pointer' }}>
            Revoir la synthèse
          </button>
          <button onClick={onReset} style={{ display: 'inline-flex', alignItems: 'center', gap: 8,
            padding: '13px 22px', borderRadius: 10, border: 'none', background: 'var(--bank-primary)',
            fontSize: 15, fontWeight: 700, color: '#fff', cursor: 'pointer' }}>
            <Ic.refresh s={16} c="#fff" /> Rejouer la démo
          </button>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { RelationApp });