// ============================================================ // SCREENS — Home, Quiz, Result, BreedDetail, Catalog, Shop, Guide // ============================================================ const { useState: useS, useEffect: useE, useMemo: useM, useRef: useR } = React; // ============================================================ // HOME // ============================================================ function HomeScreen({ onNav, onSelectBreed, t }) { const featured = window.DATA.BREEDS.slice(0, 8); const dutchBreeds = window.DATA.BREEDS.filter(b => b.tags?.includes('nederlands')); // Hero composition const heroLayout = t.heroLayout || 'split-right'; const heroContent = (
Vind jouw ideale viervoeter

Welke hond
past echt
bij jou?

Beantwoord 13 eerlijke vragen en wij koppelen je aan je top 3 rassen — met diepgaande analyses, weekschema's en kostenplaatjes. Zonder gokwerk.

200+
Hondenrassen
volledig geanalyseerd
13
Vragen voor
een echte match
94%
Tevreden
baasjes (n=2.847)
); const heroImage =
; const heroTag = (
2.847 mensen vonden hun match deze maand
); return ( <> {/* HERO */}
{heroContent} {heroLayout !== 'centered' && heroImage}
{heroTag}
{/* QUIZ BANNER */}
Hondenmatch · 4 minuten

Niet elke hond past
bij elk leven.

Onze quiz kijkt verder dan alleen "ik wil een schattige hond". We wegen je woonsituatie, energieniveau, ervaring en budget. Je krijgt een eerlijke top 3 — soms met een verrassing.

Vraag 3 van 13
Wat past het best bij jouw levensstijl?
Rustig — wandelingen, op de bank
Gemiddeld — fietsen, boswandelingen
Actief — hardlopen, sporten met hond
{/* FEATURED BREEDS */}
Populaire rassen

Een kleine selectie
uit onze 200+ rassen

Van de altijd vrolijke Labrador tot de eigenwijze Shiba Inu — elk ras heeft een eigen verhaal, eigen behoeften en eigen baasje.

{featured.map(b => onSelectBreed(b)} />)}
{/* DUTCH BREEDS — magazine row */}
Made in Holland

Nederlandse rassen
die we koesteren

{dutchBreeds.map(b => onSelectBreed(b)} />)} {/* article card */}
Lange-lees · 8 min

Waarom Nederlandse rassen zo bijzonder zijn

Drentse Patrijshond, Stabij, Kooikerhondje — onze polders bracht honden voort die zachtaardig en allround zijn.

{/* SHOP TEASER */}
Webshop

Alles voor een
gelukkige hond

Van de eerste mand tot de senior-supplementen. Wij testen, jij geniet.

{window.DATA.CATEGORIES.map(c => (
onNav('shop')}>
{c.icon}
{c.name}
{c.count} producten
))}
{/* TRUST / EDITORIAL */}
PHOTO · DOG TRAINER WITH PUP
Het verhaal

Een hond is voor het leven —
laten we de juiste keuze maken.

Elk jaar belanden 25.000 honden in Nederlandse asielen, vaak omdat het niet de juiste match was. Daar willen we iets aan doen.

Pootje is gebouwd door dierenartsen, gedragsdeskundigen en — vooral — bezorgde hondenliefhebbers. Onze quiz kijkt verder dan uiterlijk; wij wegen wie jij echt bent.

); } // ============================================================ // QUIZ // ============================================================ function QuizScreen({ onComplete, t }) { const [step, setStep] = useS(0); const [answers, setAnswers] = useS({}); const [direction, setDirection] = useS(0); const layout = t.quizLayout || 'fullscreen'; const Q = window.DATA.QUIZ; const current = Q[step]; const progress = (step / Q.length) * 100; const select = (v) => { setAnswers({ ...answers, [current.id]: v }); setTimeout(() => { if (step < Q.length - 1) { setDirection(1); setStep(step + 1); } else { onComplete({ ...answers, [current.id]: v }); } }, 280); }; const back = () => { if (step > 0) { setDirection(-1); setStep(step - 1); } }; return (
{/* Progress */}
{String(step + 1).padStart(2, '0')} / {String(Q.length).padStart(2, '0')}
Hondenmatch
{/* Question */}
Vraag {step + 1}

{current.question}

{current.help &&

{current.help}

}
{current.options.map(opt => ( ))}
Druk op een antwoord om verder te gaan
); } // ============================================================ // RESULT // ============================================================ function ResultScreen({ answers, onNav, onSelectBreed, t }) { const ranked = useM(() => { return [...window.DATA.BREEDS] .map(b => ({ ...b, score: window.DATA.scoreBreed(b, answers) })) .sort((a, b) => b.score - a.score); }, [answers]); const top = ranked[0]; const [revealed, setRevealed] = useS(false); useE(() => { const t = setTimeout(() => setRevealed(true), 600); return () => clearTimeout(t); }, []); const layout = t.resultLayout || 'hero'; return (
· Jouw match ·

Jij past bij
{top.name}

Geschiktheid {top.score}%
{/* Main result */}

{top.name}

{top.group} · {top.size} · {top.lifespan} · {top.price}
PHOTO · {top.name.toUpperCase()}

Waarom deze match? {top.short} Op basis van jouw antwoorden over woonsituatie, energieniveau en ervaring zien wij dat dit ras bijzonder goed bij jouw leven aansluit.

Karaktereigenschappen

{/* Sidebar — runners-up */}

Top 3 matches

{ranked.slice(0, 3).map((b, i) => (
onSelectBreed(b)}>
#{i+1}
{b.name} {b.score}% match · {b.size}
{Icon.arrow}
))}
Volgende stap

Klaar voor je hond?

Bekijk ons starterpakket voor {top.name} — alles wat je de eerste maand nodig hebt.

Vergelijk je top 3

{['energie', 'verzorging', 'kindvriendelijk', 'training'].map(k => (
{ranked.slice(0, 3).map(b => (
))}
{k}
))}
{/* Other matches */}

Ook geschikt voor jou

Op plek 4 tot 8 — net iets minder perfect, maar zeker overweging waard.

{ranked.slice(3, 11).map(b => onSelectBreed(b)} />)}
); } // ============================================================ // BREED DETAIL // ============================================================ function BreedDetailScreen({ breed, onBack, onSelectBreed, onNav }) { return (
{/* Header */}
{breed.group} Origineel uit {breed.origin} {breed.lifespan}

{breed.name}

{breed.short}

{/* Photo + facts grid */}
PHOTO · {breed.name.toUpperCase()} · ADULT
Formaat
{breed.size}
Gewicht
{breed.weight}
Levensduur
{breed.lifespan}
Pup-prijs
{breed.price}
Beweging
{breed.care.beweging}
Voer/maand
{breed.care.voer}
{/* Unique — eerlijk profiel */} {breed.unique && (

Wat je écht moet weten

De eerlijke versie — zonder mooi-praterij. Lees dit voordat je beslist.

De eigenaardigheid {breed.unique.quirk}
Wat je vooraf moet weten {breed.unique.knowBefore}
Rode vlaggen / gezondheid {breed.unique.redFlags}
Past perfect bij {breed.unique.perfectFor}
Past níet bij {breed.unique.notFor}
Wist je dat? {breed.unique.funFact}
)} {/* Traits panel */}

Karakteranalyse

Op een schaal van 1 tot 5, gebaseerd op rasstandaard en gedragsstudies.

{/* Cost panel */}

Wat kost een {breed.name}?

Maandelijkse kosten over een gemiddeld hondenleven.

{/* Schedule panel */}

Een week in beeld

Hoe ziet een normale week eruit met deze hond?

{/* Verzorging detail */}

Verzorging & opvoeding

{Object.entries(breed.care).map(([k, v]) => (
{ {beweging:'Beweging',voer:'Voer',grooming:'Vacht',training:'Training'}[k] }

{v}

))}
{/* Quiz CTA */}
Niet zeker?

Doe de match-quiz

Misschien past een ander ras juist beter bij jou. In 4 minuten weet je het zeker.

); } // ============================================================ // CATALOG (200+ breeds with filters) // ============================================================ function CatalogScreen({ onSelectBreed }) { const [filterSize, setFilterSize] = useS('all'); const [filterGroup, setFilterGroup] = useS('all'); const [search, setSearch] = useS(''); const sizes = ['all', 'Mini', 'Klein', 'Middel', 'Groot', 'Reuze']; const groups = ['all', 'Retriever', 'Herder', 'Werkhond', 'Terriër', 'Gezelschap', 'Spits', 'Jachthond']; const breeds = window.DATA.ALL_BREEDS.filter(b => { if (filterSize !== 'all' && b.size !== filterSize) return false; if (filterGroup !== 'all' && b.group !== filterGroup) return false; if (search && !b.name.toLowerCase().includes(search.toLowerCase())) return false; return true; }); return (
Rassen-encyclopedie

Alle hondenrassen
in één overzicht

{window.DATA.ALL_BREEDS.length} rassen, gerangschikt en filterbaar. Zoek op naam, formaat of doelgroep.

{/* Search */}
setSearch(e.target.value)} style={{ width: '100%', padding: '14px 18px 14px 44px', border: '1px solid var(--line)', borderRadius: '999px', background: 'var(--paper)', fontSize: 14, fontFamily: 'inherit' }} /> {Icon.search}
{/* Filters */}
Formaat {sizes.map(s => ( ))}
Groep {groups.map(g => ( ))}

{breeds.length} rassen gevonden

{breeds.slice(0, 60).map(b => onSelectBreed(b)} />)}
{breeds.length > 60 && (
)}
); } // ============================================================ // SHOP // ============================================================ function ShopScreen({ cart, onAdd }) { const [activeCat, setActiveCat] = useS('all'); const products = activeCat === 'all' ? window.DATA.PRODUCTS : window.DATA.PRODUCTS.filter(p => p.cat === activeCat); return (
Webshop

Alles voor jouw
nieuwe huisgenoot

Zorgvuldig geselecteerd door dierenartsen, gedragsdeskundigen en hondenliefhebbers. Gratis verzending vanaf €40.

{/* Categories */}
setActiveCat('all')} style={activeCat === 'all' ? { background: 'var(--forest)', color: 'var(--cream)' } : {}}>
🐾
Alles
{window.DATA.PRODUCTS.length} producten
{window.DATA.CATEGORIES.map(c => (
setActiveCat(c.id)} style={activeCat === c.id ? { background: 'var(--forest)', color: 'var(--cream)' } : {}}>
{c.icon}
{c.name}
{c.count} producten
))}
{/* Featured banner */} {activeCat === 'all' && (
Compleet pakket

Puppy Starterpakket

Alles wat je puppy de eerste maand nodig heeft — mand, voer, riem, halsband, speelgoed, snacks. Bespaar €46.

€199,– €245,–
PHOTO · STARTERPAKKET FLATLAY
)}
{products.map(p => ( ))}
); } // ============================================================ // GUIDE / KENNISBANK // ============================================================ function GuideScreen({ onNav }) { const articles = [ { title: 'De eerste week met je puppy: een dag-voor-dag plan', cat: 'Puppy', read: '8 min' }, { title: 'Hoeveel kost een hond echt? Een eerlijk overzicht', cat: 'Budget', read: '12 min' }, { title: 'Welke voeding past bij welk ras?', cat: 'Voeding', read: '6 min' }, { title: 'Zindelijkheidstraining: het complete handboek', cat: 'Training', read: '15 min' }, { title: 'Senior hond: signalen om op te letten', cat: 'Gezondheid', read: '10 min' }, { title: 'Hond en kind: een veilige start', cat: 'Gezin', read: '7 min' }, ]; return (
Kennisbank

Alles wat je moet weten
over hondenleven

Geschreven door dierenartsen, gedragsdeskundigen en ervaren baasjes.

{articles.map((a, i) => (
EDITORIAL · {a.cat.toUpperCase()}
{a.cat} {a.read} lezen

{a.title}

))}
); } Object.assign(window, { HomeScreen, QuizScreen, ResultScreen, BreedDetailScreen, CatalogScreen, ShopScreen, GuideScreen, });