// FOOTPASS v2 · TUNNEL DE CRÉATION DE STRUCTURE · partie 2 : paiement, équipe, espaces, activation, shell
// Audit P0-4→P0-6 : écran de paiement digne de confiance, invitation = activation (cascade B2B2C),
// checklist d'activation + aha moment. Annuel ancré honnêtement · le mensuel reste toujours visible.
const { useState: useStateSt2, useEffect: useEffectSt2 } = React;

// Petit glyphe d'échange (bascule « qui paie »)
const SttSwapIc = () => (<svg className="stt-swap" width="10" height="10" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M2.5 6h11L11 3.5M13.5 10h-11L5 12.5"></path></svg>);

// Dates d'essai dérivées du calendrier canonique de l'app (juin 2026)
function sttTrialDates() {
  const d0 = (window.FP_CAL && window.FP_CAL.todayD) || 18;
  const day = (n) => (d0 + n > 30 ? { d: d0 + n - 30, m: 'juillet' } : { d: d0 + n, m: 'juin' });
  return { j7: day(7), j10: day(10) };
}

// ═══ Étape 4 · PAIEMENT ANNUEL ═══
function SttPay({ d, up, tier, staff, paid }) {
  const { j7, j10 } = sttTrialDates();
  const extra = Math.max(0, staff - tier.inc);
  return (
    <React.Fragment>
      <span className="stt-kick">{sttTX('PAIEMENT ANNUEL')}</span>
      <h1 className="stt-h1">{paid ? sttTX('Essai activé.') : sttTX('Un abonnement clair. Zéro surprise.')}</h1>
      <p className="stt-sub">{sttTX('Un seul abonnement par structure. Il couvre ') + tier.inc + sttTX(' sièges staff · vos talents ne figurent jamais sur cette facture.')}</p>
      <div className="stt-paycard">
        <div className="stt-reco-k"><span>{tier.id.toUpperCase()} · {sttTX('STAFF')} {tier.staff}</span><em>{staff} {sttTX('staff estimé')}</em></div>
        <div className="stt-price">{sttCHF(tier.p)} <small>CHF/an · ≈ {sttMois(tier)} CHF/mois</small></div>
        <div className="stt-reco-rows">
          <div className="stt-reco-row"><span>{sttTX('Structure')}</span><b>{d.name}</b></div>
          <div className="stt-reco-row"><span>{sttTX('Sièges staff inclus')}</span><b>{tier.inc}</b></div>
          {extra > 0 ? <div className="stt-reco-row"><span>{sttTX('Sièges à activer ensuite (estimation)')}</span><b>{extra}</b></div> : null}
          <div className="stt-reco-row"><span>{sttTX('Résiliation')}</span><b>{sttTX('jusqu\u2019à 30 j avant l\u2019échéance')}</b></div>
        </div>
        {tier.direct ? (
          <div className="stt-tl">
            <div className="stt-tl-step"><b>{sttTX('Aujourd\u2019hui')}</b><em>{sttTX('0 CHF · tout est débloqué')}</em></div>
            <div className="stt-tl-step dim"><b>{j7.d} {sttTX(j7.m)}</b><em>{sttTX('Rappel avant débit')}</em></div>
            <div className="stt-tl-step dim"><b>{j10.d} {sttTX(j10.m)}</b><em>{sttTX('Premier débit · ou rien, si vous partez')}</em></div>
          </div>
        ) : null}
      </div>
      <div className="stt-lbl">{sttTX('Sièges supplémentaires')}<em>{sttTX('au-delà des ') + tier.inc + sttTX(' inclus')}</em></div>
      <div className="stt-segctl">
        <button className={`stt-segopt ${d.seatsBilling === 'an' ? 'on' : ''}`} onClick={() => up({ seatsBilling: 'an' })}>
          <b>{sttTX('Annuel · 239,99 CHF')}</b>
          <em>{sttTX('12 × 19,99 · prix lié, sans surprise')}</em>
        </button>
        <button className={`stt-segopt ${d.seatsBilling === 'mois' ? 'on' : ''}`} onClick={() => up({ seatsBilling: 'mois' })}>
          <b>{sttTX('Mensuel · 19,99 CHF')}</b>
          <em>{sttTX('sans engagement, au mois')}</em>
        </button>
      </div>
      <p className="stt-note">{sttTX('Facturés uniquement à l\u2019activation de chaque siège. Modifiable à tout moment · le mensuel reste toujours disponible.')}</p>
      {tier.direct ? (
        <React.Fragment>
          <div className="stt-lbl">{sttTX('Moyen de paiement')}</div>
          <div className="stt-segctl">
            <button className={`stt-segopt ${d.pay === 'apple' ? 'on' : ''}`} onClick={() => up({ pay: 'apple' })}><b>Apple&nbsp;Pay</b><em>{sttTX('Face ID au moment du débit')}</em></button>
            <button className={`stt-segopt ${d.pay === 'card' ? 'on' : ''}`} onClick={() => up({ pay: 'card' })}><b>{sttTX('Carte')}</b><em>Visa •••• 4242</em></button>
          </div>
        </React.Fragment>
      ) : (
        <div className="stt-paycard" style={{ marginTop: 18 }}>
          <div className="stt-reco-k"><span>{sttTX('ACTIVATION SUR DEMANDE')}</span></div>
          <p className="stt-sub" style={{ marginTop: 8 }}>{sttTX('Dès 5 000 CHF/an, l\u2019activation se fait avec notre équipe : votre demande part par e-mail, réponse sous 24 h. Aucune carte aujourd\u2019hui · rien pendant la vérification.')}</p>
        </div>
      )}
      <div className="stt-trust">
        <span><SttIco.Shield /> {sttTX('Hébergé en Suisse')}</span>
        <span><SttIco.Lock s={11} /> {sttTX('AES-256')}</span>
        <span><SttIco.Check s={11} /> {sttTX('Paiement Stripe')}</span>
      </div>
    </React.Fragment>
  );
}

// ═══ Étape 5 · ÉQUIPE · l'invitation est l'activation ═══
const STT_STAFF_SUGG = ['sira', 'amadou', 'marco', 'karim', 'david'];
const STT_TALENT_SUGG = ['lucas', 'mathis'];
function SttTeam({ d, up, showToast }) {
  const cfg = sttCfg(d.type);
  const peers = window.FP_PEERS || {};
  const [q, setQ] = useStateSt2('');
  const n = d.team.length + d.talents.length;
  const slug = ((d.name || '').toUpperCase().replace(/[^A-Z]/g, '').slice(0, 4)) || 'FTPS';
  const copy = (s) => {
    try { if (navigator.clipboard) navigator.clipboard.writeText(s); } catch (e) { /* ignore */ }
    showToast && showToast(sttTX('Lien copié · usage unique, 72 h'));
  };
  const cyclePole = (m) => {
    const i = cfg.poles.indexOf(m.pole);
    up({ team: d.team.map((x) => (x.id === m.id ? { ...x, pole: cfg.poles[(i + 1) % cfg.poles.length] } : x)) });
  };
  const setStaff = (id, patch) => up({ team: d.team.map((x) => (x.id === id ? { ...x, ...patch } : x)) });
  const addStaff = (p) => up({ team: [...d.team, { id: p.id, name: p.name, sub: p.role, photo: p.photo, pole: STT_ROLE_POLE[p.role] || 'Direction', selfPaid: false }] });
  const addByMail = () => {
    if (!q.trim() || !q.includes('@')) return;
    up({ team: [...d.team, { id: 'm' + Date.now(), name: q.trim(), sub: sttTX('Invitation e-mail'), pole: 'Direction', selfPaid: false }] });
    setQ('');
  };
  // Le petit plus · chercher dans TOUS les contacts vérifiés FOOTPASS (joueur → talents, sinon staff)
  const hits = q.trim() && !q.includes('@')
    ? Object.values(peers).filter((p) => !d.team.some((m) => m.id === p.id) && !d.talents.some((m) => m.id === p.id) && (p.name + ' ' + p.role + ' ' + (p.org || '')).toLowerCase().includes(q.trim().toLowerCase())).slice(0, 3)
    : [];
  const addHit = (p) => { (p.role === 'Joueur' ? addTalent : addStaff)(p); setQ(''); };
  const addTalent = (p) => up({ talents: [...d.talents, { id: p.id, name: p.name, sub: p.role + ' · ' + p.org, photo: p.photo, pass: d.type === 'Académie' ? 'start' : 'pro', covered: false }] });
  const setTalent = (id, patch) => up({ talents: d.talents.map((x) => (x.id === id ? { ...x, ...patch } : x)) });
  const av = (m) => (m.photo ? <img className="stt-av" src={m.photo} alt="" /> : <span className="stt-av txt">{sttInit(m.name)}</span>);
  return (
    <React.Fragment>
      <span className="stt-kick">{sttTX('VOTRE ÉQUIPE')}</span>
      <h1 className="stt-h1">{sttTX('Faites entrer votre équipe.')}</h1>
      <p className="stt-sub">{sttTX('Un siège pour chaque staff · pris en charge par ') + (d.name || sttTX('la structure')) + sttTX(' ou à la charge de la personne, vous choisissez. Vos talents paient leur propre Pass.')}</p>
      <div className="stt-count"><b>{n}</b><span>{n >= 3 ? sttTX('invitations prêtes · votre cascade est lancée.') : sttTX('invitation(s) prête(s) · l\u2019activation démarre à 3.')}</span></div>
      <div className="stt-lbl">{sttTX('Staff')}<em>{sttTX('vous choisissez qui paie')}</em></div>
      {d.team.length ? (
        <React.Fragment>
          <div style={{ marginBottom: 8 }}>
          {d.team.map((m) => (
            <div key={m.id} className="stt-mem">
              {av(m)}
              <span className="stt-mem-txt"><b>{m.name}</b><button className="stt-polechip" onClick={() => cyclePole(m)}>{sttTX('Pôle ')}{sttTX(m.pole).toUpperCase()} ›</button></span>
              <button className={`stt-passbadge as-toggle ${m.selfPaid ? 'self' : ''}`} onClick={() => setStaff(m.id, { selfPaid: !m.selfPaid })} aria-label={sttTX('Choisir qui paie ce siège')}>
                <span className="stt-pb-top">{m.selfPaid ? sttTX('La personne') : sttTX('Structure')}<SttSwapIc /></span>
                <em>{m.selfPaid ? sttTX('Pass lié · 0 CHF pour vous') : sttTX('siège pris en charge')}</em>
              </button>
              <button className="stt-x" onClick={() => up({ team: d.team.filter((x) => x.id !== m.id) })} aria-label={sttTX('Retirer')}><SttIco.X /></button>
            </div>
          ))}
          </div>
          <p className="stt-note" style={{ margin: '0 0 6px' }}>{sttTX('Touchez « Structure / La personne » pour choisir qui paie chaque siège · décidé ici, à l\u2019invitation.')}</p>
        </React.Fragment>
      ) : null}
      {STT_STAFF_SUGG.filter((id) => peers[id] && !d.team.some((m) => m.id === id)).slice(0, d.team.length ? 2 : 3).map((id) => {
        const p = peers[id];
        return (
          <button key={id} className="stt-sug" onClick={() => addStaff(p)}>
            {p.photo ? <img className="stt-av" src={p.photo} alt="" /> : <span className="stt-av txt">{p.initials}</span>}
            <span className="stt-sug-txt"><b>{p.name}</b><em>{sttTX(p.role)} · {sttTX('contact vérifié')}</em></span>
            <span className="stt-sug-plus"><SttIco.Plus /></span>
          </button>
        );
      })}
      <div style={{ display: 'flex', gap: 8, marginTop: 10 }}>
        <input className="stt-input" style={{ flex: 1, height: 44 }} value={q} placeholder={sttTX('+ Chercher vos 408 contacts · ou e-mail…')} onChange={(e) => setQ(e.target.value)} />
        {q.includes('@') ? <button className="stt-cta" style={{ width: 92, height: 44, marginTop: 0 }} onClick={addByMail}>{sttTX('Inviter')}</button> : null}
      </div>
      {hits.length ? (
        <div style={{ marginTop: 7 }}>
          {hits.map((p) => (
            <button key={p.id} className="stt-sug" onClick={() => addHit(p)}>
              {p.photo ? <img className="stt-av" src={p.photo} alt="" /> : <span className="stt-av txt">{p.initials}</span>}
              <span className="stt-sug-txt"><b>{p.name}</b><em>{sttTX(p.role)}{p.org ? ' · ' + p.org : ''} · {p.role === 'Joueur' ? sttTX('rejoint vos talents') : sttTX('rejoint votre staff')}</em></span>
              <span className="stt-sug-plus"><SttIco.Plus /></span>
            </button>
          ))}
        </div>
      ) : (q.trim() && !q.includes('@') ? <p className="stt-note">{sttTX('Aucun contact · continuez pour inviter par e-mail, ou utilisez le lien ci-dessous.')}</p> : null)}
      <div className="stt-lbl" style={{ marginTop: 22 }}>{sttTX(cfg.talents)}<em>{sttTX('paient eux-mêmes')}</em></div>
      {d.talents.length ? (
        <div style={{ marginBottom: 10 }}>
          {d.talents.map((m) => (
            <div key={m.id} className="stt-mem">
              {av(m)}
              <span className="stt-mem-txt">
                <b>{m.name}</b>
                <span className="stt-passpick">
                  <button className={m.pass === 'pro' ? 'on' : ''} onClick={() => setTalent(m.id, { pass: 'pro' })}>{sttTX('PRO lié · 19,99')}</button>
                  <button className={m.pass === 'start' ? 'on' : ''} onClick={() => setTalent(m.id, { pass: 'start' })}>{sttTX('START · 9,99')}</button>
                  <button className={m.covered ? 'on' : ''} onClick={() => setTalent(m.id, { covered: !m.covered })}>{m.covered ? sttTX('Offert ✓') : sttTX('Offrir')}</button>
                </span>
              </span>
              <span className="stt-passbadge">{m.covered ? sttTX('Pris en charge') : sttTX('Paie son Pass')}<em>{m.covered ? sttTX('par votre structure') : sttTX('0 CHF pour vous')}</em></span>
              <button className="stt-x" onClick={() => up({ talents: d.talents.filter((x) => x.id !== m.id) })} aria-label={sttTX('Retirer')}><SttIco.X /></button>
            </div>
          ))}
        </div>
      ) : null}
      {STT_TALENT_SUGG.filter((id) => peers[id] && !d.talents.some((m) => m.id === id)).map((id) => {
        const p = peers[id];
        return (
          <button key={id} className="stt-sug" onClick={() => addTalent(p)}>
            <img className="stt-av" src={p.photo} alt="" />
            <span className="stt-sug-txt"><b>{p.name}</b><em>{sttTX(p.role)} · {p.org}</em></span>
            <span className="stt-sug-plus"><SttIco.Plus /></span>
          </button>
        );
      })}
      <p className="stt-note">{sttTX('La prise en charge d\u2019un Pass est une option, jamais une obligation. Vous pourrez inviter le reste de l\u2019équipe depuis votre hub.')}</p>
      <div className="stt-lbl" style={{ marginTop: 22 }}>{sttTX('Hors FOOTPASS')}<em>{sttTX('par lien d’invitation')}</em></div>
      <div className="stt-inv">
        <span className="stt-sug-txt"><b>{sttTX('Staff · siège structure')}</b><em>footpass.app/s/{slug}-STAFF-2201</em></span>
        <button className="stt-logobtn" onClick={() => copy(`footpass.app/s/${slug}-STAFF-2201`)}>{sttTX('Copier')}</button>
      </div>
      <div className="stt-inv">
        <span className="stt-sug-txt"><b>{sttTX('Joueurs & membres · Pass lié 19,99')}</b><em>footpass.app/m/{slug}-8102</em></span>
        <button className="stt-logobtn" onClick={() => copy(`footpass.app/m/${slug}-8102`)}>{sttTX('Copier')}</button>
      </div>
      <p className="stt-note">{sttTX('À partager par WhatsApp, SMS ou e-mail · codes personnels à usage unique, valables 72 h. Chaque arrivée rejoint votre structure vérifiée.')}</p>
    </React.Fragment>
  );
}

// ═══ Étape 6 · ESPACES · jamais une page blanche ═══
function sttDefaultSpaces(d) {
  const cfg = sttCfg(d.type);
  return [
    { ic: 'Room', n: 'Room principale', s: 'Toute votre structure', on: true, lock: true },
    { ic: 'Lock', n: 'Noyau privé', s: 'Cercle de direction', on: true },
    ...cfg.poles.slice(1).map((p) => ({ ic: 'Pole', n: sttTX('Pôle ') + sttTX(p), s: 'Espace de travail dédié', on: true })),
    { ic: 'Users', n: 'Sous-rooms par talent', s: 'Créées à chaque arrivée', on: true },
    { ic: 'Vault', n: 'Coffre-fort de structure', s: 'Hébergé en Suisse · AES-256', on: true, lock: true },
  ];
}
function SttSpaces({ d, up }) {
  const cfg = sttCfg(d.type);
  const sp = d.spaces;
  const toggle = (i) => up({ spaces: sp.map((x, j) => (j === i && !x.lock ? { ...x, on: !x.on } : x)) });
  const addPole = (p) => up({ spaces: [...sp.slice(0, -1), { ic: 'Pole', n: sttTX('Pôle ') + sttTX(p), s: 'Espace de travail dédié', on: true }, sp[sp.length - 1]] });
  const left = cfg.more.filter((p) => !sp.some((x) => x.n === sttTX('Pôle ') + sttTX(p)));
  return (
    <React.Fragment>
      <span className="stt-kick">{sttTX('VOS ESPACES')}</span>
      <h1 className="stt-h1">{sttTX('Réservez vos espaces.')}</h1>
      <p className="stt-sub">{sttTX('Rooms, mur et espaces arrivent dans la prochaine version · inclus dans votre palier, sans supplément. Configurez-les maintenant : tout sera prêt au lancement.')}</p>
      <div style={{ marginTop: 16 }}>
        {sp.map((x, i) => {
          const I = SttIco[x.ic];
          return (
            <button key={x.n} className={`stt-sw ${x.on ? 'on' : 'off'}`} disabled={!!x.lock} onClick={() => toggle(i)}>
              <span className={`stt-sp-ic ${x.lock ? 'acc' : ''}`}><I /></span>
              <span className="stt-sug-txt"><b>{sttTX(x.n)}</b><em>{sttTX(x.s)}</em></span>
              {x.lock ? <span className="stt-lock">{sttTX('INCLUS')}</span> : <span className="stt-tgl"></span>}
            </button>
          );
        })}
      </div>
      {left.length ? (
        <React.Fragment>
          <div className="stt-lbl">{sttTX('Ajouter un pôle')}</div>
          <div className="stt-chips">
            {left.map((p) => <button key={p} className="stt-chip" onClick={() => addPole(p)}>+ {sttTX(p)}</button>)}
          </div>
        </React.Fragment>
      ) : null}
      <div className="stt-hier"><b>{sttTX('Hiérarchie type')}</b> · {cfg.hier.map((h) => sttTX(h)).join(' → ')}. {sttTX('Vous poserez les accès personne par personne dans votre hub.')}</div>
    </React.Fragment>
  );
}

// ═══ Étape 7 · EN LIGNE · checklist d'activation, récompense légitime ═══
function SttLive({ d, tier, staff }) {
  const { j10 } = sttTrialDates();
  const n = d.team.length + d.talents.length;
  const checks = [
    { ok: true, b: sttTX('Structure créée'), e: sttTX('Vérification en cours · registre ou statuts pourront être demandés') },
    { ok: true, b: sttTX('Palier ') + tier.id, e: sttCHF(tier.p) + sttTX(' CHF/an · ') + tier.inc + sttTX(' sièges inclus') },
    tier.direct ? { ok: true, b: sttTX('Essai activé · 0 CHF aujourd\u2019hui'), e: sttTX('Premier débit le ') + j10.d + ' ' + sttTX(j10.m) } : { ok: true, b: sttTX('Demande envoyée'), e: sttTX('Réponse sous 24 h · tout fonctionne en attendant') },
    n >= 3 ? { ok: true, b: n + sttTX(' membres invités'), e: sttTX('Votre cascade est lancée') } : { ok: false, b: sttTX('Invitez 3 membres'), e: n + sttTX('/3 · depuis votre hub, quand vous voulez') },
  ];
  return (
    <div className="stt-final">
      <div className="stt-fplq">
        <span className="stt-fbrand">FOOTPASS® · STRUCTURE</span>
        <SttMono d={d} />
        <b>{d.name}</b>
        <em>{sttTX(d.type)} · {sttTX(d.country)} · {staff} {sttTX('staff')}</em>
        <span className="stt-tierbadge">{tier.id.toUpperCase()} · {sttTX('VÉRIFICATION EN COURS')}</span>
      </div>
      <div className="stt-online">{sttTX('Votre structure est en ligne.')}</div>
      <p className="stt-online-sub">{sttTX('Vous avez construit votre tour de contrôle. Tout fonctionne dès maintenant, pendant la vérification.')}</p>
      <div className="stt-checks">
        {checks.map((c, i) => (
          <div key={i} className={`stt-chk ${c.ok ? '' : 'todo'}`} style={{ animationDelay: `${180 + i * 140}ms` }}>
            <span className="stt-chk-ic">{c.ok ? <SttIco.Check /> : <SttIco.Plus s={11} />}</span>
            <span className="stt-chk-txt"><b>{c.b}</b><em>{c.e}</em></span>
          </div>
        ))}
      </div>
    </div>
  );
}

// ═══ SHELL · le tunnel (6 étapes · Rooms & espaces : prochaine version, cf. SttSpaces gardé pour plus tard) ═══
const STT_KICKS = ['IDENTITÉ', 'DIMENSIONNEMENT', 'APERÇU', 'PAIEMENT', 'ÉQUIPE', 'EN LIGNE'];
function StructureTunnel({ dark, onClose, showToast, onOpenSub }) {
  const [step, setStepRaw] = useStateSt2(0);
  const [dir, setDir] = useStateSt2('fwd');
  const [proc, setProc] = useStateSt2(false);
  const [d, setD] = useStateSt2({ type: 'Agence', name: '', country: 'Suisse', color: '#00A37E', logo: null, calc: null, ex: null, seatsBilling: 'an', pay: 'apple', team: [], talents: [], spaces: null, paid: false });
  const up = (patch) => setD((prev) => ({ ...prev, ...patch }));
  const setStep = (n) => { setDir(n < step ? 'back' : 'fwd'); setStepRaw(n); };
  // Calculateur : défauts matérialisés par type (réinitialisés quand le type change)
  const cfg = sttCfg(d.type);
  const dd = { ...d, calc: d.calc || Object.fromEntries(cfg.rows.map((r) => [r.k, r.d])), ex: d.ex == null ? cfg.ex.d : d.ex, spaces: d.spaces };
  const staff = cfg.rows.reduce((s, r) => s + (dd.calc[r.k] || 0), 0);
  const tier = sttTierFor(Math.max(1, staff));
  const nInv = d.team.length + d.talents.length;

  const persist = (kindDone) => {
    if (!window.fpSetStructure) return;
    window.fpSetStructure({
      name: d.name.trim(), type: d.type, kind: tier.direct ? 'created' : 'request', role: 'Admin',
      tier: tier.id, country: d.country, color: d.color, logo: d.logo || null, staff, seatsBilling: d.seatsBilling,
      team: d.team.map((m) => ({ name: m.name, pole: m.pole, kind: 'staff', selfPaid: !!m.selfPaid })).concat(d.talents.map((m) => ({ name: m.name, pass: m.pass, covered: m.covered, kind: 'talent' }))),
    });
  };
  const doPay = () => {
    if (proc) return;
    setProc(true);
    setTimeout(() => {
      setProc(false);
      up({ paid: true });
      persist();
      const { j10 } = sttTrialDates();
      showToast && showToast(tier.direct ? sttTX('Essai activé · premier débit le ') + j10.d + ' ' + sttTX(j10.m) : sttTX('Demande envoyée · réponse sous 24 h'));
      setStep(4);
    }, 1000);
  };
  const finish = (dest) => {
    persist();
    onClose();
    if (dest === 'passid') { onOpenSub && onOpenSub('passid'); return; }
    setTimeout(() => window.dispatchEvent(new CustomEvent('fp:growth', { detail: { kind: 'sheet', sheet: 'structure', mode: 'manage' } })), 120);
  };

  const cta = (() => {
    switch (step) {
      case 0: return { label: sttTX('Continuer'), off: !d.name.trim(), on: () => setStep(1), hint: sttTX('Aucun engagement à cette étape · le prix se calcule à la suivante.') };
      case 1: return { label: sttTX('Continuer · palier ') + tier.id, on: () => setStep(2), pre: (<div className="stt-livebar"><b>{tier.id} · {sttCHF(tier.p)} CHF/an</b><span>≈ {sttMois(tier)} CHF/mois · {tier.inc} {sttTX('sièges inclus')} · {staff} {sttTX('staff')}</span></div>), hint: tier.direct ? sttTX('Essai 10 jours · 0 CHF aujourd\u2019hui · remboursement intégral si la vérification échoue.') : sttTX('Dès 5 000 CHF/an : activation avec notre équipe, sous 24 h.') };
      case 2: return { label: sttTX('Continuer'), on: () => setStep(3), hint: sttTX('Étape suivante : votre essai · 0 CHF aujourd\u2019hui.') };
      case 3: return d.paid
        ? { label: sttTX('Continuer'), on: () => setStep(4), hint: sttTX('Essai activé · construisez votre équipe.') }
        : { label: proc ? '' : tier.direct ? sttTX('Démarrer l\u2019essai · 0 CHF aujourd\u2019hui') : sttTX('Envoyer la demande · 0 CHF'), spin: proc, on: doPay, hint: sttTX('Résiliable jusqu\u2019à 30 j avant l\u2019échéance · un seul abonnement par structure.') };
      case 4: return { label: nInv > 0 ? sttTX('Envoyer ') + nInv + sttTX(nInv > 1 ? ' invitations' : ' invitation') : sttTX('Continuer sans inviter'), on: () => { if (nInv > 0 && showToast) showToast(sttTX('Invitations envoyées · codes à usage unique')); persist(); setStep(5); }, hint: sttTX('Codes à usage unique · expirent après 72 h.') };
      default: return { label: sttTX('Ouvrir mon QG'), on: () => finish('manage'), ghost: { label: sttTX('Voir mon Pass ID'), on: () => finish('passid') } };
    }
  })();

  useEffectSt2(() => { /* étape Espaces retirée du tunnel · reviendra avec les Rooms (prochaine version) */ }, [step]);

  const body = (() => {
    switch (step) {
      case 0: return <SttIdentity d={dd} up={up} />;
      case 1: return <SttCalc d={dd} up={up} />;
      case 2: return <SttPreview d={dd} />;
      case 3: return <SttPay d={dd} up={up} tier={tier} staff={staff} paid={d.paid} />;
      case 4: return <SttTeam d={dd} up={up} showToast={showToast} />;
      default: return <SttLive d={dd} tier={tier} staff={staff} />;
    }
  })();

  return (
    <div className="stt" data-screen-label={`Tunnel structure · ${STT_KICKS[step]}`}>
      {window.FPStatusBar ? <FPStatusBar light={dark} /> : null}
      <div className="stt-nav">
        <button className="stt-back" onClick={() => (step === 0 ? onClose() : setStep(step - 1))} aria-label={sttTX('Retour')}><SttIco.Chev /></button>
        <div className="stt-segs">{STT_KICKS.map((k, i) => <span key={k} className={`stt-seg ${i <= step ? 'on' : ''}`}></span>)}</div>
        <span className="stt-stepno">{step + 1}/6 · {sttTX(STT_KICKS[step])}</span>
      </div>
      <div className="stt-body"><div key={step} className={`stt-step ${dir === 'back' ? 'backward' : ''}`}>{body}</div></div>
      <div className="stt-foot">
        {cta.pre || null}
        <button className={`stt-cta ${cta.off ? 'off' : ''}`} onClick={cta.on}>{cta.spin ? <span className="stt-spin"></span> : cta.label}</button>
        {cta.ghost ? <button className="stt-cta ghost" onClick={cta.ghost.on}>{cta.ghost.label}</button> : null}
        {cta.hint ? <p className="stt-fhint">{cta.hint}</p> : null}
      </div>
    </div>
  );
}

Object.assign(window, { StructureTunnel, SttPay, SttTeam, SttSpaces, SttLive, sttDefaultSpaces });