// =========================================================
// QUIZ (LANDING) — "Where are you with Amazon right now?"
// Landing-page-only variant. Result is a personalised diagnosis
// keyed to Q1; every variant ends with the same CTA: book a call.
// Home page keeps the original <Quiz> in sections-2.jsx.
// =========================================================
function QuizLanding({ onBook }) {
  const { useState: useSQL } = React;
  const Q = [
    {
      q: "Where are you with Amazon right now?",
      opts: [
        { label: "Just exploring — haven't started, but I want out of my 9–5" },
        { label: "Done some research, but stuck on where to begin" },
        { label: "Started, but stalled — lost momentum" },
        { label: "Already selling, want to do it properly" },
      ],
    },
    {
      q: "How much time can you realistically give it each week?",
      opts: [
        { label: "5–10 hrs · alongside the job" },
        { label: "10–20 hrs · serious about the shift" },
        { label: "Flexible · this is my priority now" },
      ],
    },
    {
      q: "What would help you most right now?",
      opts: [
        { label: "A clear step-by-step path so I stop second-guessing" },
        { label: "Someone honest to keep me accountable and moving" },
        { label: "Not sure yet — that's what I'd want to work out" },
      ],
    },
  ];

  // Diagnoses keyed to Q1 answer index.
  const DIAGNOSES = [
    {
      title: "You're at the best possible starting point.",
      body: "Nothing to undo, no bad habits to break. The only real risk now is wasting money on the wrong first product — which is exactly the part most people get wrong. The honest next step is a quick call: I'll tell you straight whether this is a real path for you, and what the first move actually is.",
    },
    {
      title: "You don't have a knowledge problem.",
      body: "You've read enough. What's missing isn't more information — it's the order to do things in, and someone to point at the first step. That's a 20-minute conversation, not another course. Let's talk it through.",
    },
    {
      title: "This is a momentum problem, not a you problem.",
      body: "Stalling is the most common place to get stuck — and the most fixable. Usually it's one or two specific things blocking the next move. On a quick call I can usually spot what's actually stopping you. No pitch.",
    },
    {
      title: "You're closer than you think.",
      body: "You've proven you can do the hard part. From here it's usually an optimization gap — listings that show instead of sell, or a system that still needs you in every chair. Let's find the gap on a quick call.",
    },
  ];

  const [step, setStep] = useSQL(0);
  const [q1, setQ1] = useSQL(null);
  const [done, setDone] = useSQL(false);

  const pick = (i) => {
    if (step === 0) setQ1(i);
    if (step + 1 >= Q.length) setDone(true);
    else setStep(step + 1);
  };
  const restart = () => {
    setStep(0);
    setQ1(null);
    setDone(false);
  };

  const diag = done && q1 != null ? DIAGNOSES[q1] : null;

  return (
    <section id="programs" className="section">
      <div className="container">
        <Reveal>
          <div className="quiz">
            <div className="quiz__anno" aria-hidden="true">
              <span className="quiz__anno-amt">Start here if you&rsquo;re not sure.</span>
              <span className="quiz__anno-sub">Takes 30 seconds.</span>
              <svg className="quiz__anno-arrow" viewBox="0 0 128 40" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
                <path d="M4 10 C 42 20, 84 26, 122 28" />
                <path d="M122 28 l -15 -6" />
                <path d="M122 28 l -13 8" />
              </svg>
            </div>
            <div className="quiz__left">
              <div className="label-mono">2-min fit check</div>
              <h2 className="display">Where are you<br />with Amazon?</h2>
              <p>Three honest questions. You'll get a straight read on where you stand — and the option to book a call to talk it through. No email gate.</p>
              <div className="quiz__progress">
                {Q.map((_, i) => (
                  <span key={i} className={i <= step || done ? "is-on" : ""}></span>
                ))}
              </div>
            </div>

            <div className="quiz__panel">
              {!done ? (
                <>
                  <div className="label-mono" style={{ color: "var(--ink-3)", marginBottom: 14 }}>
                    Question {step + 1} of {Q.length}
                  </div>
                  <h3 className="quiz__q">{Q[step].q}</h3>
                  <div className="quiz__opts">
                    {Q[step].opts.map((o, i) => (
                      <button key={i} className="quiz__opt" onClick={() => pick(i)}>
                        <span>{o.label}</span>
                        <span className="key">{String.fromCharCode(65 + i)}</span>
                      </button>
                    ))}
                  </div>
                </>
              ) : (
                <div className="quiz__result">
                  <div className="label-mono" style={{ color: "var(--accent)" }}>
                    your read
                  </div>
                  <h3>{diag.title}</h3>
                  <p>{diag.body}</p>
                  <div className="quiz__result-actions">
                    <button className="btn btn--primary" onClick={onBook}>
                      Book a free discovery call <ArrowGlyph />
                    </button>
                    <button className="btn btn--ghost" onClick={restart}>Retake</button>
                  </div>
                  <div className="quiz__restart" onClick={restart}>↺ start over</div>
                </div>
              )}
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

Object.assign(window, { QuizLanding });