// ============================================================
// SCREENS — Home, Quiz, Result, BreedDetail, Catalog, Shop, Guide
// ============================================================
const { useState: useS, useEffect: useE, useMemo: useM, useRef: useR } = React;

function HomeScreen({ onNav, onSelectBreed, t }) {
  const featured = window.DATA.BREEDS.slice(0, 8);
  const dutchBreeds = window.DATA.BREEDS.filter(b => b.tags?.includes('nederlands'));
  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 (
    <>
      <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>

      <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.</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>

      <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.</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>

      <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 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>

      <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>

      <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.</p>
              <p style={{ color: 'var(--ink-2)', fontSize: 17, marginBottom: 32, lineHeight: 1.65 }}>Pootje is gebouwd door dierenartsen, gedragsdeskundigen en — vooral — bezorgde hondenliefhebbers.</p>
              <button className="btn btn-secondary">Lees meer over ons</button>
            </div>
          </div>
        </div>
      </section>
    </>
  );
}

function QuizScreen({ onComplete, t }) {
  const [step, setStep] = useS(0);
  const [answers, setAnswers] = useS({});
  const [direction, setDirection] = useS(0);
  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">
        <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>
        <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>
  );
}

function ResultScreen({ answers, onNav, onSelectBreed, t }) {
  const ranked = useM(() => {
    return [...window.DATA.ALL_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 tm = setTimeout(() => setRevealed(true), 600); return () => clearTimeout(tm); }, []);

  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">
          <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 }}><b>Waarom deze match?</b> {top.short}</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')}>Quiz opnieuw</button>
            </div>
          </div>
          <div>
            <div className="result-card" style={{ marginBottom: 20 }}>
              <h3 className="serif" style={{ fontSize: 22, marginBottom: 16 }}>Ook interessant</h3>
              <div className="runners">
                {ranked.slice(1, 4).map(b => (
                  <div key={b.id} className="runner" onClick={() => onSelectBreed(b)}>
                    <div className="runner-thumb"><span style={{ fontSize: 22 }}>🐶</span></div>
                    <div className="runner-info">
                      <b>{b.name}</b>
                      <div className="pct">{b.score}% match</div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
            <div className="result-card" style={{ background: 'var(--forest)', color: 'var(--cream)' }}>
              <div className="upper" style={{ color: 'var(--terracotta-soft)', marginBottom: 12 }}>Pootje Plus</div>
              <h3 className="serif" style={{ color: 'var(--cream)', marginBottom: 12, fontSize: 24 }}>Ontgrendel alle 200+ ras-gidsen</h3>
              <p style={{ color: 'rgba(246,239,228,.8)', fontSize: 14, marginBottom: 20 }}>Compleet kostenoverzicht, weekschema en persoonlijk matchadvies per ras.</p>
              <button className="btn btn-tc btn-sm full" onClick={() => onNav('lid')}>Word lid →</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function BreedDetailScreen({ breed, onBack, onSelectBreed, onNav }) {
  if (!breed) return null;
  const [bqDone, setBqDone] = useS(false);
  const bundle = window.DATA.bundleForBreed(breed);
  const related = window.DATA.BREEDS.filter(b => b.group === breed.group && b.id !== breed.id).slice(0, 3);

  return (
    <div style={{ background: 'var(--paper)', minHeight: 'calc(100vh - 68px)' }}>
      <div className="container" style={{ paddingTop: 48, paddingBottom: 96 }}>
        <button className="btn btn-ghost btn-sm" style={{ marginBottom: 32 }} onClick={onBack}>{Icon.arrowL} Terug</button>

        <div className="article-meta">
          <span>{breed.group}</span>
          <span className="dot"></span>
          <span>{breed.origin}</span>
          <span className="dot"></span>
          <span>{breed.size}</span>
          <span className="dot"></span>
          <span>{breed.lifespan}</span>
        </div>

        <h1 className="serif" style={{ fontSize: 'clamp(40px, 6vw, 80px)', marginBottom: 14 }}>{breed.name}</h1>
        <p style={{ fontSize: 20, color: 'var(--ink-2)', maxWidth: 680, marginBottom: 40, fontFamily: 'var(--font-serif)', fontStyle: 'italic' }}>{breed.short}</p>

        <div className="detail-grid">
          <div className="detail-photo">
            <span className="ph-label">FOTO · {breed.name.toUpperCase()}</span>
          </div>
          <div className="fact-grid">
            {[
              ['Gewicht', breed.weight],
              ['Levensspan', breed.lifespan],
              ['Oorsprong', breed.origin],
              ['Prijs pup', breed.price],
              ['Beweging', breed.care.beweging],
              ['Voer/mnd', breed.care.voer],
            ].map(([l, v]) => (
              <div key={l} className="fact">
                <div className="lbl">{l}</div>
                <div className="val">{v}</div>
              </div>
            ))}
          </div>
        </div>

        {breed.unique && (
          <>
            <div className="unique-quirk">
              <span className="quirk-label">Karakter-eigenaardigheid</span>
              <span className="quirk-body">{breed.unique.quirk}</span>
            </div>
            <div className="unique-grid">
              <div className="unique-cell">
                <span className="lbl">Perfect voor</span>
                <span className="body">{breed.unique.perfectFor}</span>
              </div>
              <div className="unique-cell warn">
                <span className="lbl">Niet voor</span>
                <span className="body">{breed.unique.notFor}</span>
              </div>
              <div className="unique-cell">
                <span className="lbl">Weet dit voor je begint</span>
                <span className="body">{breed.unique.knowBefore}</span>
              </div>
              <div className="unique-cell warn">
                <span className="lbl">Rode vlaggen</span>
                <span className="body">{breed.unique.redFlags}</span>
              </div>
            </div>
          </>
        )}

        <div className="panel" style={{ marginTop: 32 }}>
          <h3 className="serif">Karaktereigenschappen</h3>
          <TraitBars traits={breed.traits} />
        </div>

        <div className="panel">
          <h3 className="serif">Kosten per maand</h3>
          <CostChart breed={breed} />
        </div>

        <div className="panel">
          <h3 className="serif">Dagschema (voorbeeld)</h3>
          <ScheduleChart breed={breed} />
        </div>

        <BreedQuiz breed={breed} onSelectBreed={onSelectBreed} onNav={onNav} />

        <div style={{ marginTop: 48 }}>
          <div className="section-eyebrow">Aanbevolen voor {breed.name}</div>
          <h2 className="serif" style={{ marginBottom: 28 }}>Wat heb je allemaal nodig?</h2>
          <div className="bundle-grid">
            {bundle.map(p => (
              <div key={p.id} className="bundle-card">
                <div className="bundle-thumb"><span className="ph-label">{p.tag}</span></div>
                <div className="bundle-info">
                  <span className="bundle-brand">{p.brand}</span>
                  <b>{p.name}</b>
                  <span className="bundle-price">€{p.price.toFixed(2)}</span>
                </div>
              </div>
            ))}
          </div>
        </div>

        {related.length > 0 && (
          <div style={{ marginTop: 64 }}>
            <div className="section-eyebrow">Vergelijkbare rassen</div>
            <h2 className="serif" style={{ marginBottom: 28 }}>Ook interessant in {breed.group}</h2>
            <div className="breed-grid">
              {related.map(b => <BreedCard key={b.id} breed={b} onClick={() => onSelectBreed(b)} />)}
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

function CatalogScreen({ onSelectBreed }) {
  const [filter, setFilter] = useS('Alle');
  const [search, setSearch] = useS('');
  const groups = ['Alle', ...new Set(window.DATA.ALL_BREEDS.filter(b => !b.isFiller).map(b => b.group))];
  const filtered = useM(() => {
    return window.DATA.ALL_BREEDS.filter(b => {
      const matchGroup = filter === 'Alle' || b.group === filter;
      const matchSearch = !search || b.name.toLowerCase().includes(search.toLowerCase());
      return matchGroup && matchSearch;
    });
  }, [filter, search]);
  return (
    <div style={{ background: 'var(--paper)', minHeight: 'calc(100vh - 68px)' }}>
      <div className="container" style={{ paddingTop: 64, paddingBottom: 96 }}>
        <div className="section-eyebrow">Alle rassen</div>
        <h1 className="serif" style={{ marginBottom: 12 }}>200+ hondenrassen,<br/><span style={{ fontStyle: 'italic' }}>volledig geanalyseerd.</span></h1>
        <p style={{ color: 'var(--muted)', marginBottom: 40, maxWidth: 560, fontSize: 17 }}>Van de trouwe Labrador tot de exotische Xoloitzcuintli — elk ras heeft z’n eigen karakter, zorgbehoefte en perfecte baasje.</p>
        <input type="search" value={search} onChange={e => setSearch(e.target.value)}
          placeholder="Zoek een ras..."
          style={{ width: '100%', maxWidth: 440, padding: '12px 18px', border: '1px solid var(--line)', borderRadius: 999, fontSize: 15, background: 'white', marginBottom: 8, display: 'block' }} />
        <div className="filters">
          {groups.map(g => (
            <button key={g} className={`chip ${filter === g ? 'active' : ''}`} onClick={() => setFilter(g)}>{g}</button>
          ))}
        </div>
        <div className="breed-grid">
          {filtered.map(b => <BreedCard key={b.id} breed={b} onClick={() => !b.isFiller && onSelectBreed(b)} />)}
        </div>
      </div>
    </div>
  );
}

function ShopScreen({ cart, onAdd }) {
  const [cat, setCat] = useS('alle');
  const filtered = cat === 'alle' ? window.DATA.PRODUCTS : window.DATA.PRODUCTS.filter(p => p.cat === cat);
  return (
    <div style={{ background: 'var(--paper)', minHeight: 'calc(100vh - 68px)' }}>
      <div className="container" style={{ paddingTop: 64, paddingBottom: 96 }}>
        <div className="section-eyebrow">Webshop</div>
        <h1 className="serif" style={{ marginBottom: 12 }}>Alles voor een<br/><span style={{ fontStyle: 'italic' }}>gelukkige hond.</span></h1>
        <p style={{ color: 'var(--muted)', marginBottom: 48, fontSize: 17 }}>Geselecteerde producten, getest en goedgekeurd door Pootje-redacteuren.</p>
        <div className="cat-grid" style={{ marginBottom: 40 }}>
          {[{ id: 'alle', name: 'Alles', icon: '🐾', count: window.DATA.PRODUCTS.length }, ...window.DATA.CATEGORIES].map(c => (
            <div key={c.id} className={`cat-card ${cat === c.id ? 'active' : ''}`} onClick={() => setCat(c.id)} style={cat === c.id ? { borderColor: 'var(--forest)', background: 'var(--paper)' } : {}}>
              <div className="icon">{c.icon}</div>
              <div className="nm">{c.name}</div>
              <div className="ct">{c.count} items</div>
            </div>
          ))}
        </div>
        <div className="product-grid">
          {filtered.map(p => <ProductCard key={p.id} product={p} inCart={!!cart[p.id]} onAdd={onAdd} />)}
        </div>
      </div>
    </div>
  );
}

function GuideScreen({ onNav }) {
  const articles = [
    { tag: 'Gedrag', title: 'Hoe leer je je hond alleen te zijn?', min: 6, img: 'GEDRAG' },
    { tag: 'Voeding', title: 'Rauw voer: voor- en nadelen', min: 8, img: 'VOEDING' },
    { tag: 'Gezondheid', title: 'Vaccinaties: wat is verplicht in NL?', min: 5, img: 'GEZONDHEID' },
    { tag: 'Opvoeding', title: 'Clicker-training stap voor stap', min: 10, img: 'OPVOEDING' },
    { tag: 'Ras-gidsen', title: 'Border Collie vs. Australian Shepherd', min: 7, img: 'RASSEN' },
    { tag: 'Budget', title: 'Wat kost een hond echt per jaar?', min: 4, img: 'BUDGET' },
  ];
  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: 12 }}>Alles over<br/><span style={{ fontStyle: 'italic' }}>hondenbezit.</span></h1>
        <p style={{ color: 'var(--muted)', marginBottom: 56, fontSize: 17 }}>Geschreven door dierenartsen en gedragsdeskundigen. Geen reclame, alleen kennis.</p>
        <div className="breed-grid">
          {articles.map((a, i) => (
            <article key={i} className="breed-card" style={{ cursor: 'pointer' }}>
              <div className="breed-photo">
                <span className="ph-label">ARTIKEL · {a.img}</span>
              </div>
              <div className="breed-info">
                <div className="meta">{a.tag} · {a.min} min lezen</div>
                <h3>{a.title}</h3>
              </div>
            </article>
          ))}
        </div>
        <div style={{ marginTop: 64, background: 'var(--forest)', color: 'var(--cream)', borderRadius: 'var(--radius-lg)', padding: '48px 40px', textAlign: 'center' }}>
          <div className="section-eyebrow" style={{ color: 'var(--terracotta-soft)' }}>Nieuwsbrief</div>
          <h2 className="serif" style={{ color: 'var(--cream)', marginBottom: 16 }}>Hondenkennis in je inbox</h2>
          <p style={{ color: 'rgba(246,239,228,.8)', marginBottom: 28 }}>Wekelijks: gedrag, gezondheid en ras-inzichten van onze experts.</p>
          <div style={{ display: 'flex', gap: 12, maxWidth: 440, margin: '0 auto', flexWrap: 'wrap' }}>
            <input type="email" placeholder="jouw@email.nl" style={{ flex: 1, minWidth: 200, padding: '12px 16px', borderRadius: 999, border: 0, fontSize: 15 }} />
            <button className="btn btn-tc">Aanmelden</button>
          </div>
        </div>
      </div>
    </div>
  );
}

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