/* eslint-disable */
// Quiz qualifier — Hormozi's "qualify + pre-commit" pattern.
// 5 questions, user picks pain points. Each answer deepens buy-in.
const { useState: useStateQ } = React;

const QUIZ = [
  {
    q: "What's the #1 thing wrecking your recovery?",
    o: ["Bad sleep", "Old injuries that won't heal", "Brain fog", "Joint pain after lifting", "All of the above"],
  },
  {
    q: "How long has it been since you felt 'fully recovered'?",
    o: ["A few months", "Over a year", "I forget what it feels like"],
  },
  {
    q: "Tried any of these without lasting results?",
    o: ["Creatine / collagen / glutamine", "PT or chiro", "Rest + ice + Advil", "Sleep tracker / wearable", "Yes — all of them"],
  },
  {
    q: "How serious are you about fixing this in 30 days?",
    o: ["I'd pay almost anything", "Serious if it actually works", "Just curious right now"],
  },
  {
    q: "Where should we send your free protocol?",
    o: null, // email step
  },
];

function QuizScreen({ onComplete }) {
  const [step, setStep] = useStateQ(0);
  const [picks, setPicks] = useStateQ({});
  const [email, setEmail] = useStateQ("");
  const isLast = step === QUIZ.length - 1;
  const done = step >= QUIZ.length;
  const item = QUIZ[step] || {};
  const pct = ((step + 1) / QUIZ.length) * 100;

  function pick(o) {
    setPicks(p => ({ ...p, [step]: o }));
    setTimeout(() => setStep(s => s + 1), 220);
  }

  return (
    <div className="tp-root tp-phone-scroll" style={{ background: 'var(--bg)', minHeight: '100%', display: 'flex', flexDirection: 'column' }}>
      {/* Top bar */}
      <div style={{ padding: '12px 18px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', borderBottom: '1px solid var(--border-soft)' }}>
        <Logo />
        <span className="tp-mono" style={{ fontSize: 10, color: 'var(--muted)', letterSpacing: '0.12em' }}>
          {done ? "DONE" : `${step + 1}/${QUIZ.length}`}
        </span>
      </div>
      {/* Progress */}
      <div style={{ height: 3, background: 'var(--surface-2)' }}>
        <div style={{ height: '100%', width: `${pct}%`, background: 'var(--accent)', transition: 'width .3s ease' }} />
      </div>

      <div style={{ padding: 22, flex: 1 }}>
        {!done && (
          <>
            <div className="tp-eyebrow lime" style={{ marginBottom: 12 }}>RECOVERY DIAGNOSTIC</div>
            <h2 className="tp-display" style={{ fontSize: 30, margin: 0, color: 'var(--text)' }}>{item.q}</h2>

            {item.o ? (
              <div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginTop: 22 }}>
                {item.o.map((o, i) => {
                  const sel = picks[step] === o;
                  return (
                    <button key={i} onClick={() => pick(o)} style={{
                      padding: '16px 18px',
                      borderRadius: 12,
                      border: '1px solid ' + (sel ? 'var(--accent)' : 'var(--border)'),
                      background: sel ? 'rgba(212,255,58,0.08)' : 'var(--surface)',
                      color: 'var(--text)',
                      textAlign: 'left',
                      fontFamily: 'var(--font-body)',
                      fontSize: 14,
                      cursor: 'pointer',
                      display: 'flex', alignItems: 'center', gap: 12,
                    }}>
                      <span style={{
                        width: 18, height: 18, borderRadius: 4,
                        border: '1.5px solid ' + (sel ? 'var(--accent)' : 'var(--border)'),
                        background: sel ? 'var(--accent)' : 'transparent',
                        flex: '0 0 18px',
                      }} />
                      {o}
                    </button>
                  );
                })}
              </div>
            ) : (
              <div style={{ marginTop: 22, display: 'flex', flexDirection: 'column', gap: 12 }}>
                <input
                  value={email}
                  onChange={e => setEmail(e.target.value)}
                  placeholder="you@email.com"
                  style={{
                    padding: '16px 18px',
                    borderRadius: 12,
                    border: '1px solid var(--border)',
                    background: 'var(--surface)',
                    color: 'var(--text)',
                    fontFamily: 'var(--font-body)',
                    fontSize: 15,
                    outline: 'none',
                  }}
                />
                <button className="tp-btn tp-btn--primary tp-btn--block" onClick={() => setStep(s => s + 1)}>
                  Send My Protocol →
                </button>
                <p className="tp-mono" style={{ fontSize: 9, letterSpacing: '0.12em', color: 'var(--muted-2)', textAlign: 'center', textTransform: 'uppercase' }}>
                  No spam. Unsubscribe in 1 click.
                </p>
              </div>
            )}
          </>
        )}

        {done && (
          <div style={{ paddingTop: 30 }}>
            <div className="tp-pill tp-pill--lime"><span className="tp-dot"/>QUALIFIED</div>
            <h2 className="tp-display" style={{ fontSize: 36, marginTop: 14, color: 'var(--text)' }}>
              YOU'RE A FIT.
            </h2>
            <p style={{ color: 'var(--text-dim)', marginTop: 8, fontSize: 14, lineHeight: 1.5 }}>
              Based on your answers, the <b style={{ color: 'var(--accent)' }}>Recovery Stack</b> is built for you. Watch the 4-minute breakdown to see exactly what's in it.
            </p>
            <button className="tp-btn tp-btn--primary tp-btn--block" style={{ marginTop: 22 }} onClick={() => onComplete && onComplete()}>
              See My Protocol →
            </button>
          </div>
        )}
      </div>

      <div style={{ padding: 14, borderTop: '1px solid var(--border-soft)', textAlign: 'center' }}>
        <span className="tp-mono" style={{ fontSize: 9, color: 'var(--muted-2)', letterSpacing: '0.14em', textTransform: 'uppercase' }}>
          🔒 SSL · HIPAA-aware · No card needed
        </span>
      </div>
    </div>
  );
}

Object.assign(window, { QuizScreen });