// Resultaatpagina: benchmark, strategie, data, kanalen, CTA's
// Alle teksten en cijfers komen uit `data` (door de server gegenereerd per scan).
// Vaste bucket-labels — identiek aan de opties van de spend-vraag
const BUCKET_LABELS = ['< €1.000', '€1.000 – €2.500', '€2.500 – €5.000', '€5.000 – €10.000', '€10.000 – €20.000', '€20.000+'];
// Echte specialisten van Brandmerck, gekoppeld aan kanaal-key
const EXPERTS = {
sea: { name: 'Nico Zeinstra', role: 'Senior SEA-specialist', photo: 'images/expert-nico.jpg' },
seo: { name: 'Thijs van Beijeren', role: 'SEO-specialist', photo: 'images/expert-thijs.jpg' },
social: { name: 'Esther Wijbenga', role: 'Social & Google Ads-specialist', photo: 'images/expert-esther.jpg' },
};
// Fallback als reviews.json (echte reviews, zie server/fetch-reviews.js) ontbreekt
const REVIEWS_FALLBACK = [
{ text: 'Met veel SEO-bedrijven gewerkt, maar geen enkele kwam met daadwerkelijke verbetering. Brandmerck deed dit wel.', name: 'Eigenaar beveiligingsbedrijf', rating5: 5 },
{ text: 'Een duidelijke doelstelling en strategie na het eerste gesprek. Binnen één jaar uitstekende resultaten.', name: 'De Kreij Horeca', rating5: 5 },
{ text: 'Goede communicatie en korte lijnen! Leuke, enthousiaste mensen en veel kennis in huis.', name: 'MKB-ondernemer', rating5: 5 },
];
// useReviewsData / nlRating / ReviewBadge komen uit groeiscan-shared.jsx
function ResultHeader({ lead, data }) {
return (
{/* Topbar */}
Bespreek met een strateeg
{/* Hero met foto + diagonaal teal vlak */}
Jouw groeiplan
Groeiplan voor {lead.website}
{/* Intro-band: teal panel met notch, badges rechts op wit */}
{data.intro}{lead.email ? ` Ook verstuurd naar ${lead.email}.` : ''}
);
}
// Reviewscores in de headerband: gecombineerd gemiddelde + beide bronnen
function ResultHeaderBadges() {
const data = useReviewsData();
const g = data?.google, f = data?.feedback_company;
return (
{options.map((o) => {
const active = value === o.key;
return (
);
})}
);
}
function FieldLabel({ children, hint }) {
return (
{children}
{hint &&
{hint}
}
);
}
function ResearchSection({ data, scanId, onResearchDone, num, leadEmail, onEmail }) {
const { useState, useEffect, useRef } = React;
const [mode, setMode] = useState('form'); // 'form' | 'running'
const [services, setServices] = useState([]); // geselecteerd (max 3)
const [customServices, setCustomServices] = useState([]); // zelf toegevoegde chips
const [customInput, setCustomInput] = useState('');
const [comps, setComps] = useState([]); // geselecteerde concurrenten (max 3)
const [customComps, setCustomComps] = useState([]); // zelf toegevoegde concurrent-chips
const [compInput, setCompInput] = useState('');
const [scope, setScope] = useState('landelijk');
const [place, setPlace] = useState('');
const [audience, setAudience] = useState('beide');
const [error, setError] = useState('');
const [step, setStep] = useState(0);
// wizard: 0 doelgroep+regio, 1 diensten, 2 zoekwoorden cureren, 3 concurrenten+start
const [formStep, setFormStep] = useState(0);
const [provincie, setProvincie] = useState('');
const [kwData, setKwData] = useState(null); // perDienst-resultaat van /keywords
const [kwSelected, setKwSelected] = useState([]); // gekozen zoektermen
const [kwLoading, setKwLoading] = useState(false);
const [compSuggesties, setCompSuggesties] = useState(null);
const [compLoading, setCompLoading] = useState(false);
// E-mail wordt pas bij de zoekwoorden-stap gevraagd; de termen laden
// ondertussen op de achtergrond zodat de wachttijd wegvalt.
const [emailOk, setEmailOk] = useState(!!leadEmail);
const [emailVal, setEmailVal] = useState('');
const [emailErr, setEmailErr] = useState('');
const [emailBusy, setEmailBusy] = useState(false);
const doneRef = useRef(false);
async function saveEmail(e) {
e.preventDefault();
const em = emailVal.trim();
if (!/^\S+@\S+\.\S+$/.test(em)) { setEmailErr('Vul een geldig e-mailadres in'); return; }
setEmailErr(''); setEmailBusy(true);
try {
const res = await fetch(`/api/scan/${scanId}/email`, {
method: 'POST', headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ email: em }),
});
if (!res.ok) {
const d = await res.json().catch(() => ({}));
setEmailErr(d.error || 'Opslaan mislukte, probeer het opnieuw.');
return;
}
if (onEmail) onEmail(em);
setEmailOk(true);
} catch {
setEmailErr('Geen verbinding, probeer het opnieuw.');
} finally {
setEmailBusy(false);
}
}
const regionBody = () => scope === 'provincie' ? { scope: 'provincie', provincie } : { scope: 'landelijk', place: '' };
// Stap 2 → 3: zoektermen per dienst genereren en laten cureren
async function loadKeywords() {
setKwLoading(true); setError('');
try {
const res = await fetch(`/api/scan/${scanId}/keywords`, {
method: 'POST', headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ services, region: regionBody(), audience }),
});
const d = await res.json().catch(() => ({}));
if (!res.ok) { setError(d.error || 'Zoektermen ophalen mislukte. Probeer het opnieuw.'); setFormStep(1); return; }
setKwData(d.perDienst);
setKwSelected(d.perDienst.flatMap((x) => x.termen.map((t) => t.kw)));
} catch (e) {
setError('Geen verbinding. Probeer het opnieuw.'); setFormStep(1);
} finally {
setKwLoading(false);
}
}
// Stap 3 → 4: concurrent-suggesties uit de SERP's van de gekozen termen.
// Harde client-time-out: na 45s tonen we gewoon het lege-suggesties-pad
// (zelf invullen kan altijd), zodat de stap nooit blijft hangen.
async function loadCompSuggesties(chosen) {
setCompLoading(true);
try {
const byVol = new Map((kwData || []).flatMap((d) => d.termen).map((t) => [t.kw, t.volRaw]));
const sample = [...chosen].sort((a, b) => (byVol.get(b) || 0) - (byVol.get(a) || 0)).slice(0, 4);
const res = await fetch(`/api/scan/${scanId}/competitors-suggest`, {
method: 'POST', headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ keywords: sample, region: regionBody() }),
signal: AbortSignal.timeout(45000),
});
const d = await res.json().catch(() => ({}));
setCompSuggesties(Array.isArray(d.suggestions) ? d.suggestions : []);
} catch (e) {
setCompSuggesties([]);
} finally {
setCompLoading(false);
}
}
const allServices = [...(data.suggestedServices || []), ...customServices];
function toggleService(s) {
setError('');
setServices((cur) => cur.includes(s) ? cur.filter((x) => x !== s) : cur.length >= 3 ? cur : [...cur, s]);
}
function addCustom() {
const s = customInput.trim().slice(0, 60);
if (!s) return;
if (!allServices.some((x) => x.toLowerCase() === s.toLowerCase())) setCustomServices((cur) => [...cur, s]);
if (services.length < 3 && !services.includes(s)) setServices((cur) => [...cur, s]);
setCustomInput('');
}
const allComps = [...(data.suggestedCompetitors || []), ...customComps];
function toggleComp(d) {
setError('');
setComps((cur) => cur.includes(d) ? cur.filter((x) => x !== d) : cur.length >= 2 ? cur : [...cur, d]);
}
function addCompCustom() {
// lichte normalisatie voor de chip; de server valideert het domein definitief
const d = compInput.trim().toLowerCase().replace(/^https?:\/\//, '').split(/[/?#]/)[0].slice(0, 60);
if (!d) return;
if (!allComps.some((x) => x === d)) setCustomComps((cur) => [...cur, d]);
if (comps.length < 2 && !comps.includes(d)) setComps((cur) => [...cur, d]);
setCompInput('');
}
async function start() {
if (!services.length) { setError('Kies minimaal één dienst om op te onderzoeken.'); return; }
setError('');
// Geen concurrenten gekozen → de twee sterkste suggesties uit de SERP's
const chosenComps = comps.length ? comps.slice(0, 2) : (compSuggesties || []).slice(0, 2);
// Term → dienst-koppeling zodat het rapport de zoektermen per dienst groepeert
const keywordDiensten = Object.fromEntries((kwData || []).flatMap((d) =>
d.termen.filter((t) => kwSelected.includes(t.kw)).map((t) => [t.kw, d.dienst])));
setMode('running'); setStep(0);
try {
const res = await fetch(`/api/scan/${scanId}/research`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
services,
competitors: chosenComps,
region: regionBody(),
audience,
keywords: kwSelected.slice(0, 24),
keywordDiensten,
}),
});
if (!res.ok && res.status !== 409) {
const d = await res.json().catch(() => ({}));
setError(d.error || 'Het onderzoek kon niet worden gestart. Probeer het opnieuw.');
setMode('form');
}
// 409 "loopt al" → gewoon doorpollen
} catch (e) {
setError('Geen verbinding. Controleer je internet en probeer het opnieuw.');
setMode('form');
}
}
// Bij mount: loopt er al een onderzoek (bv. na een refresh)? Dan meteen doorpollen.
useEffect(() => {
let cancelled = false;
fetch(`/api/scan/${scanId}/research`).then((r) => r.json()).then((d) => {
if (cancelled) return;
if (d.status === 'running') setMode('running');
else if (d.status === 'done' && d.result && !doneRef.current) { doneRef.current = true; onResearchDone(d.result); }
}).catch(() => {});
return () => { cancelled = true; };
}, [scanId]);
// Poll zolang het onderzoek loopt
useEffect(() => {
if (mode !== 'running') return;
let stopped = false;
let idlePolls = 0;
async function poll() {
try {
const res = await fetch(`/api/scan/${scanId}/research`);
const d = await res.json();
if (stopped) return;
if (d.status === 'running') { setStep(d.step ?? 0); return; }
if (d.status === 'done' && d.result) {
if (!doneRef.current) { doneRef.current = true; gsTrack('research_ready', { product: 'groeiscan', scan_id: scanId }, scanId); onResearchDone(d.result); }
return;
}
if (d.status === 'error') { setError(d.error || 'Er ging iets mis bij het onderzoek. Probeer het opnieuw.'); setMode('form'); return; }
// 'idle' vlak na de start kan een race zijn — na een paar polls opgeven
if (++idlePolls >= 5) { setError('Het onderzoek is niet gestart. Probeer het opnieuw.'); setMode('form'); }
} catch (e) { /* netwerk-hikje: volgende poll */ }
}
const iv = setInterval(poll, 1500);
poll();
return () => { stopped = true; clearInterval(iv); };
}, [mode, scanId]);
return (
Kies je diensten en zie het live: jouw posities naast die van je concurrenten, wie er adverteert
in Google én op social, en wat dat verkeer waard is. Gemeten met professionele bureaudata (live
Google-metingen en Semrush), vertaald naar een concreet SEO- en Google Ads-plan. Gratis, een paar
minuten werk.
{mode === 'running' ? (
We onderzoeken je groeikansen…
{RESEARCH_STEPS.map((s, i) => {
const isDone = i < step;
const isActive = i === step;
return (
{isDone ? '✓' : ''}{s}
);
})}
We halen live data op uit Google. Dit duurt ongeveer een minuut.
) : (
{/* Spinner-animatie hier definiëren zodat elke wizard-stap hem heeft */}
{/* Wizard-voortgang */}
{formStep > 0 && (
)}
Stap {formStep + 1} van 4
{[0, 1, 2, 3].map((i) => (
))}
{/* Stap 1: doelgroep + regio — stuurt alle vervolgmetingen */}
{formStep === 0 && (
Voor wie werk je vooral?
{ setAudience(k); setError(''); }} />
Waar zoek je klanten?
{ setScope(k); setError(''); }} />
{scope === 'provincie' && (
{PROVINCIES.map((p) => (
))}
)}
{error &&
{error}
}
{
if (scope === 'provincie' && !provincie) { setError('Kies je provincie.'); return; }
setError(''); setFormStep(1);
}}>Volgende stap →
)}
{/* Stap 2: diensten */}
{formStep === 1 && (
Welke diensten zijn voor jou het belangrijkst? ({services.length}/3)
}
{
if (!services.length) { setError('Kies minimaal één dienst om op te onderzoeken.'); return; }
setError(''); setFormStep(2); loadKeywords();
}}>Zoektermen ophalen →
)}
{/* Stap 3: zoekwoorden cureren (met e-mailstap; de termen laden ondertussen) */}
{formStep === 2 && (
{!emailOk ? (
Waar mogen we het onderzoek naartoe sturen?
Alleen om je onderzoek toe te sturen. Geen spam, geen verplichtingen.
) : kwLoading ? (
We zoeken uit waar jouw klanten op googelen…
Per dienst meten we de zoektermen mét zoekvolume. Duurt ± 15 seconden.
) : kwData ? (
Kloppen deze zoektermen voor jou? ({kwSelected.length} geselecteerd)
{kwData.map((d) => (
{d.dienst}
{d.termen.map((t) => {
const active = kwSelected.includes(t.kw);
return (
);
})}
{!d.termen.length && Geen termen met meetbaar volume voor deze dienst.}
Op {keywords.filter((k) => k.aiOverview).length} van de {keywords.length} termen toont Google een AI-antwoord; wie daarin geciteerd wordt, pakt kliks vóór de gewone zoekresultaten.
)}
{data.dataQuality?.positionsLive
? 'Posities vandaag live in Google gemeten (regio Nederland, zonder personalisatie); jouw eigen zoekresultaten kunnen door personalisatie en locatie iets afwijken. "Niet gevonden" = geen positie in de top 20.'
: 'Bron: actuele zoekdata (DataForSEO), regio Nederland. "Niet gevonden" = geen positie in de top 100.'}
{' '}Klikprijs = het lage en hoge topbod volgens Google Ads; wat je werkelijk betaalt hangt af van je kwaliteitsscore en concurrentie.
Op basis van positie × zoekvolume × klikkans per term, gekalibreerd met clickstream-metingen van echt klikgedrag (DataForSEO). Meer zoektermen betekent niet automatisch meer bezoek: hoge posities op zware termen tellen het hardst.
Totaal zoekvolume over jouw zoektermen, afgelopen 12 maanden.
)}
Berekend met de gemiddelde klikverdeling per Google-positie en de gemeten zoekvolumes en klikprijzen, gekalibreerd met clickstream-metingen van echt klikgedrag in deze branche{hasField ? `; het scenario telt je onderzochte termen (naar top-3) en het nog onbenutte speelveld (naar positie ${pot.fieldPos}) bij elkaar op` : ''}: een indicatie van de orde van grootte, geen garantie.
);
}
// Social bereik: rekenmodel-doelgroepen per platform + echte concurrent-ads (Ad Library)
function SocialSection({ data, num }) {
const s = data.socialData;
const maxAudience = Math.max(...s.platforms.map((p) => p.audience), 1);
const ads = s.competitorAds || [];
return (
{data.social.intro}
{/* Doelgroepprofiel + bereikbaar per platform */}
{s.fullReach ? (
~ €{fmtNum(s.fullReach.monthlyCost)} p/mkost het indicatief om je volledige doelgroep (≈ {fmtNum(s.fullReach.audience)} mensen) elke maand te bereiken op Facebook/Instagram
) : (
≈ {fmtNum(s.reach.people)}mensen per maand te bereiken op Facebook/Instagram met ~€{s.reach.budget} advertentiebudget
)}
{/* Concurrenten die nu adverteren */}
{ads.length > 0 && (
Bron: openbare Meta Ad Library, advertenties gericht op Nederland.
)}
{/* Duiding */}
Wat betekent dit?
{data.social.insight}
Doelgroepen: Brandmerck-rekenmodel {s.edition} o.b.v. Newcom Nationale Social Media Onderzoek en CBS-bevolkingscijfers{s.regionAssumed ? ' (verzorgingsgebied als aanname)' : ''}; kostenindicatie o.b.v. gemiddelde Nederlandse advertentieprijzen (CPM).
);
}
// Technische mini-audit (OnPage-crawl, max 15 pagina's): score + top-3
// verbeterpunten als teaser; de volledige audit is het strategiegesprek.
function TechSection({ data, num, onCta }) {
const t = data.techData;
const ok = t.totalIssues === 0;
return (
{ok
? `We hebben ${t.crawledPages ? `${fmtNum(t.crawledPages)} pagina's` : 'je website'} technisch doorgelicht en geen blokkerende problemen gevonden. Dat is een stevige basis: alles wat je aan content en autoriteit opbouwt, komt technisch ook echt aan.`
: `We hebben ${t.crawledPages ? `${fmtNum(t.crawledPages)} pagina's` : 'je website'} technisch doorgelicht en ${fmtNum(t.totalIssues)} punten gevonden die je SEO-potentieel remmen. Niets onoverkomelijks, maar elk punt maakt het voor Google net wat lastiger om je pagina's goed te beoordelen.`}
{t.onpageScore >= 85 ? 'Technisch gezond; de winst zit vooral in content en autoriteit.' : t.onpageScore >= 65 ? 'Redelijke basis, maar de gevonden punten kosten je nu zichtbaarheid.' : 'De techniek remt je vindbaarheid serieus af; hier ligt snelle winst.'}
);
}
// ── Stapsgewijs vervolgonderzoek (v8): vijf stappen die de lezer meenemen ──
const FASE_ORDER = ['orienteren', 'vergelijken', 'kiezen'];
const FASE_META = {
orienteren: { label: 'Oriënteren', sub: 'de klant verkent het onderwerp' },
vergelijken: { label: 'Vergelijken', sub: 'de klant weegt opties en prijzen af' },
kiezen: { label: 'Klaar om te kiezen', sub: 'de klant zoekt een partij; dit zijn de aanvragen' },
};
// Brug-zin onder elke stap: leidt de lezer naar de volgende vraag
function StepBrug({ text }) {
if (!text) return null;
return (
↓ {text}
);
}
// Kleine vervolgstap onderaan een datasectie: de brug van inzicht naar gesprek.
// Nuchter linkje, geen schreeuwende knop; scrolt naar het contactformulier.
function SectieCta({ text }) {
return (
);
}
function PosBadge({ k }) {
const found = k.pos !== '—';
return (
{found ? `#${k.pos}` : 'niet gevonden'}
);
}
// Stap 1 — Waar zoekt jouw klant op? (zoektermen per klantfase)
function Step1Section({ data, num, tag }) {
const s = data.steps.step1;
const kws = data.keywords || [];
return (
Op {kws.filter((k) => k.aiOverview).length} van de {kws.length} termen toont Google een AI-antwoord; wie daarin geciteerd wordt, pakt kliks vóór de gewone zoekresultaten.
)}
{/* Wat klanten verder aan Google vragen (People Also Ask) */}
{data.paaQuestions?.length > 0 && (
Dit vraagt jouw klant aan Google
Echte vervolgvragen uit de zoekresultaten op jouw termen; elke vraag is een pagina- of contentkans.
{data.paaQuestions.map((q) => (
“{q.vraag}” bij "{q.kw}"
))}
)}
{data.dataQuality?.positionsLive
? 'Posities vandaag live in Google gemeten (regio Nederland, zonder personalisatie); "niet gevonden" = geen positie in de top 20.'
: 'Bron: actuele zoekdata (DataForSEO), regio Nederland.'}
{' '}Klikprijs = het lage en hoge topbod volgens Google Ads.
Op {kws.filter((k) => k.aiOverview).length} van de {kws.length} termen toont Google een AI-antwoord; wie daarin geciteerd wordt, pakt kliks vóór de gewone zoekresultaten.
)}
{/* Wat klanten verder aan Google vragen (People Also Ask) */}
{data.paaQuestions?.length > 0 && (
Dit vraagt jouw klant aan Google
Echte vervolgvragen uit de zoekresultaten op jouw termen; elke vraag is een pagina- of contentkans.
{data.paaQuestions.map((q) => (
“{q.vraag}” bij "{q.kw}"
))}
)}
{data.dataQuality?.positionsLive
? 'Posities vandaag live in Google gemeten (regio Nederland, zonder personalisatie); "—" = geen positie in de top 20.'
: 'Bron: actuele zoekdata (DataForSEO), regio Nederland.'}
{' '}{kws.some((k) => String(k.cpc).includes('–'))
? 'Klikprijs = het lage en hoge topbod volgens Google Ads.'
: 'Klikprijs = de verwachte kosten per klik in Google Ads.'}
{view === 'termen'
? 'Aantal zoektermen waarmee elk domein in deze positiegroepen staat (meest recente maand).'
: 'Geschatte organische bezoekers per maand. Beweeg over de grafiek voor de cijfers per maand.'}
Autoriteit op een schaal van 0-100 (hoe sterker het linkprofiel, hoe hoger); verwijzende websites = unieke domeinen die naar de site linken. Bezoek = geschat organisch bezoek per maand; waarde = wat dat verkeer via Google Ads zou kosten.
{data.dataQuality?.semrush ? ' Bron domeincijfers: Semrush (NL).' : ' Gekalibreerd op echt klikgedrag.'}
Geen advertentiedata beschikbaar voor deze domeinen.
}
Bron: Google Ads Transparency Center (regio NL).
Budgetscenario's: Brandmerck-rekenmodel {plan.edition} op basis van de gemeten klikprijzen en zoekvolumes van jouw termen; conversie-aanname {plan.conversie.ratio * 100}% voor dit bedrijfstype. Indicatie, geen garantie.
);
}
// v11 — Google Ads: sturen op conversies + wie adverteert er al
function AdsConversieSection({ data, num, tag }) {
const a = data.steps.ads;
const plan = data.adsPlan;
const gact = plan?.googleActivity || [];
const gAds = data.googleAds || [];
const own = data.competitorData?.lead?.domain?.replace(/^www\./, '');
const serpTermsFor = (dom) => gAds.find((x) => x.domain === dom)?.terms || [];
// SERP-adverteerders (bieden op jouw termen) die niet al via Transparency in beeld zijn
const extraSerp = gAds.filter((x) => !gact.some((g) => g.domain === x.domain)).slice(0, 4);
const pct = plan?.conversie ? String(plan.conversie.ratio * 100).replace('.', ',') : null;
return (
{a.conversie_zin}
{pct && (
{pct}%
van de kliks leidt bij dit bedrijfstype gemiddeld tot een conversie ({plan.conversie.label}). Dát is het getal om op te sturen, niet het aantal kliks.
gezien in de advertenties op: {g.terms.slice(0, 3).join(', ')}
))}
) :
Op jouw termen en bij deze domeinen zijn nu geen Google-advertenties gezien. Dat betekent vrij baan: de eerste die hier serieus adverteert, pakt de commerciële kliks.
}
{a.concurrentie_zin &&
{a.concurrentie_zin}
}
Bron: Google Ads Transparency Center (regio NL) en live gemeten advertenties op jouw zoektermen.
{plan?.conversie && (
Conversie-aanname {pct}% voor dit bedrijfstype (Brandmerck-rekenmodel {plan.edition}); indicatie, geen garantie.
)}
);
}
// Stap 3 — Waar sta jij nu? (zichtbaarheid per fase + fundament)
function Step3Section({ data, num, tag }) {
const s = data.steps.step3;
const kws = data.keywords || [];
const t = data.techData;
const lead = data.competitorData?.lead;
const hist = data.history || null;
const histDir = hist && hist.length >= 6 ? (() => {
const f = hist[0].etv || 1;
const l = hist[hist.length - 1].etv || 0;
return l > f * 1.15 ? { label: 'stijgend', kleur: '#7FD1A8' } : l < f * 0.85 ? { label: 'dalend', kleur: '#F08A5A' } : { label: 'stabiel', kleur: '#F0C05A' };
})() : null;
const maxHist = hist ? Math.max(...hist.map((m) => m.etv), 1) : 1;
return (
Daarnaast zijn er nog {fmtNum(unused.count)} relevante zoektermen gevonden met samen {fmtNum(unused.totalVolume)} zoekopdrachten per maand waar je nu niets uithaalt.
)}
Wat betekent dit?
{s.insight}
{hero && (
Zo ziet pagina 1 eruit voor "{hero.kw}" ({hero.vol} zoekopdrachten p/m)
{hero.items.slice(0, 9).map((i) => (
#{i.pos} {i.domain.replace(/^www\./, '')}
))}
Jij staat er niet tussen
)}
);
}
// Stap 5 — Wat is dat waard? (potentieel + trend + slotverhaal)
function Step5Section({ data, num, tag }) {
const s = data.steps.step5;
const pot = data.potentialData;
const trend = data.trend;
const unused = data.unused;
const maxTrend = trend ? Math.max(...trend.months.map(m => m.volume), 1) : 1;
const hasField = !!(pot.fmt.totalExtra && pot.fieldClicks > 0);
const statCards = hasField ? [
{ value: pot.fmt.totalExtra, sub: 'extra bezoekers per maand', label: `Onderzochte termen naar de top-3 én de ${fmtNum(pot.fieldCount)} onbenutte termen naar positie ${pot.fieldPos}` },
pot.fmt.totalValueMonth && { value: pot.fmt.totalValueMonth, sub: 'advertentiewaarde per maand', label: 'Wat dit verkeer zou kosten via Google Ads' },
pot.fmt.totalValueYear && { value: pot.fmt.totalValueYear, sub: 'advertentiewaarde per jaar', label: 'De jaarlijkse waarde van deze organische zichtbaarheid' },
unused && { value: fmtNum(unused.count), sub: `samen ${fmtNum(unused.totalVolume)} zoekopdrachten p/m`, label: 'Relevante zoektermen waar je nu nog niets uithaalt' },
].filter(Boolean) : [
{ value: pot.fmt.extraClicks, sub: 'extra bezoekers per maand', label: 'Bij een top-3 positie op de onderzochte zoektermen' },
pot.fmt.adValueMonth && { value: pot.fmt.adValueMonth, sub: 'advertentiewaarde per maand', label: 'Wat dit verkeer zou kosten via Google Ads' },
pot.fmt.adValueYear && { value: pot.fmt.adValueYear, sub: 'advertentiewaarde per jaar', label: 'De jaarlijkse waarde van deze organische posities' },
].filter(Boolean);
return (
{statCards.map(c => (
{c.value}
{c.sub}
{c.label}
))}
{s.paragraphs.map((p, i) => (
{p}
))}
{trend && (
Zoekvraag per maand
{trend.peakMonths && (
piek in {trend.peakMonths.join(' & ')}
)}
Berekend met de gemiddelde klikverdeling per Google-positie en de gemeten zoekvolumes en klikprijzen, gekalibreerd met clickstream-metingen van echt klikgedrag in deze branche{hasField ? `; het scenario telt je onderzochte termen (naar top-3) en het nog onbenutte speelveld (naar positie ${pot.fieldPos}) bij elkaar op` : ''}: een indicatie van de orde van grootte, geen garantie.
);
}
function MidCta({ onCta }) {
return (
Benieuwd wat dit concreet voor jou betekent?
Plan een vrijblijvend gesprek met een van onze 40+ marketingdeskundigen en ontvang een
échte strategie op maat. Samenwerken kan al vanaf €1.000 per maand.
Bespreek dit plan
);
}
function ReviewsSection() {
const { useEffect, useRef } = React;
const data = useReviewsData();
const trackRef = useRef(null);
const pausedRef = useRef(false);
// Cap: een handvol sterke reviews overtuigt; een muur van 25 verwatert en
// vergroot de afstand tot de eind-CTA.
const reviews = (data?.reviews || REVIEWS_FALLBACK).slice(0, 9);
function slide(dir) {
const el = trackRef.current;
if (!el) return;
const step = (el.children[0]?.offsetWidth || 320) + 22;
const atEnd = el.scrollLeft + el.clientWidth >= el.scrollWidth - 10;
if (dir > 0 && atEnd) el.scrollTo({ left: 0, behavior: 'smooth' });
else el.scrollBy({ left: dir * step, behavior: 'smooth' });
}
// Rustig automatisch doorschuiven; pauzeert zolang de muis erop staat
useEffect(() => {
const iv = setInterval(() => { if (!pausedRef.current) slide(1); }, 6000);
return () => clearInterval(iv);
}, [reviews.length]);
const arrowStyle = {
width: 42, height: 42, borderRadius: '50%', border: '1.5px solid #C9DAD8', background: '#fff',
color: 'var(--bm-teal-ink)', fontSize: 18, fontWeight: 900, cursor: 'pointer',
display: 'grid', placeItems: 'center', boxShadow: '0 4px 12px rgba(6,40,38,0.10)', flex: '0 0 auto',
};
return (
Klantervaringen
Dit zeggen ondernemers over Brandmerck
{/* Slider: swipe/scroll-snap + pijlen, alleen positieve reviews */}
Deze scan geeft een eerste richting. Een strateeg van Brandmerck vertaalt het naar een
concreet plan: doelen, budgetverdeling en een aanpak die elke maand beter wordt.
Vrijblijvend gesprek van 30 minuten
Strategie op maat, geen losse acties
Volledige marketingafdeling vanaf €1.000 per maand
Erwin Hoekstra
Marketingstrateeg & co-founder
{sent ? (
✓
Aanvraag ontvangen
Een strateeg neemt binnen één werkdag contact met je op om het gesprek in te plannen.
