// simple-screens-2.jsx — auth, erreurs, notifications, cas spéciaux

const { useState: u2, useEffect: ue2, useRef: ur2 } = React;

// Helpers partagés depuis simple-screens.jsx (déjà chargé avant ce script)
const Ic     = window.SimpleHelpers.Ic;
const BackBar = window.SimpleHelpers.BackBar;
const Steps   = window.SimpleHelpers.Steps;
const MiniQR  = window.SimpleHelpers.MiniQR;

function useCtx2() { return React.useContext(window.AppCtx) || {}; }

function ErrMsg({ msg }) {
  if (!msg) return null;
  return (
    <p style={{ color: 'var(--bad)', fontSize: 14, margin: '10px 0 0',
                padding: '10px 14px', background: 'rgba(220,38,38,0.08)',
                borderRadius: 10, lineHeight: 1.45 }}>{msg}</p>
  );
}

// ── 13 — Bienvenue ───────────────────────────────────────────
// Navigation gérée par TRANSITIONS dans app.html (btn-primary→list, btn-light→login)
const ScrWelcome = () => {
  const C = window.__club || {};
  return (
    <div className="scr" data-screen-label="13 Bienvenue">
      <div className="welcome">
        <div className="welcome-logo">
          <img src={C.logo || "assets/fcsm-logo.png"} alt={C.abbreviation || C.name || "Club"}/>
        </div>
        <h1>Bienvenue chez les <em>{C.nickname || C.name || "supporters"}</em>.</h1>
        <p>Achète tes places en quelques minutes. Tes billets restent dans ton téléphone, prêts à scanner.</p>
        <div className="welcome-actions">
          <button className="btn-primary">
            Acheter ma place
            <Ic name="arrow" size={20}/>
          </button>
          <button className="btn-light">Je suis déjà abonné</button>
          <div className="welcome-link">
            Déjà un compte&nbsp;? <a href="#">Se connecter</a>
          </div>
        </div>
      </div>
    </div>
  );
};

// ── 14 — Créer un compte ─────────────────────────────────────
const ScrSignup = () => {
  const { goTo, appState, setAppState } = useCtx2();
  const [name,    setName]    = u2('');
  const [email,   setEmail]   = u2('');
  const [pw,      setPw]      = u2('');
  const [loading, setLoading] = u2(false);
  const [err,     setErr]     = u2(null);

  function afterAuth(token, user) {
    localStorage.setItem('token', token);
    setAppState(s => ({ ...s, token, user: user || null }));
    const dest = appState.returnAfterAuth || 'home';
    setAppState(s => ({ ...s, returnAfterAuth: null }));
    goTo(dest);
  }

  async function submit(e) {
    if (e) e.preventDefault();
    if (!name.trim() || !email.trim() || pw.length < 8) {
      setErr('Remplis tous les champs (mot de passe : 8 caractères min.)');
      return;
    }
    setLoading(true); setErr(null);
    try {
      const d = await API.register(name.trim(), email.trim(), pw);
      afterAuth(d.token, d.user);
    } catch (ex) {
      setErr(ex.message || 'Erreur lors de la création du compte');
      setLoading(false);
    }
  }

  async function asGuest(e) {
    e.preventDefault();
    if (!email.trim()) { setErr('Saisis ton email pour continuer en invité'); return; }
    setLoading(true); setErr(null);
    try {
      const d = await API.guest(name.trim() || 'Invité', email.trim());
      afterAuth(d.token, d.user);
    } catch (ex) {
      setErr(ex.message || 'Erreur');
      setLoading(false);
    }
  }

  return (
    <div className="scr" data-screen-label="14 Créer un compte">
      <BackBar/>
      <div className="body">
        <div className="page-title">
          <h1>Créer un compte</h1>
          <p>Pour retrouver tes billets et tes commandes facilement.</p>
        </div>
        <div className="form-card">
          <div className="transfer-form">
            <div className="field">
              <label>Prénom et nom</label>
              <input type="text" placeholder="Maxime Dubois"
                value={name} onChange={e => setName(e.target.value)}/>
            </div>
            <div className="field">
              <label>Email</label>
              <input type="email" placeholder="exemple@email.fr"
                value={email} onChange={e => setEmail(e.target.value)}/>
              <span className="field-hint">On y enverra tes billets et tes confirmations.</span>
            </div>
            <div className="field">
              <label>Mot de passe</label>
              <input type="password" placeholder="Au moins 8 caractères"
                value={pw} onChange={e => setPw(e.target.value)}/>
            </div>
          </div>
          <ErrMsg msg={err}/>
          <div className="help-banner" style={{ margin: "22px 0 0" }}>
            <div className="help-banner-icon"><Ic name="lock" size={20}/></div>
            <div className="help-banner-text">
              <b>Pas envie de créer un compte&nbsp;?</b>
              Tu peux <a href="#" onClick={asGuest}>acheter en tant qu'invité</a> avec juste un email.
            </div>
          </div>
        </div>
      </div>
      <div className="action-bar">
        <button className="btn-primary" onClick={submit} disabled={loading}>
          {loading ? 'Création…' : 'Créer mon compte'}
          {!loading && <Ic name="arrow" size={20}/>}
        </button>
      </div>
    </div>
  );
};

// ── 15 — Se connecter ────────────────────────────────────────
const ScrLogin = () => {
  const { goTo, appState, setAppState } = useCtx2();
  const C = window.__club || {};
  const [email,   setEmail]   = u2('');
  const [pw,      setPw]      = u2('');
  const [loading, setLoading] = u2(false);
  const [err,     setErr]     = u2(null);

  async function submit(e) {
    if (e) e.preventDefault();
    if (!email.trim() || !pw) { setErr('Remplis les deux champs'); return; }
    setLoading(true); setErr(null);
    try {
      const d = await API.login(email.trim(), pw);
      localStorage.setItem('token', d.token);
      setAppState(s => ({ ...s, token: d.token, user: d.user || null }));
      const dest = appState.returnAfterAuth || 'home';
      setAppState(s => ({ ...s, returnAfterAuth: null }));
      goTo(dest);
    } catch (ex) {
      setErr(ex.message || 'Email ou mot de passe incorrect');
      setLoading(false);
    }
  }

  return (
    <div className="scr" data-screen-label="15 Se connecter">
      <BackBar/>
      <div className="body">
        <div className="page-title">
          <h1>Se connecter</h1>
          <p>Bon retour parmi les {C.nickname || C.name || "supporters"}.</p>
        </div>
        <div className="form-card">
          <div className="transfer-form">
            <div className="field">
              <label>Email</label>
              <input type="email" placeholder="exemple@email.fr"
                value={email} onChange={e => setEmail(e.target.value)}/>
            </div>
            <div className="field">
              <label>Mot de passe</label>
              <input type="password" placeholder="Mot de passe"
                value={pw} onChange={e => setPw(e.target.value)}/>
              <span className="field-hint" style={{ textAlign: "right", display: "block" }}>
                <a href="#"
                   style={{ color: "var(--navy)", fontWeight: 600 }}
                   onClick={e => { e.preventDefault(); goTo('pwdReset'); }}>
                  Mot de passe oublié&nbsp;?
                </a>
              </span>
            </div>
          </div>
          <ErrMsg msg={err}/>
          <div className="help-banner" style={{ margin: "22px 0 0" }}>
            <div className="help-banner-icon"><Ic name="info" size={20}/></div>
            <div className="help-banner-text">
              <b>Première fois&nbsp;?</b>
              <a href="#" onClick={e => { e.preventDefault(); goTo('signup'); }}>
                Crée un compte gratuit
              </a> en 30 secondes.
            </div>
          </div>
        </div>
      </div>
      <div className="action-bar">
        <button className="btn-primary" onClick={submit} disabled={loading}>
          {loading ? 'Connexion…' : 'Se connecter'}
        </button>
      </div>
    </div>
  );
};

// ── 16 — Mot de passe oublié ─────────────────────────────────
const ScrPwdReset = () => {
  const { goTo } = useCtx2();
  const C = window.__club || {};
  const [email,   setEmail]   = u2('');
  const [loading, setLoading] = u2(false);
  const [sent,    setSent]    = u2(false);
  const [err,     setErr]     = u2(null);

  async function submit(e) {
    if (e) e.preventDefault();
    if (!email.trim()) { setErr('Saisis ton email'); return; }
    setLoading(true); setErr(null);
    try {
      await API.passwordReset(email.trim());
      setSent(true);
    } catch (ex) {
      setErr(ex.message || "Erreur lors de l'envoi");
      setLoading(false);
    }
  }

  if (sent) return (
    <div className="scr" data-screen-label="16 Mot de passe oublié">
      <BackBar label="Connexion"/>
      <div className="body" style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', flexDirection: 'column', textAlign: 'center', padding: '40px 28px' }}>
        <div style={{ width: 64, height: 64, borderRadius: '50%', background: 'var(--ok)', display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 20 }}>
          <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
            <path d="M20 6 9 17l-5-5"/>
          </svg>
        </div>
        <h1 style={{ fontSize: 22, fontWeight: 800, margin: '0 0 10px' }}>Email envoyé&nbsp;!</h1>
        <p style={{ color: 'var(--ink-2)', fontSize: 15 }}>
          Vérifie ta boîte mail à <b>{email}</b>.<br/>Le lien est valable 30 minutes.
        </p>
        <button className="btn-primary" style={{ marginTop: 28 }} onClick={() => goTo('login')}>
          Retour à la connexion
        </button>
      </div>
    </div>
  );

  return (
    <div className="scr" data-screen-label="16 Mot de passe oublié">
      <BackBar label="Connexion"/>
      <div className="body">
        <div className="page-title">
          <h1>Mot de passe oublié</h1>
          <p>Pas de souci. Donne-nous ton email, on t'envoie un lien pour en créer un nouveau.</p>
        </div>
        <div className="form-card">
          <div className="transfer-form">
            <div className="field">
              <label>Ton email</label>
              <input type="email" placeholder="exemple@email.fr"
                value={email} onChange={e => setEmail(e.target.value)}/>
              <span className="field-hint">L'email avec lequel tu as créé ton compte.</span>
            </div>
          </div>
          <ErrMsg msg={err}/>
          <div className="help-banner" style={{ margin: "22px 0 0" }}>
            <div className="help-banner-icon"><Ic name="phone" size={20}/></div>
            <div className="help-banner-text">
              <b>Tu n'as plus accès à cet email&nbsp;?</b>
              Appelle-nous au{' '}
              <a href={`tel:${C.phone || ""}`}>{C.phone || "notre service billetterie"}</a>,
              on t'aidera à retrouver ton compte.
            </div>
          </div>
        </div>
      </div>
      <div className="action-bar">
        <button className="btn-primary" onClick={submit} disabled={loading}>
          {loading ? 'Envoi…' : 'Envoyer le lien'}
        </button>
      </div>
    </div>
  );
};

// ── 17 — Paiement refusé ─────────────────────────────────────
const ScrErrPayment = () => {
  const { back, goTo, appState } = useCtx2();
  const C = window.__club || {};

  const [secs, setSecs] = u2(() => {
    if (appState.holdExpiresAt) {
      return Math.max(0, Math.floor((new Date(appState.holdExpiresAt) - Date.now()) / 1000));
    }
    return 0;
  });

  ue2(() => {
    if (!secs) return;
    const t = setInterval(() => setSecs(s => Math.max(0, s - 1)), 1000);
    return () => clearInterval(t);
  }, []);

  const mins   = Math.floor(secs / 60);
  const secStr = String(secs % 60).padStart(2, '0');

  return (
    <div className="scr" data-screen-label="17 Paiement refusé">
      <BackBar label="Paiement"/>
      <div className="body" style={{ padding: 0 }}>
        <div className="err">
          <div className="err-icon">
            <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="currentColor"
              strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
              <path d="M6 6l12 12M18 6 6 18"/>
            </svg>
          </div>
          <h1>Paiement refusé</h1>
          <p>Ta banque a refusé le paiement. Aucun montant n'a été débité. Tu peux réessayer ou changer de moyen de paiement.</p>
          <div className="err-actions">
            <button className="btn-primary"   onClick={() => back()}>Réessayer le paiement</button>
            <button className="btn-secondary" onClick={() => back()}>Changer de carte</button>
            <button className="btn-text"      onClick={() => goTo('home')}>
              Appeler le club — {C.phone || "Billetterie"}
            </button>
          </div>
        </div>
        {secs > 0 && (
          <div className="help-banner" style={{ margin: "8px 20px 0" }}>
            <div className="help-banner-icon"><Ic name="info" size={20}/></div>
            <div className="help-banner-text">
              <b>Tes places ne sont pas perdues</b>
              On les garde encore {mins} min {secStr} s, le temps que tu réessayes.
            </div>
          </div>
        )}
      </div>
    </div>
  );
};

// ── 18 — Session expirée ─────────────────────────────────────
const ScrSessionExpired = () => {
  const { goTo } = useCtx2();
  return (
    <div className="scr" data-screen-label="18 Session expirée">
      <BackBar label="Paiement"/>
      <div className="modal-screen">
        <div className="modal-screen-bg" style={{ background: "var(--soft)" }}/>
        <div className="modal-sheet">
          <div className="err-icon warn">
            <svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="currentColor"
              strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <circle cx="12" cy="12" r="9"/>
              <path d="M12 7v5l3 2"/>
            </svg>
          </div>
          <h2>Ta réservation a expiré</h2>
          <p>Tu as 15 minutes pour finaliser ta commande. Tes places ont été remises en vente pour les autres supporters.</p>
          <button className="btn-primary" style={{ marginBottom: 10 }} onClick={() => goTo('zones')}>
            Choisir à nouveau mes places
          </button>
          <button className="btn-text" style={{ padding: "10px 0" }} onClick={() => goTo('home')}>
            Retour à l'accueil
          </button>
        </div>
      </div>
    </div>
  );
};

// ── 19 — Place plus disponible ───────────────────────────────
const ScrErrSoldOut = () => {
  const { goTo, back } = useCtx2();
  return (
    <div className="scr" data-screen-label="19 Place plus disponible">
      <BackBar label="Choisir mes places"/>
      <div className="modal-screen">
        <div className="modal-screen-bg" style={{ background: "var(--soft)" }}/>
        <div className="modal-sheet">
          <div className="err-icon warn">
            <svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="currentColor"
              strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <path d="M12 8v4M12 16v.01"/>
              <circle cx="12" cy="12" r="9"/>
            </svg>
          </div>
          <h2>Plus de chance la prochaine&nbsp;!</h2>
          <p>La place sélectionnée vient d'être prise par un autre supporter. Choisis-en une autre, on garde ta sélection précédente.</p>
          <button className="btn-primary" style={{ marginBottom: 10 }} onClick={() => back()}>
            Choisir une autre place
          </button>
          <button className="btn-text" style={{ padding: "10px 0" }} onClick={() => goTo('zones')}>
            Revenir au match
          </button>
        </div>
      </div>
    </div>
  );
};

// ── 20 — Billet hors-ligne ───────────────────────────────────
const ScrOfflineTicket = () => {
  const { appState } = useCtx2();
  const C      = window.__club || {};
  const order  = appState.order   || {};
  const match  = order.match      || {};
  const tickets = order.tickets   || [];
  const t0     = tickets[0]       || {};

  return (
    <div className="scr" data-screen-label="20 Billet hors-ligne">
      <div className="offline-banner">
        <span className="offline-banner-dot"/>
        Hors-ligne · ton billet fonctionne quand même
      </div>
      <BackBar label="Mes places"/>
      <div className="body">
        <div className="page-title">
          <h1>Ton billet</h1>
          <p>Pas de réseau au stade&nbsp;? Pas grave — ce QR fonctionne hors-ligne.</p>
        </div>

        <div className="ticket-detail">
          <div className="ticket-detail-top">
            <div className="ticket-detail-label">Billet officiel · {C.abbreviation || C.name || "Club"}</div>
            <div className="ticket-detail-match">
              {match.home || C.name || "Club"} — {match.away || "Adversaire"}
            </div>
            <div className="ticket-detail-when">
              {match.date ? API.fmtDate(match.date) : "—"} ·{' '}
              {(match.kickoff || '').slice(0, 5).replace(':', 'h') || "—"} ·{' '}
              {C.stadiumShort || C.stadium || "Stade"}
            </div>
          </div>
          <div className="ticket-detail-qr">
            <div className="ticket-detail-qr-frame">
              <MiniQR size={170} token={t0.qr_token}/>
            </div>
            <div className="ticket-detail-qr-id">
              N°{' '}{t0.id
                ? (C.abbreviation || "TK") + "-" + t0.id.slice(-8).toUpperCase()
                : "—"}
            </div>
          </div>
          <div className="ticket-detail-info">
            <div><small>Au nom de</small><b>{t0.holder_name || "—"}</b></div>
            <div><small>Tribune</small><b>{t0.zone || "—"}</b></div>
            {!t0.standing && t0.seat && (
              <div><small>Rang &amp; place</small><b>Rang {t0.seat.row} · place {t0.seat.number}</b></div>
            )}
            <div><small>Entrée</small>
              <b>{match.doors_open ? (match.doors_open || '').slice(0, 5).replace(':', 'h') : "—"}</b>
            </div>
          </div>
        </div>

        <div className="help-banner" style={{ marginTop: 18 }}>
          <div className="help-banner-icon"><Ic name="info" size={20}/></div>
          <div className="help-banner-text">
            <b>Ce QR est enregistré sur ton téléphone</b>
            Pas besoin d'internet pour le scanner à l'entrée. Garde l'écran allumé.
          </div>
        </div>
      </div>
    </div>
  );
};

// ── 21 — Notifications (lockscreen) ─────────────────────────
const ScrLockscreen = () => {
  const C = window.__club || {};
  return (
    <div className="scr" data-screen-label="21 Notifications">
      <div className="lockscreen">
        <div className="lock-clock">
          <div className="lock-clock-time">9:41</div>
          <div className="lock-clock-date">jeudi 14 mai</div>
        </div>
        <div className="push-list">
          <div className="push">
            <div className="push-icon">
              <img src={C.logo || "assets/fcsm-logo.png"} alt=""/>
            </div>
            <div className="push-body">
              <div className="push-head">
                <b>{(C.abbreviation || C.name || "Club") + " Billetterie"}</b>
                <span>il y a 2 min</span>
              </div>
              <div className="push-title">⚽ J-1 — {C.name || "Club"} reçoit Le Puy demain</div>
              <div className="push-text">
                Vendredi 20h00 à {C.stadiumShort || C.stadium || "Stade"} · ton billet est prêt dans l'app. Bon match&nbsp;!
              </div>
            </div>
          </div>
          <div className="push">
            <div className="push-icon">
              <img src={C.logo || "assets/fcsm-logo.png"} alt=""/>
            </div>
            <div className="push-body">
              <div className="push-head">
                <b>{(C.abbreviation || C.name || "Club") + " Billetterie"}</b>
                <span>hier 18:32</span>
              </div>
              <div className="push-title">🎟 Marie a accepté la place</div>
              <div className="push-text">Elle a téléchargé son billet. Elle est prête pour le match.</div>
            </div>
          </div>
          <div className="push">
            <div className="push-icon" style={{ background: "var(--yellow)" }}>
              <span style={{ color: "var(--navy)", fontSize: 18, fontWeight: 800 }}>★</span>
            </div>
            <div className="push-body">
              <div className="push-head">
                <b>{(C.abbreviation || C.name || "Club") + " Billetterie"}</b>
                <span>22 mai</span>
              </div>
              <div className="push-title">Le billet du prochain match est prêt</div>
              <div className="push-text">
                {C.name || "Club"} — Versailles · Ven. 22 mai · scanne ta carte abonné à la porte B2.
              </div>
            </div>
          </div>
        </div>
        <div style={{ flex: 1 }}/>
        <div style={{ textAlign: "center", fontSize: 13, color: "rgba(255,255,255,0.55)", marginTop: 12 }}>
          ⬇ Glisser vers le haut pour ouvrir l'app
        </div>
      </div>
    </div>
  );
};

// ── 22 — Email de confirmation ───────────────────────────────
const ScrEmail = () => {
  const C = window.__club || {};
  return (
    <div className="scr" data-screen-label="22 Email confirmation">
      <div className="email-mock">
        <div className="email-app-bar">
          <span className="from-folder">
            <Ic name="back" size={16} stroke={2.2}/>
            Réception
          </span>
          <span>1 sur 1 287</span>
        </div>
        <div className="email-meta">
          <div className="email-meta-subject">
            🎟 Tes places pour {C.name || "Club"} — Le Puy sont prêtes
          </div>
          <div className="email-from">
            <div className="email-from-avatar">{(C.abbreviation || C.name || "FC").slice(0, 2)}</div>
            <div>
              <div className="email-from-name">{C.fullName || C.name || "Club"}</div>
              <div className="email-from-meta">à moi · 10 mai à 14:32</div>
            </div>
          </div>
        </div>
        <div className="email-body">
          <div className="email-banner">
            <div className="email-banner-logo">
              <img src={C.logo || "assets/fcsm-logo.png"} alt={C.abbreviation || C.name || "Club"}/>
            </div>
            <h2>Merci Maxime&nbsp;!</h2>
            <p>Ta commande est confirmée. À vendredi à {C.stadiumShort || C.stadium || "Stade"}.</p>
          </div>
          <div className="email-content">
            <h3>{C.name || "Club"} — Le Puy</h3>
            <div className="meta">
              Vendredi 15 mai 2026 à 20h00 · {C.stadium || C.stadiumShort || "Stade"}
            </div>
            <div className="summary-mini">
              <div className="summary-mini-row">
                <span className="lbl">Tribune</span>
                <b>Virage Est — Le Kop</b>
              </div>
              <div className="summary-mini-row">
                <span className="lbl">Places</span>
                <b>Rang D, places 4 et 5</b>
              </div>
              <div className="summary-mini-row">
                <span className="lbl">Total payé</span>
                <b>36 € (carte ··4421)</b>
              </div>
              <div className="summary-mini-row">
                <span className="lbl">N° de commande</span>
                <b>{(C.abbreviation || "TK") + "-25-01287"}</b>
              </div>
            </div>
            <a href="#" className="cta-button">Ouvrir mes billets</a>
            <p style={{ marginTop: 18 }}><b>Comment ça se passe&nbsp;?</b></p>
            <p>
              Tes billets sont déjà dans ton téléphone. À l'entrée, présente le QR depuis l'app
              ou Apple/Google Wallet. Les portes ouvrent à 18h30.
            </p>
            <p>
              Une question&nbsp;? Réponds simplement à cet email ou appelle-nous au{' '}
              {C.phone || "notre service billetterie"}.
            </p>
            <p style={{ color: "#6C7280", fontSize: 13, marginTop: 22 }}>
              {C.fullName || C.name || "Club"}{C.address ? " · " + C.address : ""}
            </p>
          </div>
        </div>
      </div>
    </div>
  );
};

// ── 23 — Accessibilité PMR ───────────────────────────────────
const ScrPMR = () => {
  const C = window.__club || {};
  return (
    <div className="scr" data-screen-label="23 Accessibilité PMR">
      <BackBar/>
      <Steps step={2} total={4} label="Choisir une tribune"/>
      <div className="body">
        <div className="page-title">
          <h1>Espace accessible</h1>
          <p>Tu es en fauteuil&nbsp;? Tu accompagnes une personne en fauteuil&nbsp;? Voici les places adaptées.</p>
        </div>

        <div className="access-card">
          <div className="access-card-ic">
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor"
              strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
              <circle cx="10" cy="5" r="2"/>
              <path d="M10 7v5h6l2 5"/>
              <path d="M16 18a6 6 0 1 1-9-5"/>
            </svg>
          </div>
          <div className="access-card-text">
            <b>Place + accompagnateur gratuit</b>
            Pour chaque place PMR, ton accompagnateur entre gratuitement. Accès direct sans escalier.
          </div>
        </div>

        <div className="section-h">Tribunes adaptées</div>
        <div className="zones">
          <div className="zone on">
            <div className="zone-side"/>
            <div className="zone-body">
              <div className="zone-info">
                <b>Tribune Officielle — Espace PMR</b>
                <span>Accès direct · vue dégagée · 4 places restantes</span>
              </div>
              <div className="zone-price">
                <b>15 €</b>
                <span>+ accompagnateur gratuit</span>
              </div>
              <div className="zone-radio"/>
            </div>
          </div>
          <div className="zone">
            <div className="zone-side"/>
            <div className="zone-body">
              <div className="zone-info">
                <b>Tribune Famille — Espace PMR</b>
                <span>Environnement calme · 6 places restantes</span>
              </div>
              <div className="zone-price">
                <b>12 €</b>
                <span>+ accompagnateur gratuit</span>
              </div>
              <div className="zone-radio"/>
            </div>
          </div>
        </div>

        <div className="help-banner" style={{ marginTop: 20 }}>
          <div className="help-banner-icon"><Ic name="phone" size={20}/></div>
          <div className="help-banner-text">
            <b>Besoin d'aide pour réserver&nbsp;?</b>
            Notre équipe accessibilité te rappelle gratuitement au{' '}
            <a href={`tel:${C.phoneAccessibility || C.phone || ""}`}>
              {C.phoneAccessibility || C.phone || "notre service"}
            </a>.
          </div>
        </div>
        <div style={{ height: 20 }}/>
      </div>
      <div className="action-bar">
        <button className="btn-primary">Continuer</button>
      </div>
    </div>
  );
};

// ── 24 — Groupes & CE ────────────────────────────────────────
const ScrGroup = () => {
  const { appState } = useCtx2();
  const C = window.__club || {};
  const [groupName,    setGroupName]    = u2('');
  const [contactName,  setContactName]  = u2('');
  const [phone,        setPhone]        = u2('');
  const [email,        setEmail]        = u2('');
  const [qty,          setQty]          = u2('');
  const [loading,      setLoading]      = u2(false);
  const [done,         setDone]         = u2(false);
  const [err,          setErr]          = u2(null);

  async function submit() {
    const qtyNum = parseInt(qty, 10);
    if (!groupName.trim() || !email.trim() || !qtyNum || qtyNum < 10) {
      setErr('Remplis le nom du groupe, ton email et un nombre de personnes ≥ 10.');
      return;
    }
    setLoading(true); setErr(null);
    try {
      const matchId = appState.match ? appState.match.id : null;
      await API.groupRequest(matchId, groupName.trim(), contactName.trim() || null,
                             email.trim(), phone.trim() || null, qtyNum, null);
      setDone(true);
    } catch (ex) {
      setErr(ex.message || "Erreur lors de l'envoi");
    } finally {
      setLoading(false);
    }
  }

  if (done) return (
    <div className="scr" data-screen-label="24 Groupes & CE">
      <BackBar/>
      <div className="body" style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', flexDirection: 'column', textAlign: 'center', padding: '40px 28px' }}>
        <div style={{ width: 64, height: 64, borderRadius: '50%', background: 'var(--ok)', display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 20 }}>
          <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
            <path d="M20 6 9 17l-5-5"/>
          </svg>
        </div>
        <h1 style={{ fontSize: 22, fontWeight: 800, margin: '0 0 10px' }}>Demande envoyée&nbsp;!</h1>
        <p style={{ color: 'var(--ink-2)', fontSize: 15 }}>
          Notre équipe te recontacte sous 48h ouvrées à <b>{email}</b> avec un devis personnalisé.
        </p>
      </div>
    </div>
  );

  return (
    <div className="scr" data-screen-label="24 Groupes & CE">
      <BackBar/>
      <div className="body">
        <div className="page-title">
          <h1>Groupes &amp; CE</h1>
          <p>À partir de 10 personnes — tarif réduit, accueil dédié, paiement différé.</p>
        </div>

        <div className="transfer-card">
          <div className="transfer-form">
            <div className="field">
              <label>Nom du groupe ou de l'entreprise</label>
              <input type="text" placeholder="CE Peugeot Montbéliard"
                value={groupName} onChange={e => setGroupName(e.target.value)}/>
            </div>
            <div className="field">
              <label>Ton prénom et nom</label>
              <input type="text" placeholder="Maxime Dubois"
                value={contactName} onChange={e => setContactName(e.target.value)}/>
            </div>
            <div className="field">
              <label>Combien de personnes&nbsp;?</label>
              <input type="number" placeholder="10 minimum" min="10"
                value={qty} onChange={e => setQty(e.target.value)}/>
            </div>
            <div className="field">
              <label>Téléphone</label>
              <input type="tel" placeholder="06 00 00 00 00"
                value={phone} onChange={e => setPhone(e.target.value)}/>
            </div>
            <div className="field">
              <label>Email</label>
              <input type="email" placeholder="exemple@email.fr"
                value={email} onChange={e => setEmail(e.target.value)}/>
            </div>
          </div>
        </div>

        <ErrMsg msg={err}/>

        <div className="help-banner" style={{ marginTop: 18 }}>
          <div className="help-banner-icon"><Ic name="info" size={20}/></div>
          <div className="help-banner-text">
            <b>Réponse sous 48h ouvrées</b>
            Notre équipe te recontacte avec un devis personnalisé et un mode de paiement adapté à ton CE.
          </div>
        </div>
        <div style={{ height: 20 }}/>
      </div>
      <div className="action-bar">
        <button className="btn-primary" onClick={submit} disabled={loading}>
          {loading ? 'Envoi…' : 'Envoyer ma demande'}
        </button>
      </div>
    </div>
  );
};

// ── 25 — Choix d'abonnement ──────────────────────────────────
const ScrAboPick = () => {
  const { goTo, setAppState } = useCtx2();
  const [plans,   setPlans]   = u2([]);
  const [pick,    setPick]    = u2(null);
  const [loading, setLoading] = u2(true);
  const [err,     setErr]     = u2(null);

  ue2(() => {
    API.subscriptionPlans()
      .then(p => {
        setPlans(p);
        if (p.length) setPick(p.find(x => x.featured) || p[0]);
        setLoading(false);
      })
      .catch(ex => { setErr(ex.message || 'Erreur'); setLoading(false); });
  }, []);

  function next() {
    if (!pick) return;
    setAppState(s => ({ ...s, selectedPlan: pick }));
    goTo('aboPay');
  }

  return (
    <div className="scr" data-screen-label="25 Choix d'abonnement">
      <BackBar/>
      <Steps step={1} total={3} label="Choisir ma formule"/>
      <div className="body">
        <div className="page-title">
          <h1>Une saison, plus économique</h1>
          <p>Tous les matchs à domicile. Choisis ta formule.</p>
        </div>

        {loading && (
          <div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '40px 0' }}>
            <p style={{ color: 'var(--ink-2)', fontSize: 15 }}>Chargement…</p>
          </div>
        )}
        {err && <ErrMsg msg={err}/>}

        {!loading && !err && (
          <div className="formula-list">
            {plans.map(p => (
              <div
                key={p.id}
                className={['formula', pick && pick.id === p.id ? 'on' : ''].join(' ')}
                onClick={() => setPick(p)}
              >
                <div className="formula-name">{p.name}</div>
                <div className="formula-desc">{p.description || p.zone}</div>
                <div className="formula-price">
                  <b>{Number(p.price).toFixed(0)} €</b>
                  {p.price_full > p.price && <del>{Number(p.price_full).toFixed(0)} €</del>}
                  {p.match_count > 0 && (
                    <span>= {Number(p.price_per_match).toFixed(0)} €/match</span>
                  )}
                </div>
              </div>
            ))}
          </div>
        )}
        <div style={{ height: 20 }}/>
      </div>

      {pick && !loading && (
        <div className="action-bar">
          <div className="action-bar-summary">
            <span className="lbl">Formule choisie</span>
            <b className="val">{Number(pick.price).toFixed(0)} €</b>
          </div>
          <button className="btn-primary" onClick={next}>Continuer</button>
        </div>
      )}
    </div>
  );
};

// ── 26 — Paiement abonnement ─────────────────────────────────
const ScrAboPay = () => {
  const { goTo, appState } = useCtx2();
  const plan = appState.selectedPlan || {};

  const [installments, setInstallments] = u2(4);
  const [step,         setStep]         = u2('pick'); // 'pick' | 'stripe'
  const [loading,      setLoading]      = u2(false);
  const [err,          setErr]          = u2(null);
  const [payData,      setPayData]      = u2(null); // response from API.subscribe

  const stripeRef   = ur2(null);
  const elementsRef = ur2(null);
  const mountRef    = ur2(null);

  async function proceedToStripe() {
    if (!window.__stripeKey) {
      setErr("Clé Stripe non chargée. Rechargez la page.");
      return;
    }
    setLoading(true); setErr(null);
    try {
      const d = await API.subscribe(plan.id, installments);
      setPayData(d);
      stripeRef.current   = Stripe(window.__stripeKey);
      elementsRef.current = stripeRef.current.elements({
        clientSecret: d.client_secret,
        appearance: {
          theme: 'flat',
          variables: { colorPrimary: getComputedStyle(document.documentElement).getPropertyValue('--navy').trim() || '#001f5c' },
        },
      });
      setStep('stripe');
    } catch (ex) {
      setErr(ex.message || 'Erreur lors de la création du paiement');
    } finally {
      setLoading(false);
    }
  }

  ue2(() => {
    if (step !== 'stripe' || !elementsRef.current || !mountRef.current) return;
    const pe = elementsRef.current.create('payment');
    pe.mount(mountRef.current);
    return () => { try { pe.unmount(); } catch(_) {} };
  }, [step]);

  async function pay() {
    if (!stripeRef.current || !elementsRef.current) return;
    setLoading(true); setErr(null);
    try {
      const { error } = await stripeRef.current.confirmPayment({
        elements: elementsRef.current,
        redirect: 'if_required',
      });
      if (error) { setErr(error.message); setLoading(false); return; }
      goTo('wallet');
    } catch (ex) {
      setErr(ex.message || 'Erreur de paiement');
      setLoading(false);
    }
  }

  // Montant aujourd'hui (en €)
  const todayAmount = payData
    ? (payData.installment_amount ?? payData.total ?? 0)
    : (plan.price ? (installments === 4 ? Math.ceil(plan.price / 4 * 100) / 100 : plan.price) : 0);
  const fmtEur = v => Number(v).toFixed(2).replace('.', ',') + ' €';

  // Calendrier de paiement (affiché avant l'appel API)
  const today = new Date();
  const months = Array.from({ length: installments }, (_, i) => {
    const d = new Date(today);
    d.setMonth(d.getMonth() + i);
    return d.getDate() + ' ' + API.FR_MONTHS_SHORT[d.getMonth()] + ' ' + d.getFullYear();
  });

  return (
    <div className="scr" data-screen-label="26 Abonnement · paiement">
      <BackBar/>
      <Steps step={3} total={3} label="Paiement"/>
      <div className="body">
        <div className="page-title">
          <h1>Comment veux-tu payer&nbsp;?</h1>
          <p>{plan.name || 'Abonnement'}{plan.description ? ' · ' + plan.description : ''}</p>
        </div>

        {step === 'pick' ? (
          <>
            <div className="formula-list" style={{ paddingTop: 8 }}>
              <div className={`formula${installments === 4 ? ' on' : ''}`} onClick={() => setInstallments(4)}>
                <div className="formula-name">En 4 fois sans frais</div>
                <div className="formula-desc">Étale ton abonnement sur 4 mensualités.</div>
              </div>
              <div className={`formula${installments === 1 ? ' on' : ''}`} onClick={() => setInstallments(1)}>
                <div className="formula-name">Tout payer maintenant</div>
                <div className="formula-desc">
                  {plan.price ? fmtEur(plan.price) : '—'} prélevés aujourd'hui.
                </div>
              </div>
            </div>

            {installments === 4 && plan.price && (
              <div className="pay-plan">
                <div className="pay-plan-title">
                  <b>Calendrier de paiement</b>
                  <span style={{ fontSize: 13, color: "var(--ink-2)" }}>
                    4 × {fmtEur(todayAmount)}
                  </span>
                </div>
                {months.map((m, i) => (
                  <div key={i} className={`pay-plan-row${i === 0 ? ' first' : ''}`}>
                    <div>
                      <b>{i === 0 ? "Aujourd'hui" : (i + 1) + "ᵉ versement"}</b>
                      <div className="when" style={{ fontSize: 12 }}>{m}</div>
                    </div>
                    {i === 0
                      ? <b>{fmtEur(todayAmount)}</b>
                      : <span>{fmtEur(todayAmount)}</span>}
                  </div>
                ))}
              </div>
            )}

            <div className="help-banner" style={{ marginTop: 18 }}>
              <div className="help-banner-icon"><Ic name="lock" size={20}/></div>
              <div className="help-banner-text">
                <b>Sans frais, 100 % sécurisé</b>
                Le 4× sans frais est offert par le club. Tu peux annuler sous 14 jours.
              </div>
            </div>
            <ErrMsg msg={err}/>
            <div style={{ height: 20 }}/>
          </>
        ) : (
          <>
            <div ref={mountRef} style={{ marginTop: 16, minHeight: 200 }}/>
            <ErrMsg msg={err}/>
            <div style={{ height: 20 }}/>
          </>
        )}
      </div>

      <div className="action-bar">
        <div className="action-bar-summary">
          <span className="lbl">Aujourd'hui</span>
          <b className="val">{fmtEur(todayAmount)}</b>
        </div>
        {step === 'pick' ? (
          <button className="btn-primary" onClick={proceedToStripe} disabled={loading || !plan.id}>
            <Ic name="lock" size={18}/>
            {loading ? 'Chargement…' : 'Passer au paiement'}
          </button>
        ) : (
          <button className="btn-primary" onClick={pay} disabled={loading}>
            <Ic name="lock" size={18}/>
            {loading ? 'Traitement…' : `Payer ${fmtEur(todayAmount)}`}
          </button>
        )}
      </div>
    </div>
  );
};

window.SimpleScreens2 = {
  ScrWelcome, ScrSignup, ScrLogin, ScrPwdReset,
  ScrErrPayment, ScrSessionExpired, ScrErrSoldOut, ScrOfflineTicket,
  ScrLockscreen, ScrEmail,
  ScrPMR, ScrGroup, ScrAboPick, ScrAboPay,
};