/* ───────────────────────────────────────────────────────────
   Home.jsx — Racine du démonstrateur EUDI Wallet
   Page d'accueil interne : catalogue des parcours, puis bascule
   vers le parcours choisi (entrée en relation / attestation IBAN).
   Chargé en DERNIER : lit RelationApp & IbanApp depuis window.
   ─────────────────────────────────────────────────────────── */

const { useState: useStateH, useEffect: useEffectH } = React;
const { Ic: HIc, IIc: H2, RelationApp: HRelation, IbanApp: HIban } = window;

// ── carte parcours ──
function JourneyCard({ tag, title, desc, points, badge, accent, icon, onLaunch }) {
  const [h, setH] = useStateH(false);
  return (
    <div onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
      style={{ display: 'flex', flexDirection: 'column', background: '#fff',
        border: `1px solid ${h ? accent : 'var(--bank-line)'}`, borderRadius: 20,
        boxShadow: h ? '0 26px 60px -34px rgba(14,23,38,.5)' : '0 2px 10px -6px rgba(14,23,38,.18)',
        transition: 'all .2s', transform: h ? 'translateY(-3px)' : 'none', overflow: 'hidden' }}>
      {/* bandeau illustratif */}
      <div style={{ height: 150, position: 'relative', borderBottom: '1px solid var(--bank-line)',
        background: 'linear-gradient(135deg,#f4f7fb,#e9eef6)', display: 'grid', placeItems: 'center', overflow: 'hidden' }}>
        {icon}
        {badge && (
          <span style={{ position: 'absolute', top: 14, left: 14, fontSize: 11, fontWeight: 700,
            color: '#fff', background: accent, padding: '4px 10px', borderRadius: 999 }}>{badge}</span>
        )}
      </div>
      <div style={{ padding: '22px 24px 24px', display: 'flex', flexDirection: 'column', flex: 1 }}>
        <div style={{ fontSize: 11.5, fontWeight: 700, letterSpacing: '.05em', textTransform: 'uppercase',
          color: accent, marginBottom: 9 }}>{tag}</div>
        <h3 style={{ fontSize: 21, fontWeight: 800, letterSpacing: '-.015em', color: 'var(--bank-ink)', margin: 0 }}>{title}</h3>
        <p style={{ fontSize: 14, lineHeight: 1.55, color: 'var(--bank-muted)', margin: '9px 0 0' }}>{desc}</p>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 9, margin: '18px 0 22px' }}>
          {points.map((p, i) => (
            <div key={i} style={{ display: 'flex', alignItems: 'flex-start', gap: 10, fontSize: 13.5, color: 'var(--bank-ink)' }}>
              <span style={{ width: 20, height: 20, borderRadius: '50%', flexShrink: 0, marginTop: 1,
                background: 'var(--bank-soft)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <HIc.check s={12} c={accent} /></span>
              <span>{p}</span>
            </div>
          ))}
        </div>
        <button onClick={onLaunch} style={{ marginTop: 'auto', display: 'inline-flex', alignItems: 'center',
          justifyContent: 'center', gap: 9, height: 46, borderRadius: 11, border: 'none', cursor: 'pointer',
          background: accent, color: '#fff', fontSize: 15, fontWeight: 700,
          boxShadow: `0 12px 26px -14px ${accent}`, transition: 'filter .15s', filter: h ? 'brightness(.94)' : 'none' }}>
          Lancer le parcours <HIc.arrow s={18} c="#fff" />
        </button>
      </div>
    </div>
  );
}

// ── illustrations des bandeaux ──
function IllRelation() {
  return (
    <svg width="260" height="120" viewBox="0 0 260 120">
      <rect x="20" y="22" width="120" height="80" rx="8" fill="#fff" stroke="#cdd5e0" strokeWidth="2" />
      <rect x="20" y="22" width="120" height="15" rx="8" fill="#1657c8" />
      <rect x="34" y="50" width="60" height="9" rx="4.5" fill="#1657c8" />
      <rect x="34" y="66" width="90" height="6" rx="3" fill="#dbe1ea" />
      <rect x="34" y="78" width="74" height="6" rx="3" fill="#dbe1ea" />
      <line x1="146" y1="62" x2="176" y2="62" stroke="#1657c8" strokeWidth="2.5" strokeDasharray="2 6" strokeLinecap="round" />
      <circle cx="146" cy="62" r="4" fill="#1657c8" /><circle cx="176" cy="62" r="4" fill="#1657c8" />
      <rect x="184" y="14" width="56" height="92" rx="13" fill="#161616" />
      <rect x="189" y="19" width="46" height="82" rx="9" fill="#fff" />
      <rect x="198" y="30" width="13" height="6" rx="3" fill="#222834" />
      <rect x="198" y="40" width="9" height="6" rx="3" fill="#0f8a52" />
      <rect x="199" y="54" width="28" height="28" rx="5" fill="#eef2f7" stroke="#cdd5e0" />
    </svg>
  );
}
function IllIban() {
  return (
    <svg width="270" height="120" viewBox="0 0 270 120">
      {/* banque */}
      <rect x="14" y="40" width="58" height="42" rx="7" fill="#fff" stroke="#cdd5e0" strokeWidth="2" />
      <path d="M28 52l15-8 15 8" fill="none" stroke="#1657c8" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" />
      <path d="M31 56v14m6-14v14m12-14v14m6-14v14M28 72h30" stroke="#1657c8" strokeWidth="2" strokeLinecap="round" />
      {/* phone wallet */}
      <rect x="106" y="16" width="58" height="92" rx="13" fill="#161616" />
      <rect x="111" y="21" width="48" height="82" rx="9" fill="#fff" />
      <rect x="120" y="34" width="13" height="6" rx="3" fill="#222834" />
      <rect x="120" y="44" width="9" height="6" rx="3" fill="#0f8a52" />
      <rect x="120" y="58" width="30" height="20" rx="4" fill="url(#ibg)" />
      <rect x="120" y="82" width="30" height="6" rx="3" fill="#dbe1ea" />
      {/* operator */}
      <rect x="198" y="40" width="58" height="42" rx="7" fill="#fff" stroke="#e6dcf2" strokeWidth="2" />
      <path d="M214 70v-7m7 7v-13m7 13v-19" stroke="#7a23c4" strokeWidth="2.4" strokeLinecap="round" />
      <rect x="238" y="52" width="10" height="16" rx="2" fill="#f0e8fa" stroke="#7a23c4" strokeWidth="1.6" />
      {/* arrows */}
      <path d="M76 60h26m-5-4l5 4-5 4" stroke="#1657c8" strokeWidth="2.2" fill="none" strokeLinecap="round" strokeLinejoin="round" />
      <path d="M168 60h26m-5-4l5 4-5 4" stroke="#7a23c4" strokeWidth="2.2" fill="none" strokeLinecap="round" strokeLinejoin="round" />
      <defs>
        <linearGradient id="ibg" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0" stopColor="#1657c8" /><stop offset="1" stopColor="#0f3f95" />
        </linearGradient>
      </defs>
    </svg>
  );
}

// ── page catalogue ──
function HomeCatalog({ onPick }) {
  return (
    <div className="thin-scroll" style={{ width: '100%', height: '100vh', overflowY: 'auto', background: 'var(--bank-bg)' }}>
      {/* topbar */}
      <header style={{ display: 'flex', alignItems: 'center', gap: 14, padding: '16px clamp(20px,5vw,56px)',
        borderBottom: '1px solid var(--bank-line)', background: 'rgba(255,255,255,.85)', backdropFilter: 'blur(8px)',
        position: 'sticky', top: 0, zIndex: 10 }}>
        <div style={{ width: 38, height: 38, borderRadius: 10, background: 'var(--rf-blue)', flexShrink: 0,
          display: 'grid', placeItems: 'center' }}><HIc.shield s={20} c="#fff" /></div>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 14.5, fontWeight: 800, color: 'var(--bank-ink)', letterSpacing: '-.01em' }}>Démonstrateur EUDI Wallet</div>
          <div style={{ fontSize: 11.5, color: 'var(--bank-faint)' }}>Portefeuille d'identité numérique européen · eIDAS2</div>
        </div>
      </header>

      <main style={{ maxWidth: 1080, margin: '0 auto', padding: 'clamp(34px,5vw,60px) clamp(20px,5vw,56px) 64px' }}>
        <a href="../../index.html" style={{ display: 'inline-flex', alignItems: 'center', gap: 8, textDecoration: 'none',
          whiteSpace: 'nowrap', fontSize: 13.5, fontWeight: 700, color: 'var(--bank-muted)', border: '1px solid var(--bank-line)',
          background: '#fff', padding: '9px 15px', borderRadius: 10, marginBottom: 26 }}>
          <H2.back s={16} /> Retour à tous les démonstrateurs
        </a>
        <div>
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8, fontSize: 12, fontWeight: 700,
            letterSpacing: '.05em', textTransform: 'uppercase', color: 'var(--bank-primary)',
            background: 'var(--bank-soft)', padding: '6px 12px', borderRadius: 999, marginBottom: 18 }}>
            <HIc.shield s={14} c="var(--bank-primary)" /> Choisissez un parcours
          </span>
        </div>
        <h1 style={{ fontSize: 'clamp(28px,4vw,40px)', fontWeight: 800, letterSpacing: '-.025em', lineHeight: 1.08,
          color: 'var(--bank-ink)', margin: 0, maxWidth: 18 + 'ch' }}>
          Le portefeuille d'identité, en situation réelle
        </h1>
        <p style={{ fontSize: 'clamp(15px,1.6vw,17px)', color: 'var(--bank-muted)', maxWidth: '60ch',
          lineHeight: 1.6, margin: '16px 0 0' }}>
          Chaque parcours illustre un cas d'usage métier du wallet EUDI : présentation de données d'identité,
          puis émission et réutilisation d'attestations qualifiées (QEAA). Lancez celui que vous souhaitez présenter.
        </p>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(330px,1fr))', gap: 24, marginTop: 38 }}>
          <JourneyCard
            tag="Présentation d'identité · OpenID4VP"
            title="Entrée en relation bancaire"
            desc="Le client s'identifie avec son portefeuille pour ouvrir un compte. La banque reçoit des données d'identité vérifiées à la source."
            points={['Identification par le PID (carte d\'identité)', 'Modalités cross-device (QR) et same-device (lien)', 'Consentement attribut par attribut']}
            badge="Disponible" accent="#1657c8" icon={<IllRelation />}
            onLaunch={() => onPick('relation')} />
          <JourneyCard
            tag="Émission + réutilisation · OpenID4VCI / VP"
            title="Attestation IBAN — émission & usage"
            desc="La banque émet une attestation IBAN dans le wallet, que le client réutilise ensuite chez un opérateur télécom pour ouvrir une ligne mobile."
            points={['Acte 1 — la banque délivre l\'attestation IBAN (QEAA)', 'Acte 2 — l\'opérateur vérifie identité + IBAN', 'Mandat SEPA prérempli, sans ressaisie']}
            badge="Nouveau" accent="#7a23c4" icon={<IllIban />}
            onLaunch={() => onPick('iban')} />
        </div>

        <div style={{ marginTop: 34, display: 'flex', alignItems: 'center', gap: 12, padding: '14px 18px',
          borderRadius: 12, background: '#fff', border: '1px solid var(--bank-line)', fontSize: 13, color: 'var(--bank-muted)' }}>
          <span style={{ color: 'var(--bank-primary)', flexShrink: 0 }}><HIc.lock s={18} c="var(--bank-primary)" /></span>
          Démonstrateurs illustratifs : profils et données fictifs. Les protocoles (OpenID4VP, OpenID4VCI) et les
          rôles ARF (émetteur, vérificateur, portefeuille) sont représentés à des fins pédagogiques.
        </div>
      </main>
    </div>
  );
}

// ── racine : bascule entre catalogue et parcours ──
function Root() {
  const [view, setView] = useStateH(() => localStorage.getItem('eudi-view') || 'home');
  useEffectH(() => { localStorage.setItem('eudi-view', view); }, [view]);
  const home = () => setView('home');
  if (view === 'relation') return <HRelation onHome={home} />;
  if (view === 'iban') return <HIban onHome={home} />;
  return <HomeCatalog onPick={setView} />;
}

ReactDOM.createRoot(document.getElementById('root')).render(<Root />);