function MiniTest({ setView }) {
  // step: -1 = intro, 0..4 = questions, 5 = email gate, 6 = result
  const [step, setStep] = React.useState(-1);
  const [answers, setAnswers] = React.useState([]); // array of color keys
  const [email, setEmail] = React.useState('');
  const [emailErr, setEmailErr] = React.useState('');

  const total = window.QUESTIONS.length;

  function pick(kleur) {
    const next = [...answers, kleur];
    setAnswers(next);
    if (next.length < total) {
      setStep(step + 1);
    } else {
      setStep(5);
    }
    window.scrollTo({ top: 0, behavior: 'smooth' });
  }

  function back() {
    if (step <= 0) {setStep(-1);return;}
    setAnswers(answers.slice(0, -1));
    setStep(step - 1);
  }

  function submitEmail(e) {
    e.preventDefault();
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
      setEmailErr('Klopt dit e-mailadres?');
      return;
    }
    setEmailErr('');
    setStep(6);
    window.scrollTo({ top: 0, behavior: 'smooth' });
  }

  function dominant() {
    const counts = {};
    answers.forEach((k) => {counts[k] = (counts[k] || 0) + 1;});
    let best = answers[0];let bestN = 0;
    Object.entries(counts).forEach(([k, n]) => {if (n > bestN) {best = k;bestN = n;}});
    return { key: best, counts };
  }

  function reset() {
    setStep(-1);setAnswers([]);setEmail('');setEmailErr('');
  }

  // INTRO
  if (step === -1) {
    return (
      <main className="pt-40 pb-32 min-h-screen">
        <div className="max-w-[900px] mx-auto px-6 md:px-10 text-center">
          <div className="eyebrow mb-8">— Mini-test · 5 vragen · ±3 minuten</div>
          <h1 className="hero-display">Welke kleuren spreken in jou?</h1>
          <p className="mt-10 text-[18px] text-yel-soft max-w-[58ch] mx-auto leading-relaxed">
            Vijf situaties, telkens zeven mogelijke reacties. Kies degene die het dichtst komt bij wat jij zou doen — niet wat correct klinkt. Je krijgt achteraf één dominante kleur, plus een teaser van de andere zes.
          </p>
          <div className="mt-12 flex flex-wrap gap-4 justify-center">
            <button onClick={() => setStep(0)} className="btn-primary">
              <span className="dot"></span>
              Begin de test
            </button>
            <button onClick={() => setView('home')} className="btn-ghost">Niet nu</button>
          </div>
          <div className="mt-16">
            <window.SpectrumArc height={200} animate={true} />
          </div>
        </div>
      </main>);

  }

  // EMAIL GATE
  if (step === 5) {
    return (
      <main className="pt-40 pb-32 min-h-screen">
        <div className="max-w-[680px] mx-auto px-6 md:px-10">
          <div className="eyebrow mb-8">— Bijna klaar</div>
          <h1 className="display-md">We sturen je het resultaat <br />óók naar je inbox.</h1>
          <p className="mt-6 text-[16.5px] text-yel-soft leading-relaxed">
            Geen nieuwsbrief-spam. Eén mail met je dominante kleur en een korte uitleg, zodat je het later nog kan teruglezen of doorsturen.
          </p>
          <form onSubmit={submitEmail} className="mt-10">
            <label className="block text-sm text-yel-mute mb-2" htmlFor="em">E-mailadres</label>
            <input
              id="em"
              type="email"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              placeholder="jij@voorbeeld.be"
              className="w-full bg-transparent border-b border-black/30 py-3 font-display text-2xl focus:outline-none focus:border-black" />
            
            {emailErr && <div className="mt-2 text-sm text-gv-rood">{emailErr}</div>}
            <div className="mt-8 flex flex-wrap gap-4 items-center">
              <button type="submit" className="btn-primary">
                <span className="dot"></span>
                Toon mijn resultaat
              </button>
              <button type="button" onClick={back} className="text-sm text-yel-mute ulink">← terug</button>
            </div>
            <div className="mt-8 text-xs text-yel-mute leading-relaxed">
              We gebruiken je e-mailadres alleen om je dit resultaat te sturen. Geen verkoop aan derden, geen tracking-pixels. Zie <button type="button" onClick={() => setView('methodiek')} className="ulink">methodiek &amp; privacy</button>.
            </div>
          </form>
        </div>
      </main>);

  }

  // RESULT
  if (step === 6) {
    const { key, counts } = dominant();
    const c = window.colorByKey(key);
    return (
      <main className="pt-32 pb-24 min-h-screen">
        <div className="max-w-[1200px] mx-auto px-6 md:px-10">
          <div className="eyebrow mb-6">— Jouw dominante kleur</div>
          <div className="grid md:grid-cols-12 gap-10 items-center">
            <div className="md:col-span-6">
              <div className="font-display text-[clamp(2.5rem,6vw,5rem)] leading-[0.95] tracking-tight">
                Jij bent voor nu <span className="font-serif-italic" style={{ color: c.hex }}>{c.naam.toLowerCase()}</span>.
              </div>
              <div className="font-mono-x text-xs text-yel-mute mt-4 uppercase tracking-widest">{c.label}</div>
              <p className="mt-8 text-[17px] text-yel-soft leading-relaxed max-w-[55ch]">
                {c.lang}
              </p>
              <div className="mt-6 p-5 border-l-2" style={{ borderColor: c.hex, background: '#FFFFFF' }}>
                <div className="eyebrow mb-2">Klinkt als</div>
                <div className="font-display italic text-[20px]">{c.voorbeeld}</div>
              </div>
            </div>
            <div className="md:col-span-6 grid place-items-center">
              <window.SpectrumOrb activeKey={key} size={360} />
            </div>
          </div>

          {/* Teaser other 6 */}
          <div className="mt-20">
            <div className="grid md:grid-cols-12 gap-6 items-end mb-6">
              <h3 className="display-sm md:col-span-7">De andere zes blijven, voorlopig, vraagtekens.</h3>
              <p className="md:col-span-5 text-[15px] text-yel-soft">
                Een mini-test pakt de luidste kleur. De volledige analyse leest hoe alle zeven in jou samenspelen — wanneer ze opkomen, wanneer ze conflicteren.
              </p>
            </div>
            <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-6 gap-3">
              {window.COLORS.filter((x) => x.key !== key).map((o) =>
              <div key={o.key} className="aspect-square relative overflow-hidden bg-white border border-black/10">
                  <div className="absolute inset-0" style={{ background: o.hex, opacity: 0.18 }}></div>
                  <div className="absolute inset-0 grid place-items-center">
                    <div className="text-center">
                      <div className="font-display text-5xl text-yel-ink/30">?</div>
                      <div className="text-xs font-mono-x mt-2 text-yel-mute">{o.naam}</div>
                    </div>
                  </div>
                  <div className="absolute bottom-2 left-2 w-3 h-3 rounded-full" style={{ background: o.hex }}></div>
                </div>
              )}
            </div>
          </div>

          {/* Share + CTA */}
          <div className="mt-20 grid md:grid-cols-2 gap-10 border-t border-black/10 pt-12">
            <div>
              <div className="eyebrow mb-4">Deel je kleur</div>
              <h3 className="display-sm">Welke kleur denk jij dat jouw collega is?</h3>
              <p className="mt-4 text-[15px] text-yel-soft">Stuur de test door — het gesprek begint vanzelf.</p>
              <div className="mt-6 flex flex-wrap gap-3">
                <button
                  onClick={() => alert('Open WhatsApp share — gemockt.')}
                  className="btn-primary"
                  style={{ background: '#25D366', color: '#0B1F12' }}>
                  
                  <span className="dot" style={{ background: '#0B1F12' }}></span>
                  Stuur via WhatsApp
                </button>
                <button onClick={() => alert('Open LinkedIn share — gemockt.')} className="btn-ghost">
                  Deel op LinkedIn
                </button>
                <button onClick={() => {navigator.clipboard?.writeText(window.location.href);}} className="btn-ghost">
                  Kopieer link
                </button>
              </div>
            </div>
            <div className="bg-white p-8 border border-black/10">
              <div className="eyebrow mb-3">Wil je verder?</div>
              <h3 className="display-sm">De volledige analyse</h3>
              <p className="mt-3 text-[15px] text-yel-soft leading-relaxed">
                Geen vijf vragen, maar een gesprek van een uur dat doorvraagt. Inclusief geschreven rapport en — bij Deep Dive en hoger — een terugkoppeling met Greet zelf.
              </p>
              <div className="mt-6 flex items-center gap-4">
                <button onClick={() => setView('private')} className="btn-primary">
                  <span className="dot"></span>
                  Bekijk de pakketten
                </button>
                <span className="text-xs text-yel-mute">vanaf €59</span>
              </div>
            </div>
          </div>

          <div className="mt-12 text-center">
            <button onClick={reset} className="text-sm text-yel-mute ulink">opnieuw beginnen</button>
          </div>
        </div>
      </main>);

  }

  // QUESTION VIEW
  const q = window.QUESTIONS[step];
  const pct = step / total * 100;
  return (
    <main className="pt-32 pb-24 min-h-screen">
      <div className="max-w-[1080px] mx-auto px-6 md:px-10">
        {/* Progress */}
        <div className="flex items-center gap-6 mb-12">
          <button onClick={back} className="text-sm text-yel-mute ulink">← terug</button>
          <div className="flex-1 progress-track">
            <div className="progress-fill" style={{ width: `${pct + 100 / total}%` }}></div>
          </div>
          <div className="font-mono-x text-xs text-yel-mute">{q.context}</div>
        </div>

        <h2 className="font-display text-[clamp(2rem,4.5vw,3.4rem)] leading-[1.05] tracking-tight max-w-[28ch]">
          {q.vraag}
        </h2>

        <div className="mt-12 grid md:grid-cols-2 gap-3">
          {q.opties.map((o, i) => {
            return (
              <button
                key={i}
                onClick={() => pick(o.kleur)}
                className="answer-card text-left p-5 md:p-6 flex items-start gap-4">

                <span className="font-display text-[18px] leading-snug text-yel-ink">{o.tekst}</span>
              </button>);

          })}
        </div>

        <div className="mt-10 text-xs text-yel-mute text-center">
          Geen tijd­slimiet. Vertrouw je eerste reactie.
        </div>
      </div>
    </main>);

}

window.MiniTest = MiniTest;