/* eslint-disable */
/* ─────────────────────────────────────────────────────────────
   FUNNEL-1 · live funnel shell
   Mounts the design's screens as a real, click-through funnel:
     Quiz → VSL → Offer (+bump) → OTO upsell → Thank-you.
   Full-bleed on phones; centered phone-width column on desktop.
   A slim dev pill (bottom-center) shows stage + lets you restart —
   it is review chrome, strip it before a production ad campaign.
   ───────────────────────────────────────────────────────────── */
const { useState: useStateApp, useEffect: useEffectApp, useRef: useRefApp } = React;

const CFG = window.TP_CONFIG || {};

const STAGES = [
  { id: "quiz",   label: "Quiz" },
  { id: "vsl",    label: "VSL" },
  { id: "offer",  label: "Offer" },
  { id: "upsell", label: "Upsell" },
  { id: "thanks", label: "Thanks" },
];

function FunnelApp() {
  const [i, setI] = useStateApp(0);
  const stage = STAGES[i];

  // Apply accent override globally.
  useEffectApp(() => {
    if (CFG.accent) document.documentElement.style.setProperty('--accent', CFG.accent);
  }, []);

  const next = () => setI(n => Math.min(n + 1, STAGES.length - 1));
  const restart = () => setI(0);

  // key={stage.id} remounts the screen each stage → resets scroll,
  // countdowns, quiz step, and order-bump state.
  const screen = (() => {
    switch (stage.id) {
      case "quiz":
        return <QuizScreen key="quiz" onComplete={next} />;
      case "vsl":
        return <VSLLanding key="vsl" hook={CFG.hook} price={CFG.price} priceWas={CFG.priceWas}
          guaranteeDays={CFG.guaranteeDays} showCountdown={CFG.showCountdown} onNext={next} />;
      case "offer":
        return <OfferScreen key="offer" price={CFG.price} priceWas={CFG.priceWas}
          guaranteeDays={CFG.guaranteeDays} showCountdown={CFG.showCountdown} onNext={next} />;
      case "upsell":
        return <UpsellScreen key="upsell" onNext={next} />;
      case "thanks":
        return <ThankYouScreen key="thanks" />;
      default:
        return null;
    }
  })();

  return (
    <div className="tp-stage-wrap">
      <div className="tp-stage">{screen}</div>

      {/* dev/review chrome — stage progress + restart */}
      <div className="tp-devpill" role="navigation" aria-label="Funnel stage">
        {STAGES.map((s, idx) => (
          <button
            key={s.id}
            className={"tp-devdot" + (idx === i ? " is-active" : "") + (idx < i ? " is-done" : "")}
            title={`${idx + 1}. ${s.label}`}
            aria-label={`Go to ${s.label}`}
            aria-current={idx === i ? "step" : undefined}
            onClick={() => setI(idx)}
          />
        ))}
        <span className="tp-devsep" />
        <button className="tp-devrestart" title="Restart funnel" aria-label="Restart funnel" onClick={restart}>↻</button>
      </div>
    </div>
  );
}

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