// FOOTPASS v2 · STRUCTURE · tenir la promesse de l'inscription (« la structure, on la rajoute après »)
// Carte Accueil « Votre structure » : créer sa structure ou la rejoindre via invitation.
// Typologie (recherche Juil. 2026) : 1 type par rôle qui crée · Agent→Agence · Joueur/Dirigeant→Club ·
// Entraîneur→Académie · Juriste/kiné→Cabinet · Recruteur→Scouting · Médias→Média ·
// Bénévoles→Association · Arbitre/officiels→Instance.
// Facturation = PALIERS STRUCTURELS (doc de référence) : 6 paliers selon le STAFF PERMANENT uniquement
// (les joueurs ne comptent JAMAIS) ; Small/Medium en self-serve, dès Confirmed sur demande (e-mail, 24 h).
// Après création : liens d'invitation immédiats (staff = siège structure · membres = Pass lié 19,99) · moteur B2B2C.
const { useState: useStateSt, useEffect: useEffectSt } = React;

const stTX = (s) => (typeof TX === 'function' ? TX(s) : s);
const stTpl = (key, name) => stTX(key).split('{name}').join(name);
const ST_KEY = 'fp_structure';
const ST_HIDE_KEY = 'fp_structure_hide';
const ST_JOIN_LINK = 'footpass.app/s/CLSC-8841-220-4';
// Démo « rejoindre » : l'agence d'Amadou et Sira, déjà dans les contacts vérifiés
const ST_JOIN_ORG = { name: 'Classico Sport', type: 'Agence', by: 'Amadou Mbaye', byRole: 'Agent' };

// ── Typologie des structures · couvre chaque rôle du Pass ID ──
const ST_TYPES = [
  { t: 'Agence', hint: 'Représentation de joueurs', demo: 'Riviera Talents' },
  { t: 'Club', hint: 'Pro ou amateur', demo: 'FC Léman' },
  { t: 'Académie', hint: 'Formation, école de foot', demo: 'Académie Horizon' },
  { t: 'Cabinet', hint: 'Droit du sport, conseil, santé', demo: 'Bernard & Associés' },
  { t: 'Scouting', hint: 'Cellule de détection indépendante', demo: 'Vista Scouting' },
  { t: 'Média', hint: 'Presse, vidéo, podcast', demo: 'Canal Vestiaire' },
  { t: 'Association', hint: 'Foot local, bénévoles', demo: 'AS Plainpalais' },
  { t: 'Fédération', hint: 'Ligue, district, instance officielle', demo: 'Ligue du Léman' },
  { t: 'Autre', hint: 'Coach indépendant, expert, autre activité', demo: 'Studio Onze' },
];
const stTypeOf = (t) => ST_TYPES.find((x) => x.t === t) || ST_TYPES[0];

// ── 6 paliers structurels · déterminés UNIQUEMENT par le staff permanent ──
// Sous 5 000 CHF/an (Small→Confirmed) : paiement direct, puis vérification · remboursement intégral si refus.
// Dès 5 000 CHF (Established+) : sur demande, activation avec l'équipe sous 24 h.
const ST_TIERS = [
  { id: 'Small', staff: '1–5', price: '499,99', inc: 2, direct: true },
  { id: 'Medium', staff: '6–15', price: '1 199,99', inc: 2, direct: true },
  { id: 'Confirmed', staff: '16–30', price: '3 990', inc: 5, direct: true },
  { id: 'Established', staff: '31–50', price: '7 990', inc: 5 },
  { id: 'Large', staff: '51–70', price: '15 990', inc: 10 },
  { id: 'Very Large', staff: '70+', price: '19 990', inc: 10 },
];

function fpGetStructure() {
  try { const v = JSON.parse(localStorage.getItem(ST_KEY) || 'null'); return v && v.name ? v : null; } catch (e) { return null; }
}
function fpSetStructure(st) {
  try {
    if (st) {
      localStorage.setItem(ST_KEY, JSON.stringify(st));
      // Audit P1-5 · multi-structure : la liste complète vit dans fp_structures, fp_structure = l'active
      const ls = (JSON.parse(localStorage.getItem('fp_structures') || '[]') || []).filter((x) => x && x.name !== st.name);
      ls.unshift(st);
      localStorage.setItem('fp_structures', JSON.stringify(ls.slice(0, 4)));
    } else localStorage.removeItem(ST_KEY);
  } catch (e) { /* ignore */ }
  if (window.FP_ME) window.FP_ME.org = st ? st.name : null;
  window.dispatchEvent(new CustomEvent('fp:growth', { detail: { kind: 'structure' } }));
}
function fpListStructures() {
  try { return (JSON.parse(localStorage.getItem('fp_structures') || '[]') || []).filter((x) => x && x.name); } catch (e) { return []; }
}
// Au chargement : la structure enregistrée rejoint l'identité (Pass ID, profil)
(function () { const st = fpGetStructure(); if (st && window.FP_ME) window.FP_ME.org = st.name; })();

// Re-render quand la structure change (même canal que les briques growth)
function useStSignal() {
  const [, setN] = useStateSt(0);
  useEffectSt(() => {
    const f = () => setN((n) => n + 1);
    window.addEventListener('fp:growth', f);
    return () => window.removeEventListener('fp:growth', f);
  }, []);
}

// Glyphe structure · même vocabulaire que l'encart de l'inscription (deux bâtiments)
const StBuilding = ({ s = 16 }) => (
  <svg width={s} height={s} viewBox="0 0 16 16" fill="none">
    <rect x="2.25" y="3" width="6" height="10.25" rx="1" stroke="currentColor" strokeWidth="1.2"></rect>
    <path d="M8.25 6h4.5a1 1 0 011 1v6.25" stroke="currentColor" strokeWidth="1.2"></path>
    <path d="M4.5 5.75h1.5M4.5 8h1.5M4.5 10.25h1.5M10.5 8.5h1.25M10.5 10.5h1.25" stroke="currentColor" strokeWidth="1.1" strokeLinecap="round"></path>
  </svg>
);
const StCheck = ({ s = 20 }) => (
  <svg width={s} height={s} viewBox="0 0 16 16" fill="none">
    <path d="M2.8 8.6L6.2 12L13.2 4.4" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"></path>
  </svg>
);
const StChev = ({ s = 13 }) => (
  <svg className="st-chev" width={s} height={s} viewBox="0 0 14 14" fill="none">
    <path d="M5 2.8L9.4 7 5 11.2" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"></path>
  </svg>
);

const stInitials = (name) => (name || '').trim().split(/\s+/).slice(0, 2).map((w) => w[0]).join('').toUpperCase() || 'ST';
const stSlug = (name) => ((name || '').toUpperCase().replace(/[^A-Z]/g, '').slice(0, 4) || 'FTPS');
// Avatar d'organisation · logo si fourni (tunnel), sinon monogramme
const StOrgAv = ({ st }) => (
  <span className="st-orgav" style={st && st.color ? { background: `color-mix(in oklab, ${st.color} 16%, transparent)`, color: st.color === '#52525B' ? '#A1A1AA' : st.color } : null}>
    {st && st.logo ? <img src={st.logo} alt="" /> : stInitials(st && st.name)}
  </span>
);
const stOpenSheet = (mode) => window.dispatchEvent(new CustomEvent('fp:growth', { detail: { kind: 'sheet', sheet: 'structure', mode } }));
// Gérer : structure administrée → panneau complet (sous-page) ; structure rejointe → feuille (lecture)
const stOpenManage = (st) => {
  if (st && st.kind !== 'joined' && window.StructurePanelPage) window.dispatchEvent(new CustomEvent('fp:opensub', { detail: { sub: 'stpanel' } }));
  else stOpenSheet(st ? 'manage' : 'choice');
};

// ── Les 3 pass individuels · pédagogie (doc de référence) ──
const ST_PASSES = [
  { n: 'PassPRO', p: '29,99 → 19,99 CHF lié', d: 'Acteurs pro · joueurs, agents, staff. Accès complet : messagerie certifiée, coffre-fort, autorisations, agenda. Lié à votre structure, il passe à 19,99 CHF/mois ; si la personne part, son compte reste, seul le prix change.' },
  { n: 'PassSTART', p: '9,99 CHF/mois', d: 'Football amateur et jeunes (U17–U9). Toute l’app en usage amateur. Même prix, lié ou non à une structure.' },
  { n: 'PassSTAFF', p: '1,99 CHF/mois', d: 'Bénévoles, parents, occasionnels. Messages et groupes uniquement à l’intérieur de votre structure. Au premier message externe reçu, invitation à passer à PassSTART.' },
];
function StPassGuide() {
  return (
    <div className="st-passwrap">
      {ST_PASSES.map((x) => (
        <div key={x.n} className="st-pass">
          <div className="st-pass-head"><b>{x.n}</b><span>{stTX(x.p)}</span></div>
          <p>{stTX(x.d)}</p>
        </div>
      ))}
    </div>
  );
}

// ── Liens d'invitation · l'admin repart avec son équipe (moteur B2B2C) ──
// Le siège staff peut être pris en charge par la structure OU laissé à la charge de
// la personne · c'est l'émetteur du lien qui décide (le lien porte ce choix).
function StInvites({ name, copy }) {
  const slug = stSlug(name);
  const [staffPay, setStaffPay] = useStateSt('covered'); // 'covered' (structure) | 'self' (la personne)
  const staffLink = staffPay === 'self' ? `footpass.app/s/${slug}-STAFF-SELF-2201` : `footpass.app/s/${slug}-STAFF-2201`;
  return (
    <div className="st-invites">
      <span className="gr-kicker">{stTX('INVITER VOTRE ÉQUIPE')}</span>
      <div className="st-inv col">
        <span className="st-inv-txt">
          <b>{staffPay === 'self' ? stTX('Staff · à la charge de la personne') : stTX('Staff · siège pris en charge')}</b>
          <em>{staffLink}</em>
        </span>
        <div className="st-inv-row">
          <span className="st-billpick" role="group" aria-label={stTX('Qui paie le siège staff')}>
            <button className={staffPay === 'covered' ? 'on' : ''} onClick={() => setStaffPay('covered')}>{stTX('Structure')}</button>
            <button className={staffPay === 'self' ? 'on' : ''} onClick={() => setStaffPay('self')}>{stTX('La personne')}</button>
          </span>
          <button className="st-pastebtn" onClick={() => copy(staffLink)}>{stTX('Copier')}</button>
        </div>
      </div>
      <div className="st-inv">
        <span className="st-inv-txt">
          <b>{stTX('Joueurs & membres · Pass lié 19,99')}</b>
          <em>footpass.app/m/{slug}-8102</em>
        </span>
        <button className="st-pastebtn" onClick={() => copy(`footpass.app/m/${slug}-8102`)}>{stTX('Copier')}</button>
      </div>
      <p>{stTX('Liens personnels, valables 72 h. Le siège staff suit le choix ci-dessus ; chaque arrivée renforce votre réseau.')}</p>
    </div>
  );
}

// ═══════ Carte Accueil · « Votre structure » ═══════
// Visible tant qu'aucune structure n'est enregistrée · refermable en 1 geste, comme les briques growth.
function FPStructureCard() {
  useStSignal();
  const st = fpGetStructure();
  const hidden = (() => { try { return localStorage.getItem(ST_HIDE_KEY) === '1'; } catch (e) { return false; } })();
  // Structure enregistrée → la carte devient le hub de gestion (sièges, pass, invitations)
  if (st) {
    return (
      <div className="gr-card" data-screen-label="Accueil · Votre structure">
        <div className="gr-head"><span className="gr-kicker">{stTX('VOTRE STRUCTURE')}</span><b></b></div>
        <div className="st-orghead" style={{ margin: '4px 0 11px' }}>
          <StOrgAv st={st} />
          <span className="st-orghead-txt">
            <b>{st.name}</b>
            <em>{st.kind === 'joined' ? `${stTX(st.type)} · ${stTX(st.role || 'Agent')}` : `${stTX(st.type)} · ${stTX('Palier')} ${st.tier || 'Small'}${st.kind === 'request' ? ' · ' + stTX('vérification en cours') : ''}`}</em>
          </span>
        </div>
        <div className="st-acts">
          <button className="a3-act pri" onClick={() => stOpenManage(st)}>{stTX('Gérer ma structure')}</button>
        </div>
      </div>
    );
  }
  if (hidden) return null;
  const dismiss = () => {
    try { localStorage.setItem(ST_HIDE_KEY, '1'); } catch (e) { /* ignore */ }
    window.dispatchEvent(new CustomEvent('fp:growth', { detail: { kind: 'structure' } }));
  };
  return (
    <div className="gr-card" data-screen-label="Accueil · Votre structure">
      <div className="gr-head">
        <span className="gr-kicker">{stTX('VOTRE STRUCTURE')}</span>
        <span className="st-menubadge miss">{stTX('À CRÉER')}</span>
        <b></b>
        <button className="gr-x" onClick={dismiss} aria-label={stTX('Masquer')}>
          <svg width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M2.5 2.5l7 7M9.5 2.5l-7 7" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"></path></svg>
        </button>
      </div>
      <p className="st-sub">{stTX('Votre tour de contrôle · équipe, espaces, coffre. Vérifiée, sur votre Pass ID.')}</p>
      <div className="st-acts">
        <button className="a3-act pri" onClick={() => stOpenSheet('create')}>{stTX('Créer ma structure')}</button>
        <button className="a3-act" onClick={() => stOpenSheet('join')}>{stTX('J’ai une invitation')}</button>
      </div>
    </div>
  );
}

// ═══════ Feuille · créer ou rejoindre ═══════
function StructureSheet({ onClose, onOpenSub, showToast, mode: initMode }) {
  useStSignal();
  const [mode, setMode] = useStateSt(initMode === 'join' || (initMode === 'manage' && fpGetStructure()) ? initMode : 'choice');
  const [passOpen, setPassOpen] = useStateSt(false);
  // Rejoindre · coller → vérifier → invitation révélée (même mécanique que l'inscription invité)
  const [link, setLink] = useStateSt('');
  const [joinPhase, setJoinPhase] = useStateSt('paste'); // paste | checking | valid
  const [done, setDone] = useStateSt(null);
  const [openMb, setOpenMb] = useStateSt(null); // rangée « personne liée » dépliée (mode manage)
  const [, setBumpSt] = useStateSt(0);
  const bump = () => setBumpSt((n) => n + 1);

  const finish = (st, toast) => {
    fpSetStructure(st);
    setDone(st);
    setMode('done');
    if (showToast) showToast(toast);
  };
  const checkLink = () => {
    if (!link || joinPhase !== 'paste') return;
    setJoinPhase('checking');
    setTimeout(() => setJoinPhase('valid'), 1200);
  };
  const join = () => finish(
    { name: ST_JOIN_ORG.name, type: ST_JOIN_ORG.type, kind: 'joined', role: 'Agent' },
    stTX('Structure ajoutée · visible sur votre Pass ID')
  );
  const copy = (s) => {
    try { if (navigator.clipboard) navigator.clipboard.writeText(s); } catch (e) { /* ignore */ }
    if (showToast) showToast(stTX('Lien copié'));
  };

  const body = (() => {
    if (mode === 'choice') {
      return (
        <React.Fragment>
          <button className="st-choice" onClick={() => { onClose(); setTimeout(() => stOpenSheet('create'), 80); }}>
            <span className="st-choice-ic"><StBuilding /></span>
            <span className="st-choice-txt">
              <b>{stTX('Créer une structure')}</b>
              <em>{stTX('Palier selon votre staff · dès 499,99 CHF/an · essai 10 jours')}</em>
            </span>
            <StChev />
          </button>
          <button className="st-choice" onClick={() => setMode('join')}>
            <span className="st-choice-ic"><StCheck s={16} /></span>
            <span className="st-choice-txt">
              <b>{stTX('Rejoindre via invitation')}</b>
              <em>{stTX('Votre siège est pris en charge par la structure.')}</em>
            </span>
            <StChev />
          </button>
          <p className="st-hint">{stTX('Elle s’affichera sur votre Pass ID.')}</p>
        </React.Fragment>
      );
    }
    if (mode === 'manage') {
      // VRAI panel de gestion : personnes liées · autorisations · permissions documents · facturation · invitations
      const st = fpGetStructure() || done || {};
      const t = ST_TIERS.find((x) => x.id === st.tier) || ST_TIERS[0];
      const joined = st.kind === 'joined';
      const team = st.team || [];
      const used = 1 + team.filter((m) => m.kind === 'staff').length;
      const all = fpListStructures();
      // Personnes liées : vous + membres vérifiés de la structure (annuaire) + équipe invitée (tunnel)
      const peers = Object.entries(window.FP_PEERS || {}).filter(([, p]) => p.org === st.name).map(([pid, p]) => ({ pid, name: window.fpUpperLast ? fpUpperLast(p.name) : p.name, sub: stTX(p.role || 'Membre') + ' · ' + stTX('Pass lié actif'), right: 'PassPRO', ok: true, kind: 'peer' }));
      const me = { name: (window.FP_ME && FP_ME.name) || 'Alexandre Da Costa', sub: stTX(joined ? st.role || 'Agent' : 'Admin') + ' · ' + stTX('vous'), right: joined ? stTX('Pris en charge') : stTX('Siège 1'), ok: true, kind: 'me' };
      const invitees = team.map((m, i) => ({ ...m, idx: i, sub: (m.kind === 'staff' ? stTX('Pôle ') + stTX(m.pole || 'Direction') : stTX('Membre')) + ' · ' + stTX('invitation envoyée'), right: m.kind === 'staff' ? stTX('Siège ') + (2 + team.slice(0, i).filter((x) => x.kind === 'staff').length) : (m.covered ? stTX('Pris en charge') : (m.pass === 'start' ? 'PassSTART' : stTX('PassPRO lié'))), kind: 'invitee' }));
      const people = [me, ...peers, ...invitees];
      const rmInvitee = (idx) => {
        const nt = team.filter((_, j) => j !== idx);
        fpSetStructure({ ...st, team: nt });
        setOpenMb(null); bump();
        showToast && showToast(stTX('Siège libéré · facturation ajustée à l’échéance'));
      };
      // Autorisations & documents · comptés depuis les vrais stores
      const A = window.FP_AUTH || { mandates: [], received: [], given: [], requests: [] };
      const nAct = ['mandates', 'received', 'given'].reduce((s, k) => s + ((A[k] || []).filter((x) => x.status === 'active' || x.status === 'soon').length), 0);
      const nReq = (A.requests || []).length + ['received', 'given'].reduce((s, k) => s + ((A[k] || []).filter((x) => x.status === 'pending').length), 0);
      const allDocs = (window.CF_DOCS_INIT || []).concat(window.CF3_DOCS_EXTRA || []);
      const nShared = allDocs.filter((d) => (d.access || []).length).length;
      const goSub = (dest) => { onClose(); onOpenSub && onOpenSub(dest); };
      return (
        <React.Fragment>
          {all.length > 1 ? (
            <div className="st-chips" style={{ margin: '0 0 12px' }}>
              {all.map((x) => <button key={x.name} className={`st-chip ${st.name === x.name ? 'on' : ''}`} onClick={() => { fpSetStructure(x); setOpenMb(null); bump(); }}>{x.name}</button>)}
            </div>
          ) : null}
          <div className="st-orghead">
            <StOrgAv st={st} />
            <span className="st-orghead-txt">
              <b>{st.name}</b>
              <em>{stTX(st.type || 'Agence')} · {stTX('vérifiée par FOOTPASS')}</em>
            </span>
          </div>

          <div className="st-lbl">{stTX('PERSONNES LIÉES')} · {people.length}</div>
          <div className="st-mblist">
            {people.map((m, i) => (
              <div className="st-mb" key={i}>
                <button className="st-mbrow" onClick={() => setOpenMb(openMb === i ? null : i)} aria-expanded={openMb === i}>
                  <span className="st-mbav">{stInitials(m.name)}</span>
                  <span className="st-mbtxt"><b>{m.name}</b><em>{m.sub}</em></span>
                  <span className={`st-mbright ${m.ok ? 'ok' : ''}`}>{m.right}</span>
                </button>
                {openMb === i ? (
                  <div className="st-mbacts">
                    {m.kind === 'me' ? (
                      <button className="a3-act" onClick={() => goSub('passid')}>{stTX('Voir mon Pass ID')}</button>
                    ) : m.kind === 'peer' ? (
                      <React.Fragment>
                        <button className="a3-act pri" onClick={() => goSub('mandates')}>{stTX('Voir l’autorisation')}</button>
                        <button className="a3-act" onClick={() => { setOpenMb(null); showToast && showToast(stTX('Retrait demandé · la personne garde son Pass')); }}>{stTX('Retirer de la structure')}</button>
                      </React.Fragment>
                    ) : (
                      <React.Fragment>
                        <button className="a3-act pri" onClick={() => { setOpenMb(null); showToast && showToast(stTX('Invitation renvoyée à ') + m.name); }}>{stTX('Renvoyer l’invitation')}</button>
                        <button className="a3-act" onClick={() => rmInvitee(m.idx)}>{m.kind === 'staff' || m.kind === 'invitee' && m.pole ? stTX('Retirer le siège') : stTX('Retirer')}</button>
                      </React.Fragment>
                    )}
                  </div>
                ) : null}
              </div>
            ))}
          </div>
          {!joined && !team.length && !peers.length ? <p className="st-typehint" style={{ margin: '6px 2px 0' }}>{stTX('Invitez votre staff : chaque arrivée apparaîtra ici, avec son siège et son Pass.')}</p> : null}

          <div className="st-lbl">{stTX('AUTORISATIONS DE LA STRUCTURE')}</div>
          <button className="st-choice" onClick={() => goSub('mandates')}>
            <span className="st-choice-ic"><HMI.Mandate s={17} /></span>
            <span className="st-choice-txt">
              <b>{nAct} {stTX('autorisations actives')}</b>
              <em>{nReq ? nReq + ' ' + stTX('à traiter · représentation, délégations') : stTX('Représentation et délégations · gérées dans Autorisations')}</em>
            </span>
            <StChev />
          </button>

          <div className="st-lbl">{stTX('DOCUMENTS & PERMISSIONS')}</div>
          <button className="st-choice" onClick={() => goSub('vault')}>
            <span className="st-choice-ic"><HMI.Vault s={17} /></span>
            <span className="st-choice-txt">
              <b>{nShared} {stTX('documents partagés')}</b>
              <em>{stTX('Droits par personne et par document · coffre-fort, onglet Accès')}</em>
            </span>
            <StChev />
          </button>

          <div className="st-lbl">{stTX('FACTURATION')}</div>
          <div className="pg-info">
            {joined ? (
              <React.Fragment>
                <div className="pg-inforow"><span>{stTX('Votre rôle')}</span><b>{stTX(st.role || 'Agent')}</b></div>
                <div className="pg-inforow"><span>{stTX('Facturation')}</span><b className="ok"><StCheck s={11} /> {stTX('Prise en charge par la structure')}</b></div>
              </React.Fragment>
            ) : (
              <React.Fragment>
                <div className="pg-inforow"><span>{stTX('Statut')}</span><b>{st.kind === 'request' ? stTX('Vérification en cours · 24 h') : stTX('Active · vérification en cours')}</b></div>
                <div className="pg-inforow"><span>{stTX('Palier')}</span><b>{t.id} · {stTX('staff')} {t.staff}</b></div>
                <div className="pg-inforow"><span>{stTX('Sièges staff')}</span><b>{used} / {t.inc} {used > t.inc ? '· ' + (used - t.inc) + ' ' + stTX('supp.') : stTX('utilisés')}</b></div>
                <div className="pg-inforow"><span>{stTX('Siège supplémentaire')}</span><b>{stTX('19,99 CHF/mois')}</b></div>
                <div className="pg-inforow"><span>{stTX('Forfait annuel')}</span><b>{t.price} CHF</b></div>
              </React.Fragment>
            )}
          </div>
          {!joined ? <p className="st-typehint" style={{ margin: '8px 2px 0' }}>{stTX('Tout fonctionne normalement pendant la vérification (registre du commerce ou statuts pourront être demandés). Forfait intégralement remboursé si la structure n’est pas acceptée.')}</p> : null}
          {!joined ? <StInvites name={st.name} copy={copy} /> : null}
          <div className="st-lbl">{stTX('LES 3 PASS DE VOTRE ÉQUIPE')}</div>
          <StPassGuide />
          <p className="st-hint" style={{ margin: '10px 2px 0' }}>{stTX('Votre structure ne paie que son staff : chaque membre garde son propre Pass.')}</p>
          <button className="pg-btn primary st-cta" onClick={() => goSub('passid')}>{stTX('Voir mon Pass ID')}</button>
          {!joined ? <button className="st-close" style={{ display: 'block', margin: '12px auto 0', color: '#C2402F' }} onClick={() => showToast && showToast(stTX('Résiliation notée · active jusqu’à l’échéance annuelle'))}>{stTX('Résilier · effet à l’échéance')}</button> : null}
          <button className="st-close" style={{ display: 'block', margin: '10px auto 0' }} onClick={onClose}>{stTX('Fermer')}</button>
        </React.Fragment>
      );
    }
    if (mode === 'join') {
      if (joinPhase !== 'valid') {
        return (
          <React.Fragment>
            <p className="st-sub" style={{ margin: '2px 0 12px' }}>{stTX('Collez le lien reçu de votre structure pour la rejoindre.')}</p>
            <div className="st-paste">
              <div className="st-input as-display" onClick={() => !link && setLink(ST_JOIN_LINK)}>
                {link ? <span>{link}</span> : <span className="ph">{stTX('Lien d’invitation de votre structure')}</span>}
              </div>
              <button className="st-pastebtn" onClick={() => setLink(ST_JOIN_LINK)} disabled={!!link}>{stTX('Coller')}</button>
            </div>
            <p className="st-hint">{stTX('Lien personnel, valable 72 h.')}</p>
            <button className={`pg-btn primary st-cta ${link ? '' : 'off'}`} onClick={checkLink}>
              {joinPhase === 'checking' ? <span className="st-spin"></span> : stTX('Vérifier')}
            </button>
          </React.Fragment>
        );
      }
      return (
        <React.Fragment>
          <div className="gr-kicker" style={{ display: 'block', margin: '0 0 10px' }}>{stTX('INVITATION OFFICIELLE')}</div>
          <div className="st-orghead">
            <span className="st-orgav">{stInitials(ST_JOIN_ORG.name)}</span>
            <span className="st-orghead-txt">
              <b>{ST_JOIN_ORG.name}</b>
              <em>{stTX(ST_JOIN_ORG.type)} · Genève</em>
            </span>
          </div>
          <div className="pg-info">
            <div className="pg-inforow"><span>{stTX('Invité par')}</span><b>{ST_JOIN_ORG.by} · {stTX(ST_JOIN_ORG.byRole)}</b></div>
            <div className="pg-inforow"><span>{stTX('Votre rôle')}</span><b>{stTX('Agent')}</b></div>
            <div className="pg-inforow"><span>{stTX('Facturation')}</span><b className="ok"><StCheck s={11} /> {stTX('Prise en charge par la structure')}</b></div>
          </div>
          <button className="pg-btn primary st-cta" onClick={join}>{stTX('Rejoindre')} {ST_JOIN_ORG.name}</button>
        </React.Fragment>
      );
    }
    // done · l'admin repart avec ses liens d'invitation : chaque structure créée doit bâtir son équipe
    const isJoin = done && done.kind === 'joined';
    const isReq = done && done.kind === 'request';
    return (
      <div className="st-done">
        <span className="st-done-ic"><StCheck s={22} /></span>
        <b>{done ? done.name : ''}</b>
        <em>{isJoin ? stTX('Vous avez rejoint la structure') : isReq ? stTX('Demande envoyée · vérification par e-mail sous 24 h') : stTX('Structure créée · vous en êtes l’admin')}</em>
        <p>{isReq ? stTX('Votre structure apparaîtra sur votre Pass ID dès l’activation.') : stTX('Elle s’affiche sur votre Pass ID et tout fonctionne dès maintenant · vérification en cours, des documents (registre, statuts) pourront vous être demandés.')}</p>
        {!isJoin ? <StInvites name={done ? done.name : ''} copy={copy} /> : null}
        <button className="pg-btn primary" onClick={() => { onClose(); onOpenSub && onOpenSub('passid'); }}>{stTX('Voir mon Pass ID')}</button>
        <button className="st-close" onClick={onClose}>{stTX('Fermer')}</button>
      </div>
    );
  })();

  return (
    <PgSheet onClose={onClose} title={stTX('Votre structure')}>
      {body}
    </PgSheet>
  );
}

// ═══════ Rangée Menu · « Ma structure » (sous Mon Pass ID) ═══════
// Nom de la structure si enregistrée (→ hub de gestion), sinon invitation à créer (→ feuille complète).
function FPStructureMenuRow() {
  useStSignal();
  const st = fpGetStructure();
  return (
    <button className="hm-row" onClick={() => (st ? stOpenManage(st) : stOpenSheet('choice'))} data-screen-label="Menu · Ma structure">
      <span className="hm-row-ic"><StBuilding s={17} /></span>
      <span className="hm-row-txt">
        <b>{st ? st.name : stTX('Ma structure')}</b>
        <em className={st ? '' : 'st-warnem'}>{st
          ? (st.kind === 'joined' ? `${stTX(st.type)} · ${stTX(st.role || 'Agent')}` : `${stTX(st.type)} · ${stTX('Palier')} ${st.tier || 'Small'}${st.kind === 'request' ? ' · ' + stTX('vérification en cours') : ''}`)
          : stTX('Créer ou rejoindre')}</em>
      </span>
      {!st ? <span className="st-menubadge miss">{stTX('À CRÉER')}</span> : null}
      <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M5 3l4 4-4 4" stroke="#A1A1AA" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"></path></svg>
    </button>
  );
}

Object.assign(window, { fpGetStructure, fpSetStructure, fpListStructures, FPStructureCard, StructureSheet, FPStructureMenuRow, FP_ST_TYPES: ST_TYPES, FP_ST_TIERS: ST_TIERS });