// ============================================================
// 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 = (
    <div className="hero-content">
      <span className="hero-eyebrow">Vind jouw ideale viervoeter</span>
      <h1 className="serif">
        Welke hond<br/>
        past <span className="ital">echt</span><br/>
        bij jou?
      </h1>
      <p className="hero-sub">
        Beantwoord 13 eerlijke vragen en wij koppelen je aan je top 3 rassen — met diepgaande analyses, weekschema's en kostenplaatjes. Zonder gokwerk.
      </p>
      <div className="hero-cta">
        <button className="btn btn-primary btn-lg" onClick={() => onNav('quiz')}>
          Start de quiz {Icon.arrow}
        </button>
        <button className="btn btn-secondary btn-lg" onClick={() => onNav('breeds')}>
          Bekijk alle rassen
        </button>
      </div>
      <div className="hero-stats">
        <div className="hero-stat">
          <div className="num">200+</div>
          <div className="lbl">Hondenrassen<br/>volledig geanalyseerd</div>
        </div>
        <div className="hero-stat">
          <div className="num">13</div>
          <div className="lbl">Vragen voor<br/>een echte match</div>
        </div>
        <div className="hero-stat">
          <div className="num">94%</div>
          <div className="lbl">Tevreden<br/>baasjes (n=2.847)</div>
        </div>
      </div>
    </div>
  );
  const heroImage = <div className="hero-image"></div>;
  const heroTag = (
    <div className="hero-tag">
      <span className="dot"></span>
      <div className="tag-txt">
        <b>2.847 mensen</b>
        vonden hun match deze maand
      </div>
    </div>
  );

  return (
    <>
      {/* HERO */}
      <section className="hero">
        <div className="container-wide" style={{ position: 'relative', minHeight: 'inherit' }}>
          <div className="hero-grid" style={
            heroLayout === 'centered' ? { gridTemplateColumns: '1fr', textAlign: 'center' } : {}
          }>
            {heroContent}
            {heroLayout !== 'centered' && heroImage}
          </div>
          {heroTag}
        </div>
      </section>

      {/* QUIZ BANNER */}
      <section className="section">
        <div className="container-wide">
          <div className="quiz-banner">
            <div>
              <span className="upper" style={{ color: 'var(--terracotta-soft)' }}>Hondenmatch · 4 minuten</span>
              <h2 className="serif" style={{ marginTop: 14 }}>
                Niet elke hond <span className="ital">past</span><br/>
                bij elk leven.
              </h2>
              <p>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.</p>
              <button className="btn btn-tc btn-lg" style={{ marginTop: 32 }} onClick={() => onNav('quiz')}>
                Start de match {Icon.arrow}
              </button>
            </div>
            <div className="quiz-art">
              <div className="quiz-art-q">Vraag 3 van 13</div>
              <div className="quiz-art-question">Wat past het best bij jouw levensstijl?</div>
              <div className="quiz-art-opts">
                <div className="quiz-art-opt">Rustig — wandelingen, op de bank</div>
                <div className="quiz-art-opt sel">Gemiddeld — fietsen, boswandelingen</div>
                <div className="quiz-art-opt">Actief — hardlopen, sporten met hond</div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* FEATURED BREEDS */}
      <section className="section-tight">
        <div className="container-wide">
          <div className="section-head">
            <div>
              <div className="section-eyebrow">Populaire rassen</div>
              <h2 className="serif">Een kleine selectie<br/>uit onze 200+ rassen</h2>
            </div>
            <p>Van de altijd vrolijke Labrador tot de eigenwijze Shiba Inu — elk ras heeft een eigen verhaal, eigen behoeften en eigen baasje.</p>
          </div>
          <div className="breed-grid">
            {featured.map(b => <BreedCard key={b.id} breed={b} onClick={() => onSelectBreed(b)} />)}
          </div>
          <div style={{ textAlign: 'center', marginTop: 48 }}>
            <button className="btn btn-secondary" onClick={() => onNav('breeds')}>
              Bekijk alle 200+ rassen {Icon.arrow}
            </button>
          </div>
        </div>
      </section>

      {/* DUTCH BREEDS — magazine row */}
      <section className="section">
        <div className="container-wide">
          <div className="section-head">
            <div>
              <div className="section-eyebrow">Made in Holland</div>
              <h2 className="serif">Nederlandse rassen<br/>die we koesteren</h2>
            </div>
          </div>
          <div className="breed-grid">
            {dutchBreeds.map(b => <BreedCard key={b.id} breed={b} onClick={() => onSelectBreed(b)} />)}
            {/* article card */}
            <article className="breed-card" style={{ background: 'var(--forest)', color: 'var(--cream)', borderColor: 'var(--forest)' }}>
              <div className="breed-info" style={{ padding: 28 }}>
                <span className="upper" style={{ color: 'var(--terracotta-soft)' }}>Lange-lees · 8 min</span>
                <h3 className="serif" style={{ color: 'var(--cream)', fontSize: 26, marginTop: 12, marginBottom: 12 }}>
                  Waarom Nederlandse rassen zo bijzonder zijn
                </h3>
                <p className="desc" style={{ color: 'rgba(246,239,228,.8)' }}>
                  Drentse Patrijshond, Stabij, Kooikerhondje — onze polders bracht honden voort die zachtaardig en allround zijn.
                </p>
                <button className="btn btn-tc btn-sm" style={{ marginTop: 20, alignSelf: 'flex-start' }}>Lees verder</button>
              </div>
            </article>
          </div>
        </div>
      </section>

      {/* SHOP TEASER */}
      <section className="section-tight">
        <div className="container-wide">
          <div className="section-head">
            <div>
              <div className="section-eyebrow">Webshop</div>
              <h2 className="serif">Alles voor een<br/>gelukkige hond</h2>
            </div>
            <p>Van de eerste mand tot de senior-supplementen. Wij testen, jij geniet.</p>
          </div>
          <div className="cat-grid">
            {window.DATA.CATEGORIES.map(c => (
              <div key={c.id} className="cat-card" onClick={() => onNav('shop')}>
                <div className="icon">{c.icon}</div>
                <div className="nm">{c.name}</div>
                <div className="ct">{c.count} producten</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* TRUST / EDITORIAL */}
      <section className="section">
        <div className="container-wide">
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'center' }}>
            <div className="detail-photo" style={{ aspectRatio: '4/5' }}>
              <span className="ph-label">PHOTO · DOG TRAINER WITH PUP</span>
            </div>
            <div>
              <div className="section-eyebrow">Het verhaal</div>
              <h2 className="serif" style={{ marginBottom: 24 }}>Een hond is voor het leven —<br/>laten we de juiste keuze maken.</h2>
              <p style={{ color: 'var(--ink-2)', fontSize: 17, marginBottom: 16, lineHeight: 1.65 }}>
                Elk jaar belanden 25.000 honden in Nederlandse asielen, vaak omdat het niet de juiste match was. Daar willen we iets aan doen.
              </p>
              <p style={{ color: 'var(--ink-2)', fontSize: 17, marginBottom: 32, lineHeight: 1.65 }}>
                Pootje is gebouwd door dierenartsen, gedragsdeskundigen en — vooral — bezorgde hondenliefhebbers. Onze quiz kijkt verder dan uiterlijk; wij wegen wie jij echt bent.
              </p>
              <button className="btn btn-secondary">Lees meer over ons</button>
            </div>
          </div>
        </div>
      </section>
    </>
  );
}

// ============================================================
// 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 (
    <div className="quiz-stage">
      <div className="container">
        {/* Progress */}
        <div className="quiz-progress-row">
          <span className="quiz-progress-num">{String(step + 1).padStart(2, '0')} / {String(Q.length).padStart(2, '0')}</span>
          <div className="quiz-progress-bar">
            <div className="quiz-progress-fill" style={{ width: progress + '%' }}></div>
          </div>
          <span className="quiz-progress-num upper" style={{ color: 'var(--forest)' }}>Hondenmatch</span>
        </div>

        {/* Question */}
        <div className="quiz-card" key={step}>
          <div style={{ animation: 'qFade .35s ease' }}>
            <div className="upper" style={{ color: 'var(--terracotta)', marginBottom: 14 }}>
              Vraag {step + 1}
            </div>
            <h1 className="quiz-q">{current.question}</h1>
            {current.help && <p className="quiz-help">{current.help}</p>}
            <div className="quiz-options">
              {current.options.map(opt => (
                <button
                  key={opt.v}
                  className={`quiz-option ${answers[current.id] === opt.v ? 'selected' : ''}`}
                  onClick={() => select(opt.v)}
                >
                  <span>{opt.label}</span>
                  <span className="check"></span>
                </button>
              ))}
            </div>
            <div className="quiz-nav">
              <button className="btn btn-ghost" onClick={back} disabled={step === 0} style={{ visibility: step === 0 ? 'hidden' : 'visible' }}>
                {Icon.arrowL} Terug
              </button>
              <span className="muted" style={{ fontSize: 13 }}>Druk op een antwoord om verder te gaan</span>
            </div>
          </div>
        </div>
      </div>
      <style>{`
        @keyframes qFade {
          from { opacity: 0; transform: translateY(20px); }
          to { opacity: 1; transform: translateY(0); }
        }
      `}</style>
    </div>
  );
}

// ============================================================
// 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 (
    <div style={{ background: 'var(--paper)', minHeight: 'calc(100vh - 68px)' }}>
      <section className="result-hero">
        <div className="container">
          <div className="result-hero-inner">
            <div className="upper" style={{ color: 'var(--terracotta-soft)', marginBottom: 18, opacity: revealed ? 1 : 0, transition: 'opacity .5s' }}>
              · Jouw match ·
            </div>
            <h1 className="serif" style={{
              fontSize: 'clamp(48px, 8vw, 96px)',
              opacity: revealed ? 1 : 0,
              transform: revealed ? 'translateY(0)' : 'translateY(20px)',
              transition: 'all .8s cubic-bezier(.2,.8,.2,1)'
            }}>
              Jij past bij<br/>
              <span className="name">{top.name}</span>
            </h1>
            <div className="result-percent" style={{ opacity: revealed ? 1 : 0, transition: 'opacity .5s .4s' }}>
              <span>Geschiktheid</span>
              <span className="big">{top.score}%</span>
            </div>
          </div>
        </div>
      </section>

      <div className="container">
        <div className="result-cards">
          {/* Main result */}
          <div className="result-card">
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 24, flexWrap: 'wrap', marginBottom: 24 }}>
              <div>
                <h2 className="serif" style={{ fontSize: 38, marginBottom: 8 }}>{top.name}</h2>
                <div className="muted">{top.group} · {top.size} · {top.lifespan} · {top.price}</div>
              </div>
              <div style={{ display: 'flex', gap: 8 }}>
                <button className="btn btn-ghost btn-sm">{Icon.share} Deel</button>
                <button className="btn btn-ghost btn-sm">{Icon.heart} Bewaar</button>
              </div>
            </div>

            <div className="detail-photo" style={{ aspectRatio: '16/9', marginBottom: 24 }}>
              <span className="ph-label">PHOTO · {top.name.toUpperCase()}</span>
            </div>

            <p style={{ fontSize: 17, lineHeight: 1.6, marginBottom: 28, textWrap: 'pretty' }}>
              <b>Waarom deze match?</b> {top.short} Op basis van jouw antwoorden over woonsituatie, energieniveau en ervaring zien wij dat dit ras bijzonder goed bij jouw leven aansluit.
            </p>

            <h3 className="serif" style={{ fontSize: 22, marginBottom: 16 }}>Karaktereigenschappen</h3>
            <TraitBars traits={top.traits} />

            <div style={{ display: 'flex', gap: 12, marginTop: 32 }}>
              <button className="btn btn-primary" onClick={() => onSelectBreed(top)}>
                Bekijk volledige analyse {Icon.arrow}
              </button>
              <button className="btn btn-ghost" onClick={() => onNav('quiz')}>Opnieuw doen</button>
            </div>
          </div>

          {/* Sidebar — runners-up */}
          <div>
            <div className="result-card" style={{ marginBottom: 24 }}>
              <h3 className="serif" style={{ fontSize: 22, marginBottom: 18 }}>Top 3 matches</h3>
              <div className="runners">
                {ranked.slice(0, 3).map((b, i) => (
                  <div key={b.id} className="runner" onClick={() => onSelectBreed(b)}>
                    <div className="runner-thumb">
                      <span className="upper muted" style={{ fontSize: 9 }}>#{i+1}</span>
                    </div>
                    <div className="runner-info">
                      <b style={{ display: 'block' }}>{b.name}</b>
                      <span className="pct">{b.score}% match · {b.size}</span>
                    </div>
                    {Icon.arrow}
                  </div>
                ))}
              </div>
            </div>

            <div className="result-card" style={{ background: 'var(--forest)', color: 'var(--cream)', borderColor: 'var(--forest)' }}>
              <span className="upper" style={{ color: 'var(--terracotta-soft)' }}>Volgende stap</span>
              <h3 className="serif" style={{ fontSize: 26, marginTop: 10, marginBottom: 14, color: 'var(--cream)' }}>Klaar voor je hond?</h3>
              <p style={{ color: 'rgba(246,239,228,.85)', fontSize: 14, lineHeight: 1.55, marginBottom: 20 }}>
                Bekijk ons starterpakket voor {top.name} — alles wat je de eerste maand nodig hebt.
              </p>
              <button className="btn btn-tc btn-sm" onClick={() => onNav('shop')}>Bekijk starterpakket</button>
            </div>

            <div className="result-card" style={{ marginTop: 24 }}>
              <h3 className="serif" style={{ fontSize: 22, marginBottom: 16 }}>Vergelijk je top 3</h3>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                {['energie', 'verzorging', 'kindvriendelijk', 'training'].map(k => (
                  <div key={k} style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 4, alignItems: 'center' }}>
                    {ranked.slice(0, 3).map(b => (
                      <div key={b.id} style={{ height: 4, background: 'var(--cream-2)', borderRadius: 999, overflow: 'hidden' }}>
                        <div style={{ height: '100%', background: 'var(--forest)', width: ((b.traits[k] || 0) / 5 * 100) + '%' }}></div>
                      </div>
                    ))}
                    <div style={{ gridColumn: '1 / -1', fontSize: 11, color: 'var(--muted)', marginTop: -2, textAlign: 'center' }}>{k}</div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>

        {/* Other matches */}
        <section className="section">
          <h2 className="serif" style={{ marginBottom: 8 }}>Ook geschikt voor jou</h2>
          <p className="muted" style={{ marginBottom: 32 }}>Op plek 4 tot 8 — net iets minder perfect, maar zeker overweging waard.</p>
          <div className="breed-grid">
            {ranked.slice(3, 11).map(b => <BreedCard key={b.id} breed={b} onClick={() => onSelectBreed(b)} />)}
          </div>
        </section>
      </div>
    </div>
  );
}

// ============================================================
// BREED DETAIL
// ============================================================
function BreedDetailScreen({ breed, onBack, onSelectBreed, onNav }) {
  return (
    <div style={{ background: 'var(--paper)' }}>
      <div className="container" style={{ paddingTop: 40, paddingBottom: 96 }}>
        <button className="btn btn-ghost btn-sm" onClick={onBack} style={{ marginBottom: 32 }}>
          {Icon.arrowL} Terug
        </button>

        {/* Header */}
        <div className="article-meta">
          <span>{breed.group}</span>
          <span className="dot"></span>
          <span>Origineel uit {breed.origin}</span>
          <span className="dot"></span>
          <span>{breed.lifespan}</span>
        </div>
        <h1 className="serif" style={{ fontSize: 'clamp(48px, 7vw, 88px)', marginBottom: 20 }}>{breed.name}</h1>
        <p style={{ fontSize: 22, color: 'var(--ink-2)', maxWidth: 720, marginBottom: 48, fontFamily: 'var(--font-serif)', fontStyle: 'italic', lineHeight: 1.35 }}>
          {breed.short}
        </p>

        {/* Photo + facts grid */}
        <div className="detail-grid">
          <div className="detail-photo">
            <span className="ph-label">PHOTO · {breed.name.toUpperCase()} · ADULT</span>
          </div>
          <div className="fact-grid">
            <div className="fact"><div className="lbl">Formaat</div><div className="val">{breed.size}</div></div>
            <div className="fact"><div className="lbl">Gewicht</div><div className="val">{breed.weight}</div></div>
            <div className="fact"><div className="lbl">Levensduur</div><div className="val">{breed.lifespan}</div></div>
            <div className="fact"><div className="lbl">Pup-prijs</div><div className="val">{breed.price}</div></div>
            <div className="fact"><div className="lbl">Beweging</div><div className="val">{breed.care.beweging}</div></div>
            <div className="fact"><div className="lbl">Voer/maand</div><div className="val">{breed.care.voer}</div></div>
          </div>
        </div>

        {/* Unique — eerlijk profiel */}
        {breed.unique && (
          <div className="panel">
            <h3 className="serif">Wat je écht moet weten</h3>
            <p className="muted" style={{ marginBottom: 22 }}>De eerlijke versie — zonder mooi-praterij. Lees dit voordat je beslist.</p>

            <div className="unique-quirk">
              <span className="quirk-label">De eigenaardigheid</span>
              <span className="quirk-body">{breed.unique.quirk}</span>
            </div>

            <div className="unique-grid">
              <div className="unique-cell">
                <span className="lbl">Wat je vooraf moet weten</span>
                <span className="body">{breed.unique.knowBefore}</span>
              </div>
              <div className="unique-cell warn">
                <span className="lbl">Rode vlaggen / gezondheid</span>
                <span className="body">{breed.unique.redFlags}</span>
              </div>
              <div className="unique-cell">
                <span className="lbl">Past perfect bij</span>
                <span className="body">{breed.unique.perfectFor}</span>
              </div>
              <div className="unique-cell warn">
                <span className="lbl">Past níet bij</span>
                <span className="body">{breed.unique.notFor}</span>
              </div>
              <div className="unique-cell fact" style={{ gridColumn: '1 / -1' }}>
                <span className="lbl">Wist je dat?</span>
                <span className="body">{breed.unique.funFact}</span>
              </div>
            </div>
          </div>
        )}

        {/* Traits panel */}
        <div className="panel">
          <h3 className="serif">Karakteranalyse</h3>
          <p className="muted" style={{ marginBottom: 24 }}>Op een schaal van 1 tot 5, gebaseerd op rasstandaard en gedragsstudies.</p>
          <TraitBars traits={breed.traits} />
        </div>

        {/* Cost panel */}
        <div className="panel">
          <h3 className="serif">Wat kost een {breed.name}?</h3>
          <p className="muted" style={{ marginBottom: 8 }}>Maandelijkse kosten over een gemiddeld hondenleven.</p>
          <CostChart breed={breed} />
        </div>

        {/* Schedule panel */}
        <div className="panel">
          <h3 className="serif">Een week in beeld</h3>
          <p className="muted" style={{ marginBottom: 8 }}>Hoe ziet een normale week eruit met deze hond?</p>
          <ScheduleChart breed={breed} />
        </div>

        {/* Verzorging detail */}
        <div className="panel">
          <h3 className="serif">Verzorging & opvoeding</h3>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 32, marginTop: 8 }}>
            {Object.entries(breed.care).map(([k, v]) => (
              <div key={k}>
                <div className="upper muted" style={{ marginBottom: 8 }}>{ {beweging:'Beweging',voer:'Voer',grooming:'Vacht',training:'Training'}[k] }</div>
                <p style={{ fontSize: 16 }}>{v}</p>
              </div>
            ))}
          </div>
        </div>

        {/* Quiz CTA */}
        <div style={{ background: 'var(--forest)', color: 'var(--cream)', borderRadius: 'var(--radius-lg)', padding: 48, textAlign: 'center', marginTop: 40 }}>
          <span className="upper" style={{ color: 'var(--terracotta-soft)' }}>Niet zeker?</span>
          <h2 className="serif" style={{ color: 'var(--cream)', marginTop: 12, marginBottom: 12 }}>Doe de match-quiz</h2>
          <p style={{ color: 'rgba(246,239,228,.8)', maxWidth: 480, margin: '0 auto 24px' }}>Misschien past een ander ras juist beter bij jou. In 4 minuten weet je het zeker.</p>
          <button className="btn btn-tc btn-lg" onClick={() => onNav('quiz')}>Start de quiz {Icon.arrow}</button>
        </div>
      </div>
    </div>
  );
}

// ============================================================
// 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 (
    <div style={{ background: 'var(--paper)' }}>
      <div className="container-wide" style={{ paddingTop: 64, paddingBottom: 96 }}>
        <div className="section-eyebrow">Rassen-encyclopedie</div>
        <h1 className="serif" style={{ marginBottom: 16 }}>Alle hondenrassen<br/>in één overzicht</h1>
        <p className="muted" style={{ fontSize: 17, maxWidth: 600, marginBottom: 40 }}>
          {window.DATA.ALL_BREEDS.length} rassen, gerangschikt en filterbaar. Zoek op naam, formaat of doelgroep.
        </p>

        {/* Search */}
        <div style={{ position: 'relative', marginBottom: 16, maxWidth: 480 }}>
          <input
            type="text"
            placeholder="Zoek een ras..."
            value={search}
            onChange={(e) => 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'
            }}
          />
          <span style={{ position: 'absolute', left: 16, top: '50%', transform: 'translateY(-50%)', color: 'var(--muted)' }}>{Icon.search}</span>
        </div>

        {/* Filters */}
        <div className="filters">
          <span className="upper muted" style={{ alignSelf: 'center', marginRight: 8 }}>Formaat</span>
          {sizes.map(s => (
            <button key={s} className={`chip ${filterSize === s ? 'active' : ''}`} onClick={() => setFilterSize(s)}>
              {s === 'all' ? 'Alle' : s}
            </button>
          ))}
        </div>
        <div className="filters">
          <span className="upper muted" style={{ alignSelf: 'center', marginRight: 8 }}>Groep</span>
          {groups.map(g => (
            <button key={g} className={`chip ${filterGroup === g ? 'active' : ''}`} onClick={() => setFilterGroup(g)}>
              {g === 'all' ? 'Alle' : g}
            </button>
          ))}
        </div>

        <p className="muted" style={{ marginBottom: 24, fontSize: 13 }}>
          <span className="mono">{breeds.length}</span> rassen gevonden
        </p>

        <div className="breed-grid">
          {breeds.slice(0, 60).map(b => <BreedCard key={b.id} breed={b} onClick={() => onSelectBreed(b)} />)}
        </div>
        {breeds.length > 60 && (
          <div style={{ textAlign: 'center', marginTop: 48 }}>
            <button className="btn btn-secondary">Laad meer ({breeds.length - 60})</button>
          </div>
        )}
      </div>
    </div>
  );
}

// ============================================================
// 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 (
    <div style={{ background: 'var(--paper)' }}>
      <div className="container-wide" style={{ paddingTop: 64, paddingBottom: 96 }}>
        <div className="section-eyebrow">Webshop</div>
        <h1 className="serif" style={{ marginBottom: 16 }}>Alles voor jouw<br/>nieuwe huisgenoot</h1>
        <p className="muted" style={{ fontSize: 17, maxWidth: 600, marginBottom: 48 }}>
          Zorgvuldig geselecteerd door dierenartsen, gedragsdeskundigen en hondenliefhebbers. Gratis verzending vanaf €40.
        </p>

        {/* Categories */}
        <div className="cat-grid" style={{ marginBottom: 48 }}>
          <div className={`cat-card ${activeCat === 'all' ? 'active' : ''}`} onClick={() => setActiveCat('all')} style={activeCat === 'all' ? { background: 'var(--forest)', color: 'var(--cream)' } : {}}>
            <div className="icon">🐾</div>
            <div className="nm">Alles</div>
            <div className="ct" style={activeCat === 'all' ? { color: 'rgba(246,239,228,.7)' } : {}}>{window.DATA.PRODUCTS.length} producten</div>
          </div>
          {window.DATA.CATEGORIES.map(c => (
            <div key={c.id} className="cat-card" onClick={() => setActiveCat(c.id)} style={activeCat === c.id ? { background: 'var(--forest)', color: 'var(--cream)' } : {}}>
              <div className="icon">{c.icon}</div>
              <div className="nm">{c.name}</div>
              <div className="ct" style={activeCat === c.id ? { color: 'rgba(246,239,228,.7)' } : {}}>{c.count} producten</div>
            </div>
          ))}
        </div>

        {/* Featured banner */}
        {activeCat === 'all' && (
          <div style={{
            background: 'linear-gradient(135deg, var(--cream-2) 0%, var(--cream) 100%)',
            borderRadius: 'var(--radius-lg)', padding: 48,
            display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 32,
            marginBottom: 48, alignItems: 'center'
          }}>
            <div>
              <span className="upper" style={{ color: 'var(--terracotta)' }}>Compleet pakket</span>
              <h2 className="serif" style={{ marginTop: 8, marginBottom: 12 }}>Puppy Starterpakket</h2>
              <p style={{ marginBottom: 20, color: 'var(--ink-2)', maxWidth: 480 }}>
                Alles wat je puppy de eerste maand nodig heeft — mand, voer, riem, halsband, speelgoed, snacks. Bespaar €46.
              </p>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 12, marginBottom: 20 }}>
                <span className="serif" style={{ fontSize: 36 }}>€199,–</span>
                <span style={{ textDecoration: 'line-through', color: 'var(--muted)' }}>€245,–</span>
              </div>
              <button className="btn btn-primary">Bekijk pakket {Icon.arrow}</button>
            </div>
            <div className="detail-photo" style={{ aspectRatio: '4/3', margin: 0 }}>
              <span className="ph-label">PHOTO · STARTERPAKKET FLATLAY</span>
            </div>
          </div>
        )}

        <div className="product-grid">
          {products.map(p => (
            <ProductCard key={p.id} product={p} inCart={cart[p.id]} onAdd={onAdd} />
          ))}
        </div>
      </div>
    </div>
  );
}

// ============================================================
// 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 (
    <div style={{ background: 'var(--paper)', minHeight: 'calc(100vh - 68px)' }}>
      <div className="container" style={{ paddingTop: 64, paddingBottom: 96 }}>
        <div className="section-eyebrow">Kennisbank</div>
        <h1 className="serif" style={{ marginBottom: 16 }}>Alles wat je moet weten<br/>over hondenleven</h1>
        <p className="muted" style={{ fontSize: 17, maxWidth: 600, marginBottom: 48 }}>
          Geschreven door dierenartsen, gedragsdeskundigen en ervaren baasjes.
        </p>

        <div className="breed-grid">
          {articles.map((a, i) => (
            <article key={i} className="breed-card">
              <div className="breed-photo">
                <span className="ph-label">EDITORIAL · {a.cat.toUpperCase()}</span>
              </div>
              <div className="breed-info">
                <div className="article-meta" style={{ marginBottom: 12 }}>
                  <span>{a.cat}</span>
                  <span className="dot"></span>
                  <span>{a.read} lezen</span>
                </div>
                <h3 style={{ fontSize: 22, marginBottom: 14 }}>{a.title}</h3>
                <button className="btn btn-ghost btn-sm" style={{ alignSelf: 'flex-start' }}>Lees verder {Icon.arrow}</button>
              </div>
            </article>
          ))}
        </div>
      </div>
    </div>
  );
}

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