import React, { useState, useMemo, useEffect, useRef } from "react"; import { AreaChart, Area, LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, ReferenceLine, ReferenceDot, } from "recharts"; import { Megaphone, Sprout, ArrowRight } from "lucide-react"; /* ------------------------------------------------------------------ * * Calculateur SEO vs Google Ads — « actif vs dépense » * Refmax — outil gratuit, 100% client-side, zéro donnée collectée. * Charte β-1 : navy #142e4f (territoire/actif), orange #ff4e44 (dépense), * vert #009d78 (croissance saine), Onest (titres) + JetBrains Mono (chiffres). * ------------------------------------------------------------------ */ const C = { white: "#ffffff", dark: "#1d1b2d", body: "#665f78", green: "#009d78", greenLight: "#e4fff9", cream: "#fff9e3", orange: "#ff4e44", blue: "#142e4f", blueLight: "#dce5f0", line: "#e8e8f0", }; const eur = (n) => new Intl.NumberFormat("fr-FR", { style: "currency", currency: "EUR", maximumFractionDigits: 0 }) .format(Math.round(n)); const num = (n) => new Intl.NumberFormat("fr-FR", { maximumFractionDigits: 0 }).format(Math.round(n)); /* count-up doux pour les chiffres clés */ function useCountUp(target, dur = 650) { const [v, setV] = useState(target); const from = useRef(target); useEffect(() => { const start = from.current, t0 = performance.now(); let raf; const tick = (t) => { const p = Math.min((t - t0) / dur, 1); const e = 1 - Math.pow(1 - p, 3); setV(start + (target - start) * e); if (p < 1) raf = requestAnimationFrame(tick); else from.current = target; }; raf = requestAnimationFrame(tick); return () => cancelAnimationFrame(raf); }, [target, dur]); return v; } function Control({ label, hint, value, set, min, max, step, unit, fmt }) { return (

{label} {hint && {hint}}

{ const raw = e.target.value === "" ? min : parseFloat(e.target.value); set(Math.min(max, Math.max(min, isNaN(raw) ? min : raw))); }} /> {unit}

set(parseFloat(e.target.value))} />

); } export default function CalculateurSeoVsAds() { const [adsBudget, setAdsBudget] = useState(1500); const [cpc, setCpc] = useState(2.5); const [seoBuild, setSeoBuild] = useState(1800); const [rampMonths, setRampMonths] = useState(12); const [seoMaint, setSeoMaint] = useState(400); const [horizon, setHorizon] = useState(36); const [countOpp, setCountOpp] = useState(false); const [visitValue, setVisitValue] = useState(2.5); const model = useMemo(() => { const adVisits = cpc > 0 ? adsBudget / cpc : 0; const target = adVisits; // viser la même visibilité que les pubs const months = []; let cumOpp = 0; for (let m = 1; m <= horizon; m++) { const cumAds = adsBudget * m; const cumSeo = m <= rampMonths ? seoBuild * m : seoBuild * rampMonths + seoMaint * (m - rampMonths); const t = Math.min(m / Math.max(rampMonths, 1), 1); const f = t * t * (3 - 2 * t); // smoothstep : départ lent, accélération, plateau const sv = target * f; cumOpp += Math.max(0, adVisits - sv) * visitValue; // trafic non capté pendant la rampe months.push({ m, cumAds, cumSeo, cumOpp, cumSeoTotal: cumSeo + cumOpp, adVisits: Math.round(adVisits), seoVisits: Math.round(sv), }); } const seoKey = countOpp ? "cumSeoTotal" : "cumSeo"; let crossover = null; for (const r of months) { if (r.cumAds >= r[seoKey]) { crossover = r.m; break; } } const last = months[months.length - 1] || { cumAds: 0, cumSeo: 0, cumSeoTotal: 0, cumOpp: 0 }; const savings = last.cumAds - last[seoKey]; const annualYield = adVisits * cpc * 12 - seoMaint * 12; // location évitée / an à maturité return { months, crossover, savings, adVisits, target, annualYield, seoKey, oppTotal: last.cumOpp }; }, [adsBudget, cpc, seoBuild, rampMonths, seoMaint, horizon, countOpp, visitValue]); const savingsAnim = useCountUp(Math.max(0, model.savings)); const hasCross = model.crossover && model.crossover <= horizon; const CostTip = ({ active, payload, label }) => { if (!active || !payload?.length) return null; const ads = payload.find((p) => p.dataKey === "cumAds")?.value ?? 0; const seo = payload.find((p) => p.dataKey === "cumSeo")?.value ?? 0; const tot = payload.find((p) => p.dataKey === "cumSeoTotal")?.value ?? null; return (

Mois {label}

Pubs : {eur(ads)}

SEO cash : {eur(seo)}

{countOpp && tot != null && (

SEO + opp. : {eur(tot)}

)}

Écart vs Pubs : {eur(ads - (countOpp && tot != null ? tot : seo))}

); }; const VisitTip = ({ active, payload, label }) => { if (!active || !payload?.length) return null; const a = payload.find((p) => p.dataKey === "adVisits")?.value ?? 0; const s = payload.find((p) => p.dataKey === "seoVisits")?.value ?? 0; return (

Mois {label}

Pubs : {num(a)} visites/mois

SEO : {num(s)} visites/mois

); }; return (

Refmax · Outil gratuit

Vos pubs, c’est une location.
Votre SEO, c’est un actif.

À partir de quand l’actif coûte moins cher que la location ? Réglez vos chiffres, le calculateur trouve le point de bascule. Sans inscription, sans donnée collectée.

{/* ---------- CONTRÔLES ---------- */}

Vos paramètres

setCountOpp((v) => !v)} style={{ cursor: "pointer" }}>

Inclure le coût d’opportunité

le trafic qu’Ads aurait capté pendant la rampe

{countOpp && ( )}

{/* ---------- RÉSULTATS ---------- */}

Point de bascule

{hasCross ? ( <>

Mois {model.crossover}≈ {(model.crossover / 12).toFixed(1)} an

À partir du mois {model.crossover}, votre SEO devient moins cher que vos pubs {countOpp ? <>, coût d’opportunité de la rampe inclus : null}. Sur {horizon} mois, vous accumulez {eur(savingsAnim)} au lieu de les louer.

) : ( <>

—

Avec ces réglages, la bascule intervient au-delà de {horizon} mois. Allongez l’horizon, ou réduisez l’investissement de construction / la maintenance.

)}

Coût d’une visite — Pubs

{eur(cpc)}

facturé à chaque visite, indéfiniment

Location évitée à maturité

{model.annualYield > 0 ? eur(model.annualYield) : "—"}/an

≈ {num(model.target)} visites/mois que vous ne louez plus

{/* Graphe coût cumulé */}

Coût cumulé, à visibilité équivalente

{[24, 36, 48, 60].map((h) => ( ))}

Pubs — dépense linéaire {countOpp ? "SEO — cash investi" : "SEO — actif qui se capitalise"} {countOpp && SEO + coût d’opportunité}

`${m}`} /> v >= 1000 ? `${Math.round(v / 1000)}k€` : `${v}€`} /> } /> {countOpp && ( )} {hasCross && ( <> )}

{/* Graphe trafic — l'honnêteté de la rampe */}

Le prix de l’actif : la patience

Pubs — trafic immédiat, loué SEO — monte sur {rampMonths} mois, puis vous appartient

num(v)} /> } /> {rampMonths <= horizon && ( )}

Modèle simplifié, à but pédagogique : il compare le coût cumulé pour atteindre une visibilité équivalente. Le coût d’opportunité de la rampe — le trafic qu’Ads aurait capté en attendant — est optionnel et valorisé à votre CPC (hypothèse basse). Le SEO n’est pas garanti et suppose une exécution sérieuse pendant la montée en puissance — c’est précisément ce délai qui en fait un actif, pas une dépense.

Voir ce que ça donne sur votre cas

); }

Vos pubs, c’est une location.Votre SEO, c’est un actif.

Vos paramètres

Vos pubs, c’est une location.
Votre SEO, c’est un actif.