// Cold-traffic ad-landing quiz. No nav, mobile-first, single question first.
// Routes from Facebook/Instagram/TikTok ads. Designed for paid attention spans.

const ColdQuiz = ({ areaPreselect, onComplete, onExit }) => {
  const [step, setStep] = React.useState(0);
  const [answers, setAnswers] = React.useState(areaPreselect ? { area: areaPreselect } : {});

  const Q = [
    {
      id: 'area',
      kind: 'pick',
      title: <>What do you want to <em>feel again?</em></>,
      sub: 'Pick the loudest one. We\'ll come back for the others.',
      options: window.CATEGORIES.map(c => ({ v: c.id, label: c.name, blurb: c.blurb })),
    },
    {
      id: 'duration',
      kind: 'pick',
      title: <>How long has this been <em>going on?</em></>,
      sub: 'Best guess is fine.',
      options: [
        { v: 'recent', label: 'Recently — last few months' },
        { v: 'year', label: 'About a year' },
        { v: 'years', label: 'A few years' },
        { v: 'forever', label: 'Honestly, forever' },
      ],
    },
    {
      id: 'tried',
      kind: 'pick',
      title: <>What have you <em>already tried?</em></>,
      sub: 'No judgment. Just helps us not repeat what didn\'t work.',
      options: [
        { v: 'doctor', label: "I've talked to my doctor — they said I'm fine" },
        { v: 'supplements', label: 'Supplements, lifestyle stuff, on my own' },
        { v: 'medication', label: 'Prescription medication, but it stopped working' },
        { v: 'nothing', label: "I haven't tried anything yet" },
      ],
    },
    {
      id: 'age',
      kind: 'pick',
      title: <>How old <em>are you?</em></>,
      options: ['Under 25', '25–34', '35–44', '45–54', '55+'],
    },
    {
      id: 'told',
      kind: 'pick',
      title: <>Have you been told it was <em>"normal"?</em></>,
      sub: 'Common answer. We hear it daily.',
      options: ['Yes — more than once', 'Yes, once', "I sensed it but they didn't say so", 'No', "I haven't asked"],
    },
    {
      id: 'name',
      kind: 'text',
      title: <>What should we <em>call you?</em></>,
      sub: 'First name is fine. We\'ll use it from here on.',
      placeholder: 'Type your first name…',
    },
    {
      id: 'urgency',
      kind: 'pick',
      title: <>How soon do you want to <em>start?</em></>,
      sub: 'Last one. Then we\'ll show you what we\'d recommend.',
      options: ['Ready to move forward', 'Comparing options', 'Need a clearer plan first', "I'm exploring"],
    },
  ];

  const q = Q[step];
  const total = Q.length;
  const set = (val) => setAnswers({ ...answers, [q.id]: val });
  const canProceed = q.kind === 'text'
    ? typeof answers[q.id] === 'string' && answers[q.id].trim().length > 0
    : answers[q.id] !== undefined;

  const goNext = () => {
    if (step < total - 1) setStep(step + 1);
    else onComplete({ track: answers.area || 'weight', answers });
  };

  return (
    <div className="cq-shell">
      <div className="cq-top">
        <Logo size={18} asLink />
        <div className="cq-counter mono">{step + 1} / {total}</div>
        <button className="cq-exit" onClick={onExit} title="Exit">✕</button>
      </div>

      <div className="cq-progress">
        <div className="cq-progress-fill" style={{ width: `${((step + 1) / total) * 100}%` }} />
      </div>

      <div className="cq-stage">
        <div className="cq-card" key={step}>
          <h1 className="cq-title serif">{q.title}</h1>
          {q.sub && <p className="cq-sub">{q.sub}</p>}

          {q.kind === 'text' && (
            <input
              autoFocus type="text"
              className="cq-input"
              placeholder={q.placeholder}
              value={answers[q.id] || ''}
              onChange={(e) => set(e.target.value)}
              onKeyDown={(e) => { if (e.key === 'Enter' && canProceed) goNext(); }}
            />
          )}

          {q.kind === 'pick' && (
            <div className="cq-options">
              {q.options.map((opt, i) => {
                const isObj = typeof opt === 'object';
                const v = isObj ? opt.v : opt;
                const label = isObj ? opt.label : opt;
                const blurb = isObj ? opt.blurb : null;
                const selected = answers[q.id] === v;
                return (
                  <button key={i} className={`cq-option ${selected ? 'is-selected' : ''}`} onClick={() => { set(v); setTimeout(goNext, 240); }}>
                    <span className="cq-option-key">{String.fromCharCode(65 + i)}</span>
                    <span className="cq-option-body">
                      <span className="cq-option-label">{label}</span>
                      {blurb && <span className="cq-option-blurb">{blurb}</span>}
                    </span>
                  </button>
                );
              })}
            </div>
          )}

          <div className="cq-actions">
            {step > 0 && <button className="btn btn-soft" onClick={() => setStep(step - 1)}>← Back</button>}
            <button
              className="btn btn-primary"
              onClick={goNext}
              disabled={!canProceed}
              style={{ opacity: canProceed ? 1 : 0.4, pointerEvents: canProceed ? 'auto' : 'none' }}
            >
              {step === total - 1 ? 'See what we\'d recommend →' : 'Continue →'}
            </button>
          </div>

          <div className="cq-trust mono">
            🔒 Twice the potency · Cold-chain shipped · Cancel any time
          </div>
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { ColdQuiz });