// Interactive Workflow Scan — 5 questions → estimated hours/month saved
const { useState } = React;

const SCAN_QUESTIONS = [
  {
    id: 'size',
    q: 'Hoe groot is je bureau?',
    opts: [
      { label: 'Solo of 2–3 mensen', mult: 0.6 },
      { label: '4–10 mensen', mult: 1.0 },
      { label: '11–25 mensen', mult: 1.6 },
      { label: '25+ mensen', mult: 2.2 },
    ],
  },
  {
    id: 'leads',
    q: 'Hoe verloopt jullie lead-opvolging nu?',
    opts: [
      { label: 'Handmatig — mail voor mail', hours: 10 },
      { label: 'Deels automatisch, deels handmatig', hours: 6 },
      { label: 'Grotendeels geautomatiseerd', hours: 2 },
      { label: 'We hebben geen duidelijk proces', hours: 12 },
    ],
  },
  {
    id: 'reports',
    q: 'Hoeveel tijd kosten klantrapportages per maand?',
    opts: [
      { label: 'Minder dan 2 uur', hours: 1 },
      { label: '2–8 uur', hours: 5 },
      { label: '1–2 volle dagen', hours: 12 },
      { label: 'Meer dan 2 dagen', hours: 18 },
    ],
  },
  {
    id: 'tools',
    q: 'Praten jullie tools met elkaar?',
    opts: [
      { label: 'Ja, alles is verbonden', hours: 1 },
      { label: 'Gedeeltelijk', hours: 4 },
      { label: 'Nauwelijks — veel copy-paste', hours: 9 },
      { label: 'Geen idee, iedereen werkt anders', hours: 11 },
    ],
  },
  {
    id: 'onboard',
    q: 'Hoe verloopt klantonboarding?',
    opts: [
      { label: 'Grotendeels geautomatiseerd', hours: 1 },
      { label: 'We hebben een checklist', hours: 3 },
      { label: 'Elke keer opnieuw, handmatig', hours: 7 },
      { label: 'Eerlijk gezegd rommelig', hours: 10 },
    ],
  },
  {
    id: 'content',
    q: 'Hoeveel tijd kost het maken en hergebruiken van content?',
    opts: [
      { label: 'Weinig — we hebben templates en flows', hours: 2 },
      { label: 'Redelijk — soms hergebruiken we', hours: 5 },
      { label: 'Veel — elke keer vanaf nul', hours: 10 },
      { label: 'Het is een dagtaak op zich', hours: 14 },
    ],
  },
  {
    id: 'meetings',
    q: 'Hoeveel tijd verdwijnt in interne afstemming en status-updates?',
    opts: [
      { label: 'Bijna niets — alles staat ergens', hours: 1 },
      { label: 'Een paar uur per week', hours: 4 },
      { label: 'Halve dag of meer per week', hours: 8 },
      { label: 'Het voelt als een rode draad', hours: 12 },
    ],
  },
  {
    id: 'finance',
    q: 'Hoe regelen jullie facturatie en project-administratie?',
    opts: [
      { label: 'Volledig geautomatiseerd', hours: 1 },
      { label: 'Half automatisch, half handmatig', hours: 4 },
      { label: 'Bijna alles handmatig', hours: 8 },
      { label: 'Elke maand opnieuw uitzoeken', hours: 11 },
    ],
  },
];

function ScanTool() {
  const [step, setStep] = useState(0);
  const [answers, setAnswers] = useState({});
  const [done, setDone] = useState(false);

  const total = SCAN_QUESTIONS.length;
  const progress = done ? 100 : ((step) / total) * 100;

  const selectOption = (qId, optIdx) => {
    const next = { ...answers, [qId]: optIdx };
    setAnswers(next);
    setTimeout(() => {
      if (step + 1 < total) setStep(step + 1);
      else setDone(true);
    }, 280);
  };

  const goBack = () => { if (step > 0) setStep(step - 1); };

  const reset = () => { setStep(0); setAnswers({}); setDone(false); };

  // Calculate result
  const calc = () => {
    const sizeQ = SCAN_QUESTIONS[0];
    const mult = sizeQ.opts[answers.size ?? 1].mult;
    let raw = 0;
    SCAN_QUESTIONS.slice(1).forEach(q => {
      const idx = answers[q.id];
      if (idx != null) raw += q.opts[idx].hours;
    });
    const hours = Math.round(raw * mult);
    const breakdown = SCAN_QUESTIONS.slice(1).map(q => ({
      label: q.q.replace('?', ''),
      h: Math.round((q.opts[answers[q.id] ?? 0].hours) * mult),
    }));
    return { hours, breakdown, mult };
  };

  if (done) {
    const { hours, breakdown } = calc();
    return (
      <div>
        <div className="scan-progress"><div className="scan-progress-bar" style={{ width: '100%' }}></div></div>
        <div className="scan-result">
          <div className="scan-step-label">Jouw resultaat</div>
          <div className="scan-result-big">~{hours}<span> uur</span></div>
          <div className="scan-result-sub">per maand terug te winnen</div>
          <p className="scan-result-narrative">
            Op basis van je antwoorden zien we ruimte om ongeveer <strong>{hours} uur per maand</strong> aan handmatig werk te elimineren. Het grootste deel zit waarschijnlijk in {breakdown.sort((a,b)=>b.h-a.h)[0].label.toLowerCase()}.
          </p>
          <div className="scan-result-breakdown">
            {breakdown.map((b, i) => (
              <div key={i} className="scan-result-row">
                <span>{b.label}</span><span>~{b.h} uur</span>
              </div>
            ))}
            <div className="scan-result-row"><span>Totaal geschat</span><span>~{hours} uur / mnd</span></div>
          </div>
          <a href="#contact" className="btn btn-primary btn-lg" style={{ marginRight: 8 }}>Bespreek jouw resultaat →</a>
          <button className="scan-back" onClick={reset} style={{ marginLeft: 12 }}>↺ Opnieuw</button>
          <p style={{ fontSize: 11, color: 'var(--muted)', marginTop: 24, letterSpacing: '0.04em' }}>
            Indicatief · gebaseerd op vergelijkbare bureaus. Exacte cijfers volgen uit een workflow scan.
          </p>
        </div>
      </div>
    );
  }

  const q = SCAN_QUESTIONS[step];
  const current = answers[q.id];

  return (
    <div>
      <div className="scan-progress"><div className="scan-progress-bar" style={{ width: progress + '%' }}></div></div>
      <div className="scan-step-label">Vraag {step + 1} van {total}</div>
      <div className="scan-question">{q.q}</div>
      <div className="scan-options">
        {q.opts.map((o, i) => (
          <button
            key={i}
            className={"scan-option" + (current === i ? ' selected' : '')}
            onClick={() => selectOption(q.id, i)}
          >
            <div className="scan-option-dot"></div>
            <span>{o.label}</span>
          </button>
        ))}
      </div>
      <div className="scan-nav">
        <button className="scan-back" onClick={goBack} disabled={step === 0}>← Vorige</button>
        <span style={{ fontSize: 11, color: 'var(--muted)', letterSpacing: '0.14em', textTransform: 'uppercase' }}>
          Geen contactgegevens nodig
        </span>
      </div>
    </div>
  );
}

const scanMount = document.getElementById('scanWrap');
if (scanMount) ReactDOM.createRoot(scanMount).render(<ScanTool />);