import { useState, useMemo } from "react"; const GLOBAL_CSS = ` @import url('https://fonts.googleapis.com/css2?family=Syne:wght@700;800&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@500;600&display=swap'); *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { background: #060910; } ::-webkit-scrollbar { width: 5px; } ::-webkit-scrollbar-track { background: #0c1220; } ::-webkit-scrollbar-thumb { background: #1e3a5f; border-radius: 99px; } input[type=range] { -webkit-appearance: none; appearance: none; background: transparent; cursor: pointer; } .num-transition { transition: color 0.35s ease, opacity 0.25s ease; } .bar-fill { transition: width 0.5s cubic-bezier(0.4,0,0.2,1), background 0.35s ease; } .card-glow-on { box-shadow: 0 0 0 1.5px rgba(16,185,129,0.35), 0 4px 24px rgba(16,185,129,0.12); transition: box-shadow 0.4s ease; } .card-glow-off { box-shadow: none; transition: box-shadow 0.4s ease; } `; // ─── ROLES ──────────────────────────────────────────────────────────────────── const ROLES = [ { id: "copywriter", label: "Copywriter / Storyteller", icon: "✍️", color: "#8b5cf6", hoursPerWeek: 35 }, { id: "seo", label: "SEO Manager", icon: "📈", color: "#3b82f6", hoursPerWeek: 35 }, { id: "graphiste", label: "Graphiste / Motion", icon: "🖼️", color: "#ec4899", hoursPerWeek: 35 }, { id: "cm", label: "Community Manager", icon: "📱", color: "#f59e0b", hoursPerWeek: 35 }, { id: "publisher", label: "Intégrateur / Publisher", icon: "🌐", color: "#10b981", hoursPerWeek: 35 }, { id: "chef", label: "Chef de projet / Validation",icon: "✅", color: "#64748b", hoursPerWeek: 35 }, ]; // ─── CONTENT TYPES ──────────────────────────────────────────────────────────── const CONTENT_TYPES = [ { id: "blog", label: "Article de blog", icon: "✍️", avgPrice: 280, phases: { production: { brief: { label: "Brief & recherche", h: 0.75, role: "copywriter" }, redaction: { label: "Rédaction", h: 2.00, role: "copywriter" }, images: { label: "Recherche visuels", h: 0.50, role: "graphiste" }, seo: { label: "Optimisation SEO", h: 0.25, role: "seo" }, }, validation: { relecture: { label: "Relecture interne", h: 0.50, role: "chef" }, retours: { label: "Intégration retours client", h: 0.50, role: "chef" }, navette: { label: "Navettes de validation", h: 0.25, role: "chef" }, }, diffusion: { cms: { label: "Mise en forme CMS", h: 0.25, role: "publisher" }, social: { label: "Déclinaison réseaux", h: 0.50, role: "cm" }, newsletter:{ label: "Adaptation newsletter", h: 0.25, role: "cm" }, scheduling:{ label: "Planification & publish", h: 0.25, role: "cm" }, }, }, }, { id: "newsletter", label: "Newsletter", icon: "📨", avgPrice: 180, phases: { production: { brief: { label: "Brief & thème", h: 0.25, role: "copywriter" }, redaction: { label: "Rédaction", h: 1.25, role: "copywriter" }, images: { label: "Visuels & mise en page", h: 0.50, role: "graphiste" }, }, validation: { relecture: { label: "Relecture interne", h: 0.25, role: "chef" }, retours: { label: "Retours client", h: 0.25, role: "chef" }, test: { label: "Test envoi & prévisualisation", h: 0.25, role: "publisher" }, }, diffusion: { segmentation:{ label: "Segmentation liste", h: 0.25, role: "seo" }, scheduling: { label: "Paramétrage & envoi", h: 0.25, role: "cm" }, perf: { label: "Suivi performance", h: 0.25, role: "seo" }, }, }, }, { id: "social", label: "Post réseaux sociaux", icon: "📱", avgPrice: 40, phases: { production: { redaction: { label: "Rédaction du post", h: 0.25, role: "cm" }, visuel: { label: "Création du visuel", h: 0.25, role: "graphiste" }, hashtags: { label: "Hashtags / CTA", h: 0.10, role: "cm" }, }, validation: { relecture: { label: "Validation interne", h: 0.10, role: "chef" }, retours: { label: "Retours client", h: 0.10, role: "chef" }, }, diffusion: { adaptation:{ label: "Adaptation par réseau", h: 0.25, role: "cm" }, scheduling:{ label: "Planification", h: 0.10, role: "cm" }, }, }, }, { id: "site", label: "Page web / site", icon: "🌐", avgPrice: 450, phases: { production: { brief: { label: "Brief éditorial & architecture", h: 1.00, role: "copywriter" }, redaction: { label: "Rédaction copywriting", h: 2.50, role: "copywriter" }, images: { label: "Sélection / création visuels", h: 0.75, role: "graphiste" }, seo: { label: "Balises & méta-données SEO", h: 0.50, role: "seo" }, }, validation: { relecture: { label: "Relecture & cohérence marque", h: 0.75, role: "chef" }, retours: { label: "Retours client (×2 navettes)", h: 1.00, role: "chef" }, }, diffusion: { integration:{ label: "Intégration CMS / page builder",h: 0.50, role: "publisher" }, social: { label: "Extraits réseaux & ads", h: 0.50, role: "cm" }, seo_final: { label: "Indexation & suivi SEO", h: 0.25, role: "seo" }, }, }, }, { id: "other", label: "Autre contenu", icon: "📄", avgPrice: 150, phases: { production: { brief: { label: "Brief", h: 0.25, role: "copywriter" }, redaction: { label: "Rédaction", h: 1.25, role: "copywriter" }, images: { label: "Visuels", h: 0.25, role: "graphiste" }, }, validation: { relecture: { label: "Relecture", h: 0.25, role: "chef" }, retours: { label: "Retours client",h: 0.25, role: "chef" }, }, diffusion: { formatting:{ label: "Mise en forme",h: 0.25, role: "publisher" }, scheduling:{ label: "Publication", h: 0.25, role: "cm" }, }, }, }, ]; const LEVERS = { production: { brief: { gain: 0.70, label: "Alignement marque automatique", color: "#3b82f6", icon: "🎯" }, redaction: { gain: 0.80, label: "Rédaction IA brand-safe", color: "#8b5cf6", icon: "⚡" }, images: { gain: 0.85, label: "Génération d'images intégrée", color: "#ec4899", icon: "🖼️" }, seo: { gain: 0.75, label: "SEO automatisé", color: "#10b981", icon: "📈" }, hashtags: { gain: 0.80, label: "Suggestions IA", color: "#3b82f6", icon: "⚡" }, visuel: { gain: 0.85, label: "Génération d'images intégrée", color: "#ec4899", icon: "🖼️" }, }, validation: { relecture: { gain: 0.60, label: "Rédaction parfaite immédiate", color: "#8b5cf6", icon: "✅" }, retours: { gain: 0.65, label: "Moins de navettes client", color: "#f59e0b", icon: "🔁" }, navette: { gain: 0.70, label: "Validation facilitée", color: "#f59e0b", icon: "🔁" }, test: { gain: 0.40, label: "Prévisualisation intégrée", color: "#3b82f6", icon: "👁️" }, }, diffusion: { cms: { gain: 0.70, label: "Formatage automatique", color: "#10b981", icon: "📤" }, formatting: { gain: 0.70, label: "Formatage automatique", color: "#10b981", icon: "📤" }, social: { gain: 0.90, label: "Déclinaison multicanal auto", color: "#ec4899", icon: "📡" }, newsletter: { gain: 0.90, label: "Déclinaison multicanal auto", color: "#ec4899", icon: "📡" }, scheduling: { gain: 0.50, label: "Planification assistée", color: "#3b82f6", icon: "📅" }, adaptation: { gain: 0.90, label: "Déclinaison multicanal auto", color: "#ec4899", icon: "📡" }, perf: { gain: 0.30, label: "Tableaux de bord intégrés", color: "#3b82f6", icon: "📊" }, segmentation:{ gain: 0.50, label: "Ciblage assisté", color: "#f59e0b", icon: "🎯" }, integration: { gain: 0.60, label: "Export structuré", color: "#10b981", icon: "📤" }, seo_final: { gain: 0.70, label: "SEO automatisé", color: "#10b981", icon: "📈" }, }, }; const PHASE_META = { production: { label: "Production", color: "#8b5cf6", bg: "rgba(139,92,246,0.08)", border: "rgba(139,92,246,0.2)" }, validation: { label: "Validation", color: "#f59e0b", bg: "rgba(245,158,11,0.08)", border: "rgba(245,158,11,0.2)" }, diffusion: { label: "Diffusion", color: "#10b981", bg: "rgba(16,185,129,0.08)", border: "rgba(16,185,129,0.2)" }, }; // Forfaits clients SaaS (achetés par les clients via l'agence) const CLIENT_PLANS = [ { id: "basic", label: "Basic", price: 29, color: "#3b82f6", desc: "Accès essentiel · client autonome sur les bases", autonomy: 0.40, // fraction du travail contenu pris en charge par le client features: ["Rédaction IA", "3 canaux", "50 crédits/mois"], }, { id: "essentiel", label: "Essentiel", price: 79, color: "#8b5cf6", desc: "Autonomie avancée · visuels et multicanal inclus", autonomy: 0.65, features: ["Tout Basic", "Visuels IA", "Déclinaison multicanal", "150 crédits/mois"], }, { id: "pro", label: "Pro", price: 129, color: "#10b981", desc: "Autonomie complète · brand kit + images illimitées", autonomy: 0.85, features: ["Tout Essentiel", "Brand Kit complet", "Images illimitées", "400 crédits/mois"], }, ]; const TDC_COMM = 0.20; // commission TDC sur revenus SaaS const AGENCY_MARGIN_SAAS = 0.30; // marge agence sur revente licences const BRAND_BONUS = 0.12; const SUB_COST = 199; // abonnement agence mode prestation const WEEKS_PER_MONTH= 4.33; const BUFFER = 0.80; const fmt = (n) => new Intl.NumberFormat("fr-FR", { style: "currency", currency: "EUR", maximumFractionDigits: 0 }).format(n); const fmtH = (h) => h === 0 ? "0h" : h < 1 ? `${Math.round(h * 60)}min` : `${h % 1 === 0 ? h : h.toFixed(1)}h`; function taskGain(phase, key, on) { return on ? (LEVERS[phase]?.[key]?.gain ?? 0) : 0; } function phaseTotal(ct, phase) { return Object.values(ct.phases[phase]).reduce((s, t) => s + t.h, 0); } function phaseTotalWith(ct, phase, on) { return Object.entries(ct.phases[phase]).reduce((s, [key, t]) => { return s + t.h * (1 - taskGain(phase, key, on)); }, 0); } function roleHoursForContent(ct, on) { const load = {}; ROLES.forEach(r => { load[r.id] = 0; }); ["production","validation","diffusion"].forEach(phase => { Object.entries(ct.phases[phase]).forEach(([key, task]) => { const g = taskGain(phase, key, on); load[task.role] = (load[task.role] || 0) + task.h * (1 - g); }); }); return load; } // ─── TOGGLE COMPONENT ───────────────────────────────────────────────────────── function ContentsToggle({ on, setOn }) { return ( ); } // ─── ANIMATED NUMBER ────────────────────────────────────────────────────────── function Num({ value, color, size = "14px", bold = true, mono = true }) { return ( {value} ); } // ─── PROGRESS BAR ───────────────────────────────────────────────────────────── function Bar({ pct, color, height = "6px", bg = "#1a2744" }) { return (
); } // ─── SMALL UI ───────────────────────────────────────────────────────────────── function Pill({ color, children }) { return ( {children} ); } function Slider({ label, value, min, max, step = 1, onChange, suffix = "" }) { const p = ((value - min) / (max - min)) * 100; return (
{label} {value}{suffix}
onChange(Number(e.target.value))} style={{ position: "absolute", inset: 0, width: "100%", height: "100%", opacity: 0, cursor: "pointer", margin: 0 }} />
); } function Counter({ type, value, onChange, on }) { // Temps unitaire sans et avec Contentz const hWithout = ["production","validation","diffusion"].reduce((s, p) => s + phaseTotal(type, p), 0); const hWith = ["production","validation","diffusion"].reduce((s, p) => s + phaseTotalWith(type, p, true), 0); const pctGain = hWithout > 0 ? Math.round((hWithout - hWith) / hWithout * 100) : 0; return (
{/* Ligne principale */}
{type.icon} {type.label}
{value}
{/* Ligne temps */}
Durée
{/* Sans Contentz */}
sans {fmtH(hWithout)}
{/* Flèche */} → {/* Avec Contentz */}
avec {fmtH(hWith)}
{/* Badge gain */} −{pctGain}%
); } // ─── CONTENT CARD (accordéon) ───────────────────────────────────────────────── function ContentCard({ ct, qty, clients, hourlyRate, on }) { const [open, setOpen] = useState(false); if (qty === 0) return null; const total = qty * clients; const hUnit = (active) => ["production","validation","diffusion"].reduce((s, p) => s + phaseTotalWith(ct, p, active), 0); const hU0 = hUnit(false); const hUOn = hUnit(on); const costU0 = hU0 * hourlyRate; const costUOn = hUOn * hourlyRate; const marginU0 = ct.avgPrice - costU0; const marginUOn = ct.avgPrice - costUOn; const hTot0 = hU0 * total; const hTotOn = hUOn * total; const hSaved = hTot0 - hTotOn; const pctSav = hTot0 > 0 ? (hTot0 - hTotOn) / hTot0 : 0; const phases = ["production","validation","diffusion"].map(p => ({ p, meta: PHASE_META[p], hB: phaseTotal(ct, p) * total, hA: phaseTotalWith(ct, p, on) * total, })); return (
{open && (
{/* Bloc coût unitaire comparatif */}
Coût de revient · par contenu unitaire
{/* Tableau phases */}
Phase
Heures
Coût
{["production","validation","diffusion"].map(p => { const meta = PHASE_META[p]; const hRef = phaseTotal(ct, p); const hNow = phaseTotalWith(ct, p, on); const saved = hRef - hNow; return [
{meta.label}
,
{on && saved > 0 &&
−{fmtH(saved)} ({Math.round((saved/hRef)*100)}%)
}
,
{on &&
{fmtH(hRef)}
}
,
{on &&
{fmt(hRef * hourlyRate)}
}
, ]; })}
{/* Synthèse 3 cases */}
Coût de revient
{on &&
{fmt(costU0)}
} {on &&
−{fmt(costU0 - costUOn)}
}
Marge brute
{on &&
sans : {fmt(Math.max(0, marginU0))}
}
{Math.max(0, Math.round((on ? marginUOn : marginU0) / ct.avgPrice * 100))}% du prix
Gain de marge
Prix de vente : {fmt(ct.avgPrice)}
{/* Tâches par phase */} {["production","validation","diffusion"].map(phase => { const meta = PHASE_META[phase]; const tasks = ct.phases[phase]; const hBef = phaseTotal(ct, phase) * total; const hAft = phaseTotalWith(ct, phase, on) * total; const saved = hBef - hAft; return (
{meta.label}
total : {fmtH(hBef)} {on && saved > 0 && → {fmtH(hAft)} (−{fmtH(saved)})}
{Object.entries(tasks).map(([key, task], i, arr) => { const role = ROLES.find(r => r.id === task.role); const lever = LEVERS[phase]?.[key]; const g = taskGain(phase, key, on); const hB = task.h * total; const hA = hB * (1 - g); return (
{task.label} {role && {role.icon} {role.label}}
{on && lever ? {lever.icon} {lever.label} : !on && Aucun levier actif}
0 ? meta.color : "#334155", minWidth: "30px" }}> {on && g > 0 ? `−${Math.round(g * 100)}%` : "—"}
{fmtH(hB)} {on && hB - hA > 0 && <> → {fmtH(hA)}}
); })}
); })}
)}
); } // ─── TEAM CAPACITY ──────────────────────────────────────────────────────────── function TeamCapacity({ teamSizes, volumes, clients, hourlyRate, avgRevenuePerClient, on }) { const roleLoad = useMemo(() => { const load = {}; ROLES.forEach(r => { load[r.id] = 0; }); CONTENT_TYPES.forEach(ct => { const qty = volumes[ct.id] || 0; if (!qty) return; const total = qty * clients; const rl = roleHoursForContent(ct, on); ROLES.forEach(r => { load[r.id] += (rl[r.id] || 0) * total; }); }); return load; }, [volumes, clients, on]); const roleCap = (id) => { const n = teamSizes[id] || 0; const r = ROLES.find(x => x.id === id); return n * r.hoursPerWeek * WEEKS_PER_MONTH * BUFFER; }; // Sans Contentz (toujours calculé pour comparer) const roleLoadRef = useMemo(() => { const load = {}; ROLES.forEach(r => { load[r.id] = 0; }); CONTENT_TYPES.forEach(ct => { const qty = volumes[ct.id] || 0; if (!qty) return; const total = qty * clients; const rl = roleHoursForContent(ct, false); ROLES.forEach(r => { load[r.id] += (rl[r.id] || 0) * total; }); }); return load; }, [volumes, clients]); const bottleneck = ROLES.reduce((worst, r) => { const cap = roleCap(r.id); if (cap === 0) return worst; const ratio = roleLoad[r.id] / cap; return ratio > worst.ratio ? { id: r.id, ratio } : worst; }, { id: null, ratio: 0 }); const additionalClients = (() => { const vals = ROLES .filter(r => (teamSizes[r.id] || 0) > 0) .map(r => { const cap = roleCap(r.id); const remain = cap - roleLoad[r.id]; const perCli = roleLoad[r.id] / (clients || 1); return perCli > 0 ? Math.floor(remain / perCli) : 999; }); return vals.length ? Math.max(0, Math.min(...vals)) : 0; })(); const potentialCA = additionalClients * avgRevenuePerClient; const barColor = (r) => r > 1 ? "#ef4444" : r > 0.85 ? "#f59e0b" : "#10b981"; return (
{/* Tableau */}
Charge équipe · {on ? "Avec Contentz activé" : "Sans Contentz"}
{clients} clients · capacité utilisable {Math.round(BUFFER * 100)}% · {WEEKS_PER_MONTH.toFixed(1)} sem/mois
{["Rôle","ETP","Cap. mensuelle","Charge","Taux de charge","Libéré vs réf.","Clients +"].map((h, i) => ( ))} {ROLES.map((role, idx) => { const n = teamSizes[role.id] || 0; const cap = roleCap(role.id); const load = roleLoad[role.id] || 0; const loadRef = roleLoadRef[role.id] || 0; const ratio = cap > 0 ? load / cap : 0; const freed = loadRef - load; const loadPerCli = load / (clients || 1); const remain = cap - load; const addCli = n > 0 && loadPerCli > 0 ? Math.max(0, Math.floor(remain / loadPerCli)) : 0; const isOver = ratio > 1; return ( ); })}
{h}
{role.icon}
0 ? "#e2e8f0" : "#475569" }}>{role.label}
{role.hoursPerWeek}h/sem
 0 ? n : "—"} color={n > 0 ? "#e2e8f0" : "#334155"} size="13px" /> 0 ? fmtH(cap) : "—"} color="#64748b" size="12px" bold={false} /> 0 ? fmtH(load) : "—"} color={n > 0 ? (isOver ? "#ef4444" : on ? "#10b981" : "#94a3b8") : "#334155"} size="12px" /> {n > 0 ? (
{isOver &&
⚠ Surcharge
}
) : —} 		{on && n > 0 && freed > 0 ? : —} {n > 0 ? 0 ? `+${addCli}` : "complet"} color={addCli > 0 ? "#3b82f6" : "#334155"} size="13px" /> : —}
{/* 3 cards */}
{/* Goulot */}
1 ? "rgba(239,68,68,0.07)" : "rgba(16,185,129,0.07)", border: `1px solid ${bottleneck.ratio > 1 ? "rgba(239,68,68,0.2)" : "rgba(16,185,129,0.2)"}`, borderRadius: "14px", padding: "16px", transition: "all 0.35s" }}>
1 ? "#ef4444" : "#10b981", fontWeight: "700", textTransform: "uppercase", letterSpacing: "0.08em", marginBottom: "10px" }}> {bottleneck.ratio > 1 ? "⚠ Surcharge" : "✅ Équipe OK"}
{bottleneck.id ? ( <>
Rôle le plus chargé
{ROLES.find(r => r.id === bottleneck.id)?.icon} {ROLES.find(r => r.id === bottleneck.id)?.label}
de la capacité utilisée
) :
Configurez l'équipe
}
{/* Heures libérées si on */}
⏱ Heures équipe libérées
{ROLES.filter(r => (teamSizes[r.id] || 0) > 0).map(r => { const freed = (roleLoadRef[r.id] || 0) - (roleLoad[r.id] || 0); return (
{r.icon} {r.label.split("/")[0].trim()}
0 ? `−${fmtH(freed)}` : fmtH(roleLoad[r.id])} color={on && freed > 0 ? "#10b981" : "#64748b"} size="12px" />
); })}
{/* Potentiel */}
🚀 Potentiel
Clients supplémentaires
avec la même équipe
CA additionnel / mois
{on && potentialCA > 0 &&
{fmt(potentialCA * 12)} / an
}
{/* Narratif */} {on && additionalClients > 0 && (
💡 Ce que Contentz rend possible :{" "} avec la même équipe, vous pouvez absorber{" "} {additionalClients} client{additionalClients > 1 ? "s" : ""} supplémentaire{additionalClients > 1 ? "s" : ""} sans recruter — soit {fmt(potentialCA)}/mois de CA additionnel,{" "} {fmt(potentialCA * 12)}/an,{" "} uniquement grâce aux heures libérées sur la production, la validation et la diffusion.
)} {!on && (
👆 Activez Contentz pour voir combien de clients supplémentaires votre équipe peut absorber
)}
); } // ─── MAIN ───────────────────────────────────────────────────────────────────── export default function App() { const [on, setOn] = useState(false); const [activeTab, setActiveTab] = useState("simulator"); const [mode, setMode] = useState("agency"); const [contentClients, setContentClients]= useState(10); const [hourlyRate, setHourlyRate] = useState(75); const [volumes, setVolumes] = useState({ blog: 4, newsletter: 4, social: 20, site: 1, other: 2 }); // SaaS : nombre de clients ayant souscrit un forfait (pas forcément tous) const [saasClients, setSaasClients] = useState(6); // nb clients sur un forfait SaaS // SaaS plan split state (% parmi les clients SaaS, somme = 100) const [planSplit, setPlanSplit] = useState({ basic: 25, essentiel: 25, pro: 50 }); const [teamSizes, setTeamSizes] = useState({ copywriter: 1, seo: 1, graphiste: 1, cm: 1, publisher: 1, chef: 1 }); const updVol = (id, v) => setVolumes(p => ({ ...p, [id]: Math.max(0, v) })); const updTeam = (id, v) => setTeamSizes(p => ({ ...p, [id]: Math.max(0, v) })); const updSplit = (id, val) => { setPlanSplit(prev => { const others = CLIENT_PLANS.filter(p => p.id !== id); const clamped = Math.max(0, Math.min(100, val)); const remaining = 100 - clamped; const otherTotal = others.reduce((s, p) => s + (prev[p.id] || 0), 0); const updated = { ...prev, [id]: clamped }; if (otherTotal > 0) { others.forEach(p => { updated[p.id] = Math.round((prev[p.id] || 0) / otherTotal * remaining); }); } else { const each = Math.floor(remaining / others.length); others.forEach(p => { updated[p.id] = each; }); } return updated; }); }; const avgRevenuePerClient = useMemo(() => CONTENT_TYPES.reduce((s, ct) => s + (volumes[ct.id] || 0) * ct.avgPrice, 0) , [volumes]); // Totaux globaux selon toggle const { hTot, moneyTime, moneyBrand } = useMemo(() => { let hT = 0; CONTENT_TYPES.forEach(ct => { const tot = (volumes[ct.id] || 0) * contentClients; ["production","validation","diffusion"].forEach(p => { hT += phaseTotalWith(ct, p, on) * tot; }); }); const hRef = (() => { let r = 0; CONTENT_TYPES.forEach(ct => { const tot = (volumes[ct.id] || 0) * contentClients; ["production","validation","diffusion"].forEach(p => { r += phaseTotal(ct, p) * tot; }); }); return r; })(); const totalRev = CONTENT_TYPES.reduce((s, ct) => s + (volumes[ct.id] || 0) * ct.avgPrice * contentClients, 0); return { hTot: hT, hRef, moneyTime: (hRef - hT) * hourlyRate, moneyBrand: on ? totalRev * BRAND_BONUS : 0 }; }, [volumes, contentClients, hourlyRate, on]); const hRef = useMemo(() => { let r = 0; CONTENT_TYPES.forEach(ct => { const tot = (volumes[ct.id] || 0) * contentClients; ["production","validation","diffusion"].forEach(p => { r += phaseTotal(ct, p) * tot; }); }); return r; }, [volumes, contentClients]); const hSaved = hRef - hTot; const pctSav = hRef > 0 ? hSaved / hRef : 0; const agencyNet = moneyTime + moneyBrand - (on ? SUB_COST : 0); // ── Calculs SaaS multi-forfaits ── // Logique : un client SaaS est autonome avec Contentz → l'agence ne produit PLUS son contenu. // Temps libéré = charge totale de ces clients (hRefPerClient × nSaas). // L'agence garde ces clients en portefeuille mais la production est supprimée. // (On peut prévoir un temps de conseil marginal, ici non factorisé — il reste dans la marge.) const saasMemo = useMemo(() => { const nSaas = Math.min(saasClients, contentClients); const nNonSaas = contentClients - nSaas; // Répartition par forfait (parmi les nSaas clients) const planClients = CLIENT_PLANS.map(p => ({ ...p, n: Math.round(nSaas * (planSplit[p.id] || 0) / 100), })); const mrrByPlan = planClients.map(p => ({ ...p, mrr: p.n * p.price })); const totalMrr = mrrByPlan.reduce((s, p) => s + p.mrr, 0); const tdcLicense = totalMrr * TDC_COMM; const agencyLic = totalMrr * AGENCY_MARGIN_SAAS; // Charge par client (basée sur hRef qui inclut déjà tous les clients) const hRefPerClient = contentClients > 0 ? hRef / contentClients : 0; // Clients SaaS : leur production est intégralement supprimée de la charge agence const hRefSaas = hRefPerClient * nSaas; // ce qui était produit pour eux const hRefNonSaas = hRefPerClient * nNonSaas; // ce qui reste (prestation normale) // Temps libéré = 100% de la charge de production des clients SaaS const hTeamSaved = hRefSaas; const moneyTeamSaved = hTeamSaved * hourlyRate; // Charge totale agence en mode SaaS = uniquement les clients non-SaaS const hTotalSaasMode = hRefNonSaas; const hSavedSaasMode = hRef - hTotalSaasMode; // = hRefSaas // Crédits additionnels (20% du MRR) const extraCredits = totalMrr * 0.20; const tdcCredits = extraCredits * TDC_COMM; const agencyCredits = extraCredits * AGENCY_MARGIN_SAAS; return { nSaas, nNonSaas, planClients, mrrByPlan, totalMrr, tdcLicense, agencyLic, hRefPerClient, hRefSaas, hRefNonSaas, hTeamSaved, hTotalSaasMode, hSavedSaasMode, moneyTeamSaved, extraCredits, tdcCredits, agencyCredits, tdcTotal: tdcLicense + tdcCredits, agencyTotal: agencyLic + agencyCredits, }; }, [saasClients, contentClients, planSplit, hRef, hourlyRate]); const globalPhases = ["production","validation","diffusion"].map(ph => { let hB = 0, hA = 0; CONTENT_TYPES.forEach(ct => { const tot = (volumes[ct.id] || 0) * contentClients; hB += phaseTotal(ct, ph) * tot; hA += phaseTotalWith(ct, ph, on) * tot; }); return { ph, meta: PHASE_META[ph], hB, hA, saved: hB - hA }; }); const TABS = [ { id: "simulator", label: "📊 Simulateur", sub: "Contenus & ROI" }, { id: "team", label: "👥 Équipe & Capacité", sub: "Charge & potentiel" }, ]; return ( <>
{/* ── HEADER ── */}
Simulateur ROI · Agences

Ce que Contentz libère,
tâche par tâche · rôle par rôle

Activez le toggle pour voir l'impact en temps réel sur chaque chiffre

{/* ── TOGGLE BARRE STICKY ── */}
{/* Résumé flash */} {on ? (
{[ { l: "Heures libérées", v: fmtH(hSaved), c: "#10b981" }, { l: "Gain temps (€)", v: fmt(moneyTime), c: "#10b981" }, { l: "Bonus marque", v: fmt(moneyBrand), c: "#8b5cf6" }, { l: "Gain net/mois", v: fmt(agencyNet), c: "#3b82f6" }, ].map(k => (
{k.l}
))}
) : (
Activez Contentz pour voir l'impact sur tous les chiffres →
)} {/* Mode + Tabs */}
{[{ id: "agency", label: "🏢 Prestation" }, { id: "saas", label: "🔑 SaaS" }].map(m => ( ))}
{TABS.map(t => ( ))}
{/* ── MAIN GRID ── */}
{/* SIDEBAR */}
Paramètres
Contenus / client / mois
CA/client : {fmt(avgRevenuePerClient)}
{CONTENT_TYPES.map(ct => updVol(ct.id, v)} on={on} />)}
Équipe
Nombre de personnes par rôle
{ROLES.map(role => (
{role.icon}
{role.label}
{role.hoursPerWeek}h/sem
{teamSizes[role.id] || 0}
))}
{mode === "saas" && (
Forfaits clients SaaS
{/* Slider : combien de clients ont souscrit */}
Clients ayant souscrit un forfait {saasClients} / {contentClients}
0 ? (saasClients / contentClients) * 100 : 0}%`, background: "linear-gradient(90deg, #1d4ed8, #8b5cf6)", borderRadius: "99px" }} /> setSaasClients(Number(e.target.value))} style={{ position: "absolute", inset: 0, width: "100%", height: "100%", opacity: 0, cursor: "pointer", margin: 0 }} />
{saasMemo.nNonSaas} client{saasMemo.nNonSaas !== 1 ? "s" : ""} en prestation normale {saasMemo.nSaas} en SaaS autonome
Répartition des {saasMemo.nSaas} clients SaaS par forfait
{CLIENT_PLANS.map(p => { const pct = planSplit[p.id] || 0; const pc = saasMemo.planClients.find(x => x.id === p.id); const n = pc ? pc.n : 0; return (
{p.label} · {p.price}€/m
{p.desc}
{pct}%
{n} client{n > 1 ? "s" : ""}
{/* Autonomie fixe 80% Contentz */}
Autonomie client avec Contentz 80%
{/* Slider % clients */}
% de vos clients {pct}%
updSplit(p.id, Number(e.target.value))} style={{ position: "absolute", inset: 0, width: "100%", height: "100%", opacity: 0, cursor: "pointer", margin: 0 }} />
{p.features.map(f => ( {f} ))}
); })} {/* Résumé répartition */}
{CLIENT_PLANS.map(p => (
))}
{CLIENT_PLANS.map(p => (
{p.label}
{planSplit[p.id] || 0}%
))}
Autonomie moy.
80%
{/* Commission TDC */}
Reversement sur licences & crédits
Marge agence 30%
Commission TDC 20%
)}
{/* CONTENT */}
{/* ─── SIMULATEUR ─── */} {activeTab === "simulator" && ( <> {/* Synthèse globale */}
Vue globale · {on ? "Avec Contentz" : "Sans Contentz"}
{/* Barre principale */}
Référence : {fmtH(hRef)} Actuel :
{on &&
{Math.round(pctSav * 100)}% libéré · {fmtH(hSaved)}/mois
}
{/* 3 phases */}
{globalPhases.map(({ ph, meta, hB, hA, saved }) => (
{meta.label}
{on ? <>{fmtH(hB)} → : ""}
{on &&
{hB > 0 ? Math.round((saved / hB) * 100) : 0}% gagné
}
))}
{/* KPIs */} {mode === "agency" ? (
{[ { l: "Heures libérées", v: on ? fmtH(hSaved) : "—", c: on ? "#10b981" : "#334155" }, { l: "Valeur du temps", v: on ? fmt(moneyTime) : "—", c: on ? "#10b981" : "#334155" }, { l: "Bonus qualité marque", v: on ? fmt(moneyBrand) : "—", c: on ? "#8b5cf6" : "#334155" }, { l: "Gain net mensuel", v: on ? fmt(agencyNet) : "—", c: on ? "#3b82f6" : "#334155", big: true }, ].map(k => (
{k.l}
))}
) : (
{[ { l: "MRR licences", v: on ? fmt(saasMemo.totalMrr) : "—", c: "#64748b" }, { l: "Marge agence/mois", v: on ? fmt(saasMemo.agencyTotal) : "—", c: on ? "#3b82f6" : "#334155" }, { l: "Temps libéré équipe", v: on ? fmt(saasMemo.moneyTeamSaved) : "—", c: on ? "#10b981" : "#334155" }, { l: "Revenu total agence/m", v: on ? fmt(saasMemo.agencyTotal + saasMemo.moneyTeamSaved) : "—", c: on ? "#a855f7" : "#334155", big: true }, ].map(k => (
{k.l}
))}
)}
{/* Accordéons */}
Détail par type de contenu · cliquer pour déplier
{CONTENT_TYPES.map(ct => )} {/* Bilan Prestation */} {mode === "agency" && on && (
Bilan mensuel · prestation interne
{[ { l: "⏱ Économie de temps (heures × taux horaire)", v: moneyTime, c: "#10b981", plus: true }, { l: "🎯 Bonus qualité — alignement marque (+12%)", v: moneyBrand, c: "#8b5cf6", plus: true }, { l: "📋 Abonnement Contentz agence", v: -SUB_COST, c: "#ef4444", plus: false }, ].map(r => (
{r.l}
))}
Gain net mensuel
ROI ×{((agencyNet + SUB_COST) / SUB_COST).toFixed(1)} · payback immédiat
)} {/* ── BILAN SAAS COMPLET ── */} {mode === "saas" && (
{/* Répartition par forfait */}
🔑 Revenus licences · par forfait
{/* Barre stacked */}
{CLIENT_PLANS.map(p => (
{(planSplit[p.id] || 0) > 10 ? p.label : ""}
))}
{/* Tableau forfaits */}
{saasMemo.mrrByPlan.map(p => (
{p.label} {p.price}€/m
{p.n} client{p.n > 1 ? "s" : ""} · {planSplit[p.id] || 0}%
{on ? fmt(p.mrr) : "—"}
Autonomie : 80%
))}
{/* Ligne revenus licences */} {[ { l: "💼 Marge agence · licences (30%)", v: saasMemo.agencyLic, c: "#3b82f6" }, { l: "💼 Marge agence · crédits (30%)", v: saasMemo.agencyCredits, c: "#3b82f6" }, { l: "⚡ Commission TDC · licences (20%)", v: saasMemo.tdcLicense, c: "#8b5cf6" }, { l: "⚡ Commission TDC · crédits (20%)", v: saasMemo.tdcCredits, c: "#8b5cf6" }, ].map(r => (
{r.l}
))}
{/* Temps libéré équipe — logique autonomie complète */}
⏱ Charge libérée · clients autonomes
Un client avec un forfait Contentz est autonome : il produit lui-même ses contenus. Il ne compte plus dans la charge de production de l'équipe agence. Le temps libéré = la totalité du travail qui lui était consacré.
{/* Vue avant/après */}
{[ { l: "Charge totale prestation", v: fmtH(hRef), c: "#64748b", sub: `${contentClients} clients` }, { l: "Clients SaaS supprimés", v: on ? `−${fmtH(saasMemo.hTeamSaved)}` : "—", c: "#10b981", sub: `${saasMemo.nSaas} client${saasMemo.nSaas !== 1 ? "s" : ""} autonomes` }, { l: "Charge agence restante", v: on ? fmtH(saasMemo.hTotalSaasMode) : fmtH(hRef), c: on ? "#10b981" : "#94a3b8", sub: `${saasMemo.nNonSaas} clients prestation` }, ].map(k => (
{k.l}
{k.sub}
))}
{/* Barre de charge */}
Charge de référence : {fmtH(hRef)} ({contentClients} clients) {on && −{fmtH(saasMemo.hTeamSaved)} supprimées}
0 ? `${(saasMemo.hTotalSaasMode / hRef) * 100}%` : "100%", background: "linear-gradient(90deg, #1d4ed8, #7c3aed)", borderRadius: "99px", display: "flex", alignItems: "center", justifyContent: "center", fontSize: "9px", fontWeight: "700", color: "#fff" }}> {on && saasMemo.nNonSaas > 0 ? `${saasMemo.nNonSaas} prestation` : ""}
{on && saasMemo.nSaas > 0 && (
{saasMemo.nSaas} SaaS ✓
)}
{on && (
Charge agence : {fmtH(saasMemo.hTotalSaasMode)} Libéré : {fmtH(saasMemo.hTeamSaved)} ({hRef > 0 ? Math.round((saasMemo.hTeamSaved/hRef)*100) : 0}%)
)}
{/* Détail par client SaaS */}
Décomposition · charge agence en mode SaaS
{[ { l: `${saasMemo.nNonSaas} client${saasMemo.nNonSaas !== 1 ? "s" : ""} en prestation normale`, v: fmtH(saasMemo.hRefNonSaas), c: "#64748b" }, { l: `${saasMemo.nSaas} client${saasMemo.nSaas !== 1 ? "s" : ""} SaaS autonomes (charge supprimée)`, v: on ? `−${fmtH(saasMemo.hTeamSaved)}` : fmtH(saasMemo.hRefSaas), c: on ? "#10b981" : "#475569" }, ].map(r => (
{r.l}
))}
Charge totale agence / mois
{on &&
{fmtH(hRef)}
}
{on &&
−{fmtH(saasMemo.hSavedSaasMode)} vs mode prestation pure
}
💰 Valeur du temps libéré équipe
À {hourlyRate}€/h · {on ? fmtH(saasMemo.hTeamSaved) : "—"} libérées
{/* Synthèse finale SaaS */}
📊 Synthèse mensuelle · Mode SaaS
{[ { l: "💼 Marge licences agence (30%)", v: saasMemo.agencyLic, c: "#3b82f6", plus: true }, { l: "💳 Marge crédits agence (30%)", v: saasMemo.agencyCredits, c: "#3b82f6", plus: true }, { l: "⏱ Charge libérée · clients autonomes", v: saasMemo.moneyTeamSaved, c: "#10b981", plus: true }, { l: "⚡ Commission TDC (licences + crédits)", v: -(saasMemo.tdcTotal), c: "#8b5cf6", plus: false }, ].map(r => (
{r.l}
))}
Revenu total agence / mois
Licences + crédits + temps libéré
Commission TDC / mois
{on ? fmt(saasMemo.tdcTotal * 12) + " / an" : "—"}
{on && (
💡 Le modèle SaaS génère deux types de valeur :{" "} {fmt(saasMemo.agencyTotal)}/mois de revenus récurrents sur les licences et crédits, plus {fmt(saasMemo.moneyTeamSaved)}/mois de charge équipe supprimée — les {saasMemo.nSaas} client{saasMemo.nSaas !== 1 ? "s" : ""} SaaS sont autonomes avec Contentz et ne comptent plus dans la production de l'équipe. Soit {fmt((saasMemo.agencyTotal + saasMemo.moneyTeamSaved) * 12)}/an de valeur totale créée.
)}
)} )} {/* ─── ÉQUIPE ─── */} {activeTab === "team" && ( )}
Simulation indicative · valeurs moyennes constatées · Contentz by TDC · {new Date().getFullYear()}
); }