const QUIZ = [
  {
    q: "Hoe voelt je kast op dit moment?",
    opts: [
      { t: "Vol, maar niks voelt meer als mij.", v: "transition" },
      { t: "Ik weet niet precies wat ik wil uitstralen.", v: "clarity" },
      { t: "Ik shop veel maar draag weinig.", v: "practical" },
      { t: "Ik ben toe aan een nieuwe fase.", v: "growth" },
    ],
  },
  {
    q: "Waar loop je het meest tegenaan?",
    opts: [
      { t: "Ik mis richting — weet niet waar te beginnen.", v: "clarity" },
      { t: "Ik twijfel voor de spiegel.", v: "confidence" },
      { t: "Mijn buitenkant klopt niet meer met mijn binnenkant.", v: "transition" },
      { t: "Ik wil meer rust en minder miskopen.", v: "practical" },
    ],
  },
  {
    q: "Wat wil je voelen als je de deur uitgaat?",
    opts: [
      { t: "Zeker, rustig, aanwezig.", v: "confidence" },
      { t: "Als mezelf — zonder twijfel.", v: "transition" },
      { t: "Helder en gefocust.", v: "clarity" },
      { t: "Krachtig en in eigen regie.", v: "growth" },
    ],
  },
];

const RESULTS = {
  transition: {
    title: "Stijl in transitie",
    desc: "Je bent aan het groeien — en je kast mag mee. Een garderobe check met coaching-laag helpt je om wat niet meer past los te laten, en ruimte te maken voor wie je nu bent.",
    svc: "Garderobe Check + Coaching",
  },
  clarity: {
    title: "Zoekend naar richting",
    desc: "Je weet dat er iets moet veranderen, maar nog niet wat. Een persoonlijk stijladvies geeft je een kompas: kleuren, vormen en een stijlprofiel dat voelt als jij.",
    svc: "Persoonlijk Stijladvies",
  },
  confidence: {
    title: "Klaar om te stralen",
    desc: "De basis is er — wat ontbreekt is het vertrouwen om het te dragen. 1-op-1 coaching helpt je stap voor stap om eigen keuzes te maken, zonder twijfel.",
    svc: "1-op-1 Coaching",
  },
  practical: {
    title: "Praktisch & rustig",
    desc: "Je wilt ochtendroutine zonder hoofdpijn. Een garderobe check + personal shopping zorgt voor een werkbare, mooie basis — zonder miskopen.",
    svc: "Garderobe Check + Personal Shopping",
  },
  growth: {
    title: "Klaar voor de volgende fase",
    desc: "Je bent veranderd en dat mag zichtbaar zijn. Een compleet traject — coaching verweven met styling — helpt je een nieuwe hoofdstuk inluiden.",
    svc: "1-op-1 Coaching + Persoonlijk Stijladvies",
  },
};

const Quiz = () => {
  const [step, setStep] = React.useState(0);
  const [answers, setAnswers] = React.useState([]);
  const [done, setDone] = React.useState(false);

  const choose = (v) => {
    const next = [...answers]; next[step] = v; setAnswers(next);
  };
  const go = () => {
    if (step < QUIZ.length - 1) setStep(step + 1);
    else setDone(true);
  };
  const back = () => { if (step > 0) setStep(step - 1); };
  const restart = () => { setStep(0); setAnswers([]); setDone(false); };

  const getResult = () => {
    const count = {};
    answers.forEach(a => { count[a] = (count[a] || 0) + 1; });
    let best = answers[0]; let max = 0;
    Object.entries(count).forEach(([k, v]) => { if (v > max) { max = v; best = k; } });
    return RESULTS[best] || RESULTS.transition;
  };

  const current = QUIZ[step];
  const currentAnswer = answers[step];
  const result = done ? getResult() : null;

  return (
    <section id="quiz" className="quiz">
      <div className="wrap">
        <div className="section-mark" style={{borderColor:"rgba(251,246,238,0.15)"}}>
          <span className="num" style={{color:"rgba(251,246,238,0.5)"}}>№ 05</span>
          <span className="name" style={{color:"rgba(251,246,238,0.7)"}}>Mini stijl-quiz</span>
          <span className="spacer" style={{borderColor:"rgba(251,246,238,0.2)"}}></span>
          <span className="meta" style={{color:"rgba(251,246,238,0.5)"}}>— 3 vragen, 1 minuut</span>
        </div>

        <div className="quiz-grid" style={{marginTop:48}}>
          <div className="quiz-intro">
            <div className="eyebrow">Waar sta jij?</div>
            <h2>
              Welk traject<br/><em>past bij jou</em>?
            </h2>
            <p>
              Drie korte vragen om te ontdekken waar je nu staat — en welk
              startpunt bij je zou kunnen passen. Geen verplichting, wel een spiegel.
            </p>
          </div>

          <div className="quiz-card">
            {!done ? (
              <>
                <div className="quiz-progress">
                  {QUIZ.map((_, i) => (
                    <div key={i} className={`step ${i < step ? "done" : ""} ${i === step ? "current" : ""}`}></div>
                  ))}
                </div>
                <div className="quiz-q-num">Vraag {step + 1} van {QUIZ.length}</div>
                <h3 className="quiz-q">{current.q}</h3>
                <div className="quiz-options">
                  {current.opts.map((o, i) => (
                    <button key={i}
                      className={`quiz-opt ${currentAnswer === o.v ? "selected" : ""}`}
                      onClick={() => choose(o.v)}>
                      <span className="mark"></span>
                      {o.t}
                    </button>
                  ))}
                </div>
                <div className="quiz-footer">
                  <button className="quiz-back" onClick={back} disabled={step === 0}>← Terug</button>
                  <button className="quiz-next" onClick={go} disabled={!currentAnswer}>
                    {step === QUIZ.length - 1 ? "Toon mijn uitkomst" : "Volgende"} →
                  </button>
                </div>
              </>
            ) : (
              <div className="quiz-result">
                <div className="eyebrow">Jouw startpunt</div>
                <h3 dangerouslySetInnerHTML={{__html: result.title}}></h3>
                <p dangerouslySetInnerHTML={{__html: result.desc}}></p>
                <div style={{padding:"20px 0",borderTop:"1px solid var(--hair)",borderBottom:"1px solid var(--hair)",marginBottom:24}}>
                  <div className="eyebrow" style={{marginBottom:8}}>Aanbevolen</div>
                  <div style={{fontFamily:"var(--serif)",fontSize:22,fontStyle:"italic"}}>{result.svc}</div>
                </div>
                <div style={{display:"flex",gap:14,alignItems:"center",marginTop:"auto"}}>
                  <a href="#contact" className="quiz-next" style={{textDecoration:"none"}}>Plan een gesprek →</a>
                  <button className="restart" onClick={restart}>↺ Opnieuw</button>
                </div>
              </div>
            )}
          </div>
        </div>
      </div>
    </section>
  );
};

window.Quiz = Quiz;