// FOOTPASS v2 · TUNNEL DE CRÉATION DE STRUCTURE · partie 1 : données, atomes, étapes 1-3 // Audit « Création de structure » P0-1→P0-3 : tunnel plein écran, calculateur de dimensionnement, // preuve par le résultat (template + cascade B2B2C). Persuasion éthique uniquement · aucun dark pattern. const { useState: useStateStt, useEffect: useEffectStt, useRef: useRefStt } = React; const sttTX = (s) => (window.TX ? window.TX(s) : s); // ── Paliers (mêmes chiffres que FP_ST_TIERS · doc de référence) + bornes numériques ── const STT_TIERS = [ { id: 'Small', staff: '1–5', max: 5, p: 499.99, inc: 2, direct: true }, { id: 'Medium', staff: '6–15', max: 15, p: 1199.99, inc: 2, direct: true }, { id: 'Confirmed', staff: '16–30', max: 30, p: 3990, inc: 5, direct: true }, { id: 'Established', staff: '31–50', max: 50, p: 7990, inc: 5 }, { id: 'Large', staff: '51–70', max: 70, p: 15990, inc: 10 }, { id: 'Very Large', staff: '70+', max: Infinity, p: 19990, inc: 10 }, ]; const sttTierFor = (n) => STT_TIERS.find((t) => n <= t.max) || STT_TIERS[STT_TIERS.length - 1]; const sttCHF = (n) => { const [i, c] = n.toFixed(2).split('.'); const int = i.replace(/\B(?=(\d{3})+(?!\d))/g, '\u202F'); return c === '00' ? int : `${int},${c}`; }; // Équivalent mensuel EXACT (2 décimales, jamais arrondi vers le haut · charte de clarté) const sttMois = (t) => sttCHF(Math.round((t.p / 12) * 100) / 100); const STT_SEAT_M = 19.99; // siège supplémentaire · mensuel (PassPRO lié · prix déjà réduit vs 29,99 individuel) const STT_SEAT_A = 239.99; // siège supplémentaire · annuel = 12 × 19,99 (aucune remise supplémentaire : le −33 % ne vaut que pour le PassPRO individuel) // ── Calculateur : questions ADAPTÉES au type · seul le staff permanent compte ── // ex = la rangée « ne comptent jamais » (0 CHF) · l'aha du calculateur. const STT_CFG = { Agence: { rows: [{ k: 'a', l: 'Agents', h: 'Négocient au nom de vos joueurs', d: 2 }, { k: 'b', l: 'Juridique & administration', h: 'Contrats, facturation, back-office', d: 1 }, { k: 'c', l: 'Scouting & data', h: 'Détection, vidéo, analyse', d: 1 }], ex: { l: 'Joueurs représentés', h: 'Chacun paie son propre Pass', d: 24 }, poles: ['Direction', 'Juridique', 'Performance', 'Scouting', 'Communication'], more: ['Player Care', 'Finance', 'Médical'], talents: 'Vos joueurs représentés', hier: ['Fondateur', 'Noyau privé', 'Agents seniors', 'Agents terrain', 'Pôles'] }, Club: { rows: [{ k: 'a', l: 'Direction & administration', h: 'Présidence, secrétariat, finance', d: 2 }, { k: 'b', l: 'Staff technique', h: 'Entraîneurs, adjoints, préparateurs', d: 4 }, { k: 'c', l: 'Médical & performance', h: 'Médecins, kinés, data', d: 2 }, { k: 'd', l: 'Communication & académie', h: 'Salariés permanents uniquement', d: 1 }], ex: { l: 'Joueurs & jeunes', h: 'Toutes équipes · chacun son Pass', d: 68 }, poles: ['Direction', 'Performance', 'Médical', 'Administratif', 'Communication', 'Juridique'], more: ['Scouting', 'Player Care', 'Finance'], talents: 'Vos joueurs', hier: ['Présidence', 'Noyau privé', 'Staffs d\u2019équipe', 'Pôles'] }, 'Académie': { rows: [{ k: 'a', l: 'Direction', h: '', d: 1 }, { k: 'b', l: 'Éducateurs permanents', h: 'Salariés, hors vacataires', d: 5 }, { k: 'c', l: 'Médical & administration', h: '', d: 2 }], ex: { l: 'Jeunes en formation', h: 'PassSTART 9,99 · payé par les familles', d: 120 }, poles: ['Direction', 'Performance', 'Médical', 'Player Care', 'Administratif'], more: ['Communication', 'Juridique'], talents: 'Vos jeunes', hier: ['Direction', 'Noyau privé', 'Éducateurs', 'Pôles'] }, Cabinet: { rows: [{ k: 'a', l: 'Associés', h: '', d: 2 }, { k: 'b', l: 'Collaborateurs', h: 'Juristes, conseils, praticiens', d: 3 }, { k: 'c', l: 'Support', h: 'Assistanat, administration', d: 1 }], ex: { l: 'Clients & athlètes conseillés', h: 'Chacun paie son propre Pass', d: 30 }, poles: ['Direction', 'Juridique', 'Administratif', 'Finance'], more: ['Communication', 'Médical'], talents: 'Vos clients athlètes', hier: ['Associés', 'Noyau privé', 'Collaborateurs', 'Pôles'] }, Scouting: { rows: [{ k: 'a', l: 'Direction', h: '', d: 1 }, { k: 'b', l: 'Scouts permanents', h: 'Salariés, hors correspondants', d: 3 }, { k: 'c', l: 'Data & vidéo', h: '', d: 1 }], ex: { l: 'Joueurs suivis', h: 'Jamais comptés dans votre palier', d: 200 }, poles: ['Direction', 'Scouting', 'Performance', 'Administratif'], more: ['Communication', 'Finance'], talents: 'Vos joueurs suivis', hier: ['Direction', 'Noyau privé', 'Scouts seniors', 'Pôles'] }, 'Média': { rows: [{ k: 'a', l: 'Rédaction permanente', h: '', d: 4 }, { k: 'b', l: 'Production', h: 'Vidéo, podcast, studio', d: 2 }, { k: 'c', l: 'Administration', h: '', d: 1 }], ex: { l: 'Pigistes & invités', h: 'Occasionnels · jamais comptés', d: 15 }, poles: ['Direction', 'Communication', 'Administratif', 'Finance'], more: ['Juridique'], talents: 'Vos contributeurs', hier: ['Direction', 'Noyau privé', 'Rédaction', 'Pôles'] }, Association: { rows: [{ k: 'a', l: 'Permanents', h: 'Salariés de l\u2019association', d: 1 }, { k: 'b', l: 'Encadrants salariés', h: '', d: 2 }], ex: { l: 'Bénévoles, parents & joueurs', h: 'PassSTAFF 1,99 ou PassSTART · jamais comptés', d: 40 }, poles: ['Direction', 'Administratif', 'Communication', 'Player Care'], more: ['Performance', 'Finance'], talents: 'Vos membres', hier: ['Bureau', 'Noyau privé', 'Encadrants', 'Pôles'] }, 'Fédération': { rows: [{ k: 'a', l: 'Permanents', h: 'Direction, administration', d: 10 }, { k: 'b', l: 'Compétitions & arbitrage', h: 'Salariés permanents', d: 4 }, { k: 'c', l: 'Communication & juridique', h: '', d: 3 }], ex: { l: 'Clubs affiliés & licenciés', h: 'Ils créent leurs propres structures', d: 340 }, poles: ['Direction', 'Juridique', 'Opérations', 'Communication', 'Administratif'], more: ['Finance', 'Médical'], talents: 'Vos officiels', hier: ['Comité', 'Noyau privé', 'Départements', 'Pôles'] }, Autre: { rows: [{ k: 'a', l: 'Vous', h: 'Fondateur ou indépendant', d: 1 }, { k: 'b', l: 'Équipe permanente', h: '', d: 1 }], ex: { l: 'Clients & athlètes', h: 'Chacun paie son propre Pass', d: 12 }, poles: ['Direction', 'Performance', 'Administratif'], more: ['Juridique', 'Communication', 'Finance'], talents: 'Vos athlètes', hier: ['Fondateur', 'Équipe', 'Pôles'] }, }; const sttCfg = (type) => STT_CFG[type] || STT_CFG.Autre; const STT_COUNTRIES = ['Suisse', 'France', 'Belgique', 'Espagne', 'Portugal', 'Autre']; const STT_COLORS = [{ c: '#00A37E', l: 'Vert FOOTPASS' }, { c: '#2A6FDB', l: 'Bleu royal' }, { c: '#C9A24B', l: 'Or' }, { c: '#52525B', l: 'Graphite' }]; const sttInit = (name) => (name || '').trim().split(/\s+/).slice(0, 2).map((w) => w[0]).join('').toUpperCase() || '··'; const sttMonoStyle = (color) => ({ background: `color-mix(in oklab, ${color} 16%, transparent)`, color: color === '#52525B' ? '#A1A1AA' : color }); // Rôle contact → pôle par défaut (suggestions d'équipe) const STT_ROLE_POLE = { Juriste: 'Juridique', Agent: 'Direction', 'Entraîneur': 'Performance', 'Directeur sportif': 'Direction', Recruteur: 'Scouting', CEO: 'Direction' }; // Logo de structure · choisi depuis la galerie, recadré en carré 112px (dataURL léger) function sttPickLogo(cb) { const inp = document.createElement('input'); inp.type = 'file'; inp.accept = 'image/*'; inp.onchange = () => { const f = inp.files && inp.files[0]; if (!f) return; const r = new FileReader(); r.onload = () => { const img = new Image(); img.onload = () => { const s = 112, c = document.createElement('canvas'); c.width = s; c.height = s; const x = c.getContext('2d'); const k = Math.max(s / img.width, s / img.height); const w = img.width * k, h = img.height * k; x.drawImage(img, (s - w) / 2, (s - h) / 2, w, h); cb(c.toDataURL('image/png')); }; img.src = r.result; }; r.readAsDataURL(f); }; inp.click(); } // Monogramme → logo dès qu'il existe (identité, aperçu QG, plaque finale) function SttMono({ d, onPick }) { return ( {d.logo ? : sttInit(d.name)} ); } // ── Icônes locales (formes simples) ── const SttIco = { Chev: ({ s = 18 }) => (), Check: ({ s = 12 }) => (), Plus: ({ s = 13 }) => (), X: ({ s = 12 }) => (), Door: ({ s = 15 }) => (), Room: ({ s = 14 }) => (), Lock: ({ s = 14 }) => (), Vault: ({ s = 14 }) => (), Users: ({ s = 14 }) => (), Link: ({ s = 14 }) => (), Shield: ({ s = 11 }) => (), Pole: ({ s = 14 }) => (), }; // ── Atomes ── function SttStepper({ v, onChange, min = 0 }) { return ( {v} ); } function SttRule() { return (

{sttTX('Votre structure est la porte, pas le portefeuille : ')}{sttTX('vous ne payez que votre staff permanent.')} {sttTX('Joueurs, jeunes et bénévoles paient leur propre Pass.')}

); } // ═══ Étape 1 · IDENTITÉ · « je représente une structure » ═══ function SttIdentity({ d, up }) { const types = window.FP_ST_TYPES || []; const cur = types.find((x) => x.t === d.type) || types[0] || { hint: '', demo: '' }; return ( {sttTX('VOTRE STRUCTURE')}

{sttTX('La tour de contrôle de votre organisation.')}

{sttTX('Créée en deux minutes, vérifiée par FOOTPASS, visible sur le Pass ID de toute votre équipe.')}

sttPickLogo((logo) => up({ logo }))} /> {d.name.trim() ? d.name : {sttTX('Nom de votre structure')}} {sttTX(d.type)} · {sttTX(d.country)} · {sttTX('vérifiée par FOOTPASS')}
{sttTX('Type')}
{types.map((x) => ( ))}

{sttTX(cur.hint)}

{sttTX('Nom')}
up({ name: e.target.value })} /> {!d.name ? : null}
{sttTX('Pays')}
{STT_COUNTRIES.map((c) => ( ))}
{sttTX('Couleur')}{d.logo ? sttTX('derrière votre logo') : sttTX('votre monogramme · ou touchez-le pour ajouter votre logo')}
{STT_COLORS.map((x) => ( ))}
); } // ═══ Étape 2 · CALCULATEUR · « estimez votre organisation » ═══ // La réassurance qui débloque la conversion : palier recommandé + prix annuel EN DIRECT. function SttCalc({ d, up }) { const cfg = sttCfg(d.type); const calc = d.calc; const ex = d.ex; const [pulse, setPulse] = useStateStt(0); const [zeroPulse, setZeroPulse] = useStateStt(0); const staff = cfg.rows.reduce((s, r) => s + (calc[r.k] || 0), 0); const tier = sttTierFor(Math.max(1, staff)); const extra = Math.max(0, staff - tier.inc); const setRow = (k, v) => { up({ calc: { ...calc, [k]: Math.max(0, v) } }); setPulse((p) => p + 1); }; return ( {sttTX('DIMENSIONNEMENT')}

{sttTX('Estimez votre organisation.')}

{sttTX('Seul votre staff permanent compte · celles et ceux qui font tourner ') + (d.name || sttTX('votre structure')) + sttTX(' au quotidien.')}

{sttTX('Votre staff permanent')}
{cfg.rows.map((r) => (
{sttTX(r.l)}{r.h ? {sttTX(r.h)} : null} setRow(r.k, v)} />
))}
{sttTX(cfg.ex.l)}{sttTX(cfg.ex.h)} { up({ ex: Math.max(0, v) }); setZeroPulse((p) => p + 1); }} /> {sttTX('0 CHF · jamais comptés')}
{sttTX('PALIER RECOMMANDÉ')}{staff} {sttTX('staff estimé')}
{tier.id}{sttTX('staff')} {tier.staff}
{sttCHF(tier.p)} CHF/an · ≈ {sttMois(tier)} CHF/mois
{sttTX('Sièges staff inclus')}{tier.inc}
{sttTX('Au-delà, par siège activé')}{sttTX('19,99 CHF/mois · 239,99/an')}
{extra > 0 ?
{sttTX('Pour vos ') + staff + sttTX(' staff, si tous prennent un siège')}≈ {sttCHF(tier.p + extra * STT_SEAT_A)} {sttTX('CHF/an')}
: null}
{sttTX(cfg.ex.l)} ({ex}){sttTX('0 CHF')}
{sttTX('Aujourd\u2019hui')}{tier.direct ? sttTX('0 CHF · essai 10 jours') : sttTX('0 CHF · activation sur demande, 24 h')}

{sttTX('Les sièges supplémentaires ne sont facturés qu\u2019à l\u2019activation de chaque siège · jamais avant. Chaque siège peut être pris en charge par la structure ou par la personne : vous choisissez à l\u2019invitation. Palier ajustable à tout moment.')}

 ); } // ═══ Étape 3 · APERÇU · la preuve par le résultat (template-led) ═══ function SttPreview({ d }) { const cfg = sttCfg(d.type); const staff = cfg.rows.reduce((s, r) => s + (d.calc[r.k] || 0), 0); const tier = sttTierFor(Math.max(1, staff)); const spaces = [ { ic: 'Room', acc: true, n: 'Room principale', s: 'Toute votre structure, un seul fil', soon: true }, { ic: 'Lock', n: 'Noyau privé', s: 'Votre cercle de direction', soon: true }, ...cfg.poles.slice(1, 4).map((p) => ({ ic: 'Pole', n: sttTX('Pôle ') + sttTX(p), s: sttTX('Espace de travail dédié'), soon: true })), { ic: 'Users', n: sttTX('Talents'), s: sttTX(cfg.talents) + ' · ' + d.ex, r: d.ex }, { ic: 'Link', n: 'Autorisations', s: 'Autorisations vers l\u2019extérieur' }, { ic: 'Vault', acc: true, n: 'Coffre-fort de structure', s: 'Hébergé en Suisse · AES-256' }, ]; return ( {sttTX('APERÇU')}

{sttTX('Votre QG, déjà organisé.')}

{sttTX('Voici votre QG tel qu\u2019il sera · coffre et autorisations dès aujourd\u2019hui, rooms et espaces à la prochaine version.')}

{d.name}{sttTX(d.type)} · {sttTX(d.country)} · {staff} {sttTX('staff')} {tier.id.toUpperCase()}
{spaces.map((s, i) => { const I = SttIco[s.ic]; return (
{sttTX(s.n)}{sttTX(s.s)} {s.soon ? {sttTX('À VENIR')} : null} {s.r ? {s.r} : null}
); })}
{sttTX('Rooms, mur et espaces arrivent à la prochaine version · inclus dans votre palier, sans supplément. Messagerie certifiée, coffre et autorisations fonctionnent dès aujourd’hui.')}
{sttTX('Ce qui se passe ensuite')}
1{sttTX('Votre structure s\u2019active')}{sttTX('Vérifiée, visible sur le Pass ID de votre équipe.')}
2{sttTX('Votre staff arrive')}{sttTX('PassPRO lié : 19,99 au lieu de 29,99 CHF/mois.')}
3{sttTX(cfg.talents) + sttTX(' rejoignent')}{sttTX('Chacun paie son propre Pass · jamais votre facture.')}
4{sttTX('Leur réseau suit')}{sttTX('Agents, clubs, cabinets : chaque arrivée renforce le vôtre.')}
 ); } Object.assign(window, { STT_TIERS, sttTierFor, sttCHF, sttMois, STT_SEAT_M, STT_SEAT_A, sttCfg, sttInit, sttMonoStyle, sttTX, SttIco, SttStepper, SttRule, SttIdentity, SttCalc, SttPreview, STT_ROLE_POLE, STT_COLORS, SttMono, sttPickLogo });