/* ============================================================
   Lectual — Funnel app: flow control, confetti, tweaks, mount
   ============================================================ */
const NTWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "brand": "rpb",
  "dark": false
}/*EDITMODE-END*/;

function Confetti() {
  const pieces = useMemo(() => Array.from({ length: 44 }).map((_, i) => {
    const colors = ['var(--firm-primary)', 'var(--protected)', 'var(--warning)', 'var(--ink-3)'];
    return { left: Math.random() * 100, delay: Math.random() * 0.4, dur: 2 + Math.random() * 1.6, bg: colors[i % 4], rot: Math.random() * 360, w: 6 + Math.random() * 6 };
  }), []);
  return (
    <div className="confetti" aria-hidden="true">
      {pieces.map((p, i) => (
        <i key={i} style={{ left: p.left + '%', background: p.bg, animationDelay: p.delay + 's', animationDuration: p.dur + 's', transform: `rotate(${p.rot}deg)`, width: p.w, height: p.w * 1.5 }} />
      ))}
    </div>
  );
}

function FunnelBar({ brand }) {
  const th = THEMES[brand];
  return (
    <div className="fbar">
      {brand === 'lectual'
        ? <Echo size={19} />
        : <span className="fwm"><span className="lg">{th.logo}</span>{th.name.split(' · ')[0]}</span>}
      <span className="sp" />
      <span className="secure">{XI.lock} Encrypted · 2-min check</span>
    </div>
  );
}

function FunnelApp() {
  const [t, setTweak] = useTweaks(NTWEAK_DEFAULTS);
  const [stage, setStage] = useState('intro'); // intro | assess | computing | results | book
  const [idx, setIdx] = useState(0);
  const [answers, setAnswers] = useState({});
  const [confetti, setConfetti] = useState(false);
  const [toasts, pushToast] = useToasts();

  useEffect(() => { applyTheme(t.brand, t.dark); }, [t.brand, t.dark]);

  const result = useMemo(() => computeResult(answers), [answers]);
  const setAnswer = (id, v) => setAnswers((a) => ({ ...a, [id]: v }));
  const scrollTop = () => { const el = document.querySelector('.funnel'); if (el) el.scrollTop = 0; window.scrollTo?.(0, 0); };

  const next = () => {
    if (idx < QS.length - 1) { setIdx(idx + 1); scrollTop(); }
    else { setStage('computing'); }
  };
  const back = () => { if (idx > 0) { setIdx(idx - 1); scrollTop(); } else setStage('intro'); };
  const finishComputing = () => {
    setStage('results'); scrollTop();
    setConfetti(true); setTimeout(() => setConfetti(false), 3600);
  };

  return (
    <div className="funnel scrollbar-thin">
      <FunnelBar brand={t.brand} />
      <div className="stage">
        {stage === 'intro' && <Intro onStart={() => { setStage('assess'); setIdx(0); }} />}
        {stage === 'assess' && <Assessment idx={idx} q={QS[idx]} answers={answers} setAnswer={setAnswer} onNext={next} onBack={back} />}
        {stage === 'computing' && <Computing onDone={finishComputing} />}
        {stage === 'results' && <Results result={result} onBook={() => { setStage('book'); scrollTop(); }} />}
        {stage === 'book' && <Booking onBack={() => { setStage('results'); scrollTop(); }} pushToast={pushToast} />}
      </div>

      {confetti && <Confetti />}
      <Toaster toasts={toasts} />

      <TweaksPanel>
        <TweakSection label="Brand context" hint="The funnel is client-facing — themed in the firm's brand (System B). Switch to Lectual to see System A." />
        <TweakSelect label="Served by" value={t.brand}
          options={[
            { value: 'rpb', label: 'Rivera Park (firm)' },
            { value: 'meridian', label: 'Meridian (firm)' },
            { value: 'lectual', label: 'Lectual (direct)' },
          ]}
          onChange={(v) => setTweak('brand', v)} />
        <TweakToggle label="Dark mode" value={t.dark} onChange={(v) => setTweak('dark', v)} />
      </TweaksPanel>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<FunnelApp />);