/* assessment.jsx -- Orthodontic Assessment Quiz -- Claremont Orthodontics */
/* Follows Daniel Priestley ScoreApp formula: 10 best-practice questions + 5 qualifying */

function AssessmentPage() {
  const [step, setStep] = React.useState('intro');
  const [answers, setAnswers] = React.useState({});
  const [contact, setContact] = React.useState({ name: '', email: '', phone: '' });
  const [qIndex, setQIndex] = React.useState(0);
  const [score, setScore] = React.useState(0);

  const questions = [
    { id: 'q1', text: 'Do you or your child have crowded or overlapping teeth?', type: 'yn' },
    { id: 'q2', text: 'Do you notice gaps or spacing between teeth?', type: 'yn' },
    { id: 'q3', text: 'Does your bite feel uneven, or do your teeth not meet properly when you close your mouth?', type: 'yn' },
    { id: 'q4', text: 'Do you experience jaw pain, clicking, or discomfort when chewing?', type: 'yn' },
    { id: 'q5', text: 'Are you or your child a mouth breather, or do you snore regularly?', type: 'yn' },
    { id: 'q6', text: 'Has a dentist previously suggested orthodontic treatment?', type: 'yn' },
    { id: 'q7', text: 'Do you feel self-conscious about the appearance of your teeth or smile?', type: 'yn' },
    { id: 'q8', text: 'Is the person needing treatment aged 7 or older?', type: 'yn' },
    { id: 'q9', text: 'Have you had orthodontic treatment before that has relapsed (teeth moved back)?', type: 'yn' },
    { id: 'q10', text: 'Are you looking for a specialist orthodontist rather than a general dentist for this treatment?', type: 'yn' },
  ];

  const qualifiers = [
    { id: 'situation', text: 'Which best describes your current situation?', options: [
      'Just exploring -- I want to understand my options',
      'My dentist recommended I see a specialist',
      'I have been thinking about treatment for a while',
      'I need treatment and I am ready to start',
    ]},
    { id: 'who', text: 'Who is the treatment for?', options: [
      'Myself (adult)',
      'My teenager (13-17)',
      'My child (7-12)',
      'More than one family member',
    ]},
    { id: 'concern', text: 'What is your biggest concern about orthodontic treatment?', options: [
      'Cost and payment options',
      'How long treatment will take',
      'How it will look during treatment',
      'Whether it will actually work for my case',
      'Finding the right specialist I can trust',
    ]},
    { id: 'preference', text: 'What type of treatment appeals to you most?', options: [
      'Whatever the specialist recommends',
      'Clear aligners (removable, discreet)',
      'Braces (fixed, precise)',
      'I do not know enough to choose yet',
    ]},
    { id: 'timeline', text: 'When would you ideally like to start treatment?', options: [
      'As soon as possible',
      'Within the next 3 months',
      'Within the next 6 months',
      'I am just researching for now',
    ]},
  ];

  const totalQ = questions.length + qualifiers.length;

  const handleYN = (val) => {
    const q = questions[qIndex];
    const newAnswers = { ...answers, [q.id]: val };
    setAnswers(newAnswers);
    if (qIndex < questions.length - 1) {
      setQIndex(qIndex + 1);
    } else {
      setQIndex(0);
      setStep('qualify');
    }
  };

  const handleQualify = (val) => {
    const q = qualifiers[qIndex];
    const newAnswers = { ...answers, [q.id]: val };
    setAnswers(newAnswers);
    if (qIndex < qualifiers.length - 1) {
      setQIndex(qIndex + 1);
    } else {
      const s = questions.reduce((acc, q) => acc + (newAnswers[q.id] === 'yes' ? 1 : 0), 0);
      setScore(s);
      setStep('results');
    }
  };

  const progress = step === 'intro' ? 0 : step === 'contact' ? 5 :
    step === 'questions' ? 10 + ((qIndex / questions.length) * 40) :
    step === 'qualify' ? 50 + ((qIndex / qualifiers.length) * 40) : 100;

  if (step === 'intro') {
    return (
      <main>
        <section style={{ background: 'var(--navy)', color: 'var(--cream)', minHeight: '80vh', display: 'flex', alignItems: 'center' }}>
          <div className="shell" style={{ padding: '96px 48px', maxWidth: 720, margin: '0 auto' }}>
            <div style={{ textAlign: 'center' }}>
              <PageEyebrow><span style={{ color: 'var(--gold)' }}>Free assessment</span></PageEyebrow>
              <h1 className="display h1" style={{ color: 'var(--cream)', margin: '28px 0 28px' }}>
                Do I need <em style={{ color: 'var(--gold)' }}>orthodontic treatment?</em>
              </h1>
              <p style={{ fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: 22, lineHeight: 1.5, color: 'rgba(244, 236, 222, 0.8)', maxWidth: 520, margin: '0 auto 48px' }}>
                Answer 15 questions to find out if orthodontic treatment could help you or your child, and receive personalised recommendations from a specialist orthodontist.
              </p>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 24 }}>
                <button className="cta" onClick={() => setStep('contact')} style={{ fontSize: 17, padding: '22px 48px' }}>
                  Start the assessment <span className="cta__arrow">&rarr;</span>
                </button>
                <div style={{ fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'rgba(244, 236, 222, 0.5)' }}>
                  Free &middot; 3 minutes &middot; No obligation
                </div>
              </div>
              <div style={{ marginTop: 64, display: 'flex', justifyContent: 'center', gap: 48, flexWrap: 'wrap' }}>
                {[
                  ['15', 'Questions'],
                  ['3 min', 'To complete'],
                  ['Instant', 'Results'],
                ].map(([num, label], i) => (
                  <div key={i} style={{ textAlign: 'center' }}>
                    <div style={{ fontFamily: 'var(--serif)', fontSize: 32, color: 'var(--gold)' }}>{num}</div>
                    <div style={{ fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'rgba(244, 236, 222, 0.5)', marginTop: 4 }}>{label}</div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </section>
      </main>
    );
  }

  if (step === 'contact') {
    return (
      <main>
        <section style={{ background: 'var(--cream)', minHeight: '80vh', display: 'flex', alignItems: 'center' }}>
          <div className="shell" style={{ maxWidth: 520, margin: '0 auto', padding: '96px 48px' }}>
            <div style={{ width: '100%', height: 3, background: 'var(--rule)', marginBottom: 48, borderRadius: 2 }}>
              <div style={{ width: progress + '%', height: '100%', background: 'var(--navy)', transition: 'width 0.4s ease', borderRadius: 2 }} />
            </div>
            <PageEyebrow>Step 1 of 3</PageEyebrow>
            <h2 className="display h3" style={{ margin: '16px 0 8px' }}>Before we start.</h2>
            <p className="body-md tone-mute" style={{ marginBottom: 36 }}>So we can send you your personalised results.</p>
            <div className="field">
              <label>Your name</label>
              <input type="text" value={contact.name} onChange={(e) => setContact({...contact, name: e.target.value})} required placeholder="First and last name" />
            </div>
            <div className="field">
              <label>Email</label>
              <input type="email" value={contact.email} onChange={(e) => setContact({...contact, email: e.target.value})} required placeholder="you@example.com" />
            </div>
            <div className="field">
              <label>Phone (optional)</label>
              <input type="tel" value={contact.phone} onChange={(e) => setContact({...contact, phone: e.target.value})} placeholder="04XX XXX XXX" />
            </div>
            <div style={{ marginTop: 32 }}>
              <button className="cta" onClick={() => { if (contact.name && contact.email) { setStep('questions'); setQIndex(0); } }} style={{ width: '100%', justifyContent: 'center' }}>
                Continue <span className="cta__arrow">&rarr;</span>
              </button>
            </div>
            <p className="body-sm tone-mute" style={{ marginTop: 16, textAlign: 'center' }}>
              Your information is private and will only be used to send your results.
            </p>
          </div>
        </section>
      </main>
    );
  }

  if (step === 'questions') {
    const q = questions[qIndex];
    return (
      <main>
        <section style={{ background: 'var(--cream)', minHeight: '80vh', display: 'flex', alignItems: 'center' }}>
          <div className="shell" style={{ maxWidth: 620, margin: '0 auto', padding: '96px 48px' }}>
            <div style={{ width: '100%', height: 3, background: 'var(--rule)', marginBottom: 48, borderRadius: 2 }}>
              <div style={{ width: progress + '%', height: '100%', background: 'var(--navy)', transition: 'width 0.4s ease', borderRadius: 2 }} />
            </div>
            <div className="eyebrow" style={{ marginBottom: 8 }}>Question {qIndex + 1} of {questions.length}</div>
            <h2 className="display h3" style={{ margin: '0 0 48px', maxWidth: 540 }}>{q.text}</h2>
            <div style={{ display: 'flex', gap: 20 }}>
              <button className="cta" onClick={() => handleYN('yes')} style={{ flex: 1, justifyContent: 'center', fontSize: 17, padding: '22px 0' }}>
                Yes
              </button>
              <button className="cta cta--ghost" onClick={() => handleYN('no')} style={{ flex: 1, justifyContent: 'center', fontSize: 17, padding: '22px 0' }}>
                No
              </button>
            </div>
          </div>
        </section>
      </main>
    );
  }

  if (step === 'qualify') {
    const q = qualifiers[qIndex];
    return (
      <main>
        <section style={{ background: 'var(--cream)', minHeight: '80vh', display: 'flex', alignItems: 'center' }}>
          <div className="shell" style={{ maxWidth: 620, margin: '0 auto', padding: '96px 48px' }}>
            <div style={{ width: '100%', height: 3, background: 'var(--rule)', marginBottom: 48, borderRadius: 2 }}>
              <div style={{ width: progress + '%', height: '100%', background: 'var(--navy)', transition: 'width 0.4s ease', borderRadius: 2 }} />
            </div>
            <div className="eyebrow" style={{ marginBottom: 8 }}>Almost there &mdash; {qIndex + 1} of {qualifiers.length}</div>
            <h2 className="display h3" style={{ margin: '0 0 36px', maxWidth: 540 }}>{q.text}</h2>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
              {q.options.map((opt, i) => (
                <button key={i} onClick={() => handleQualify(opt)} style={{
                  textAlign: 'left',
                  padding: '20px 28px',
                  border: '1px solid var(--rule)',
                  background: 'var(--cream-light)',
                  fontFamily: 'var(--sans)',
                  fontSize: 16,
                  color: 'var(--ink)',
                  cursor: 'pointer',
                  borderRadius: 2,
                  transition: 'all 0.15s ease',
                }}
                onMouseOver={(e) => { e.target.style.borderColor = 'var(--navy)'; e.target.style.background = 'white'; }}
                onMouseOut={(e) => { e.target.style.borderColor = 'var(--rule)'; e.target.style.background = 'var(--cream-light)'; }}
                >
                  {opt}
                </button>
              ))}
            </div>
          </div>
        </section>
      </main>
    );
  }

  if (step === 'results') {
    const level = score >= 7 ? 'high' : score >= 4 ? 'moderate' : 'low';
    const color = score >= 7 ? '#B45309' : score >= 4 ? 'var(--navy)' : 'var(--gold-deep)';

    return (
      <main>
        <section style={{ background: 'var(--navy)', color: 'var(--cream)', padding: '96px 0 64px' }}>
          <div className="shell" style={{ maxWidth: 680, margin: '0 auto', textAlign: 'center' }}>
            <PageEyebrow><span style={{ color: 'var(--gold)' }}>Your results</span></PageEyebrow>
            <h1 className="display h2" style={{ color: 'var(--cream)', margin: '24px 0 36px' }}>
              Your orthodontic <em style={{ color: 'var(--gold)' }}>assessment score.</em>
            </h1>

            <div style={{
              display: 'inline-flex',
              alignItems: 'center',
              justifyContent: 'center',
              width: 160,
              height: 160,
              borderRadius: '50%',
              border: '4px solid var(--gold)',
              margin: '0 auto 32px',
            }}>
              <div>
                <div style={{ fontFamily: 'var(--serif)', fontSize: 56, color: 'var(--gold)', lineHeight: 1 }}>{score}</div>
                <div style={{ fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'rgba(244, 236, 222, 0.5)' }}>out of 10</div>
              </div>
            </div>

            <div style={{
              display: 'inline-block',
              padding: '8px 24px',
              background: score >= 7 ? 'rgba(180, 83, 9, 0.2)' : score >= 4 ? 'rgba(27, 58, 92, 0.3)' : 'rgba(201, 168, 76, 0.2)',
              borderRadius: 2,
              fontFamily: 'var(--mono)',
              fontSize: 12,
              letterSpacing: '0.16em',
              textTransform: 'uppercase',
              color: 'var(--gold)',
              marginBottom: 32,
            }}>
              {score >= 7 ? 'Strong indicators for treatment' : score >= 4 ? 'Some indicators present' : 'Fewer indicators detected'}
            </div>
          </div>
        </section>

        <section className="section" style={{ background: 'var(--cream)' }}>
          <div className="shell" style={{ maxWidth: 680, margin: '0 auto' }}>
            <h2 className="display h3" style={{ marginBottom: 32 }}>What your score means.</h2>

            {score >= 7 && (
              <div>
                <p className="body-lg">
                  Based on your answers, there are strong indicators that orthodontic treatment could benefit you or your child. Several of the signs you described are commonly associated with conditions that a specialist orthodontist can assess and treat.
                </p>
                <p className="body-md tone-mute" style={{ marginTop: 16 }}>
                  We would recommend booking a consultation with Dr Denize to discuss your specific situation. A proper clinical examination will confirm whether treatment is needed and which approach would be most effective.
                </p>
              </div>
            )}
            {score >= 4 && score < 7 && (
              <div>
                <p className="body-lg">
                  Your answers suggest some indicators that may warrant a professional assessment. While not every indicator leads to treatment, a specialist consultation can provide clarity on whether intervention would be beneficial.
                </p>
                <p className="body-md tone-mute" style={{ marginTop: 16 }}>
                  A consultation with Dr Denize would help determine if treatment is recommended. There is no obligation and no pressure.
                </p>
              </div>
            )}
            {score < 4 && (
              <div>
                <p className="body-lg">
                  Based on your answers, there are fewer typical indicators for orthodontic treatment at this time. However, this assessment is not a clinical diagnosis, and some conditions are only detectable through a professional examination.
                </p>
                <p className="body-md tone-mute" style={{ marginTop: 16 }}>
                  If you have any concerns about your teeth, bite, or jaw, a consultation with a specialist orthodontist is always worthwhile. Dr Denize offers free initial consultations* with no obligation.
                </p>
              </div>
            )}

            <div style={{ marginTop: 48, padding: 40, background: 'var(--cream-deep)', border: '1px solid var(--rule)' }}>
              <h3 className="display h4" style={{ marginBottom: 16 }}>Your recommended next step</h3>
              {score >= 4 ? (
                <div>
                  <p className="body-md" style={{ marginBottom: 24 }}>
                    Book a free consultation* with Dr Stewart Denize. He will assess your specific situation, explain your options, and answer all your questions. No referral required.
                  </p>
                  <div style={{ display: 'flex', gap: 20, flexWrap: 'wrap', alignItems: 'center' }}>
                    <a className="cta" href="#/new-patients" onClick={(e) => { e.preventDefault(); go('new-patients'); }}>
                      Book free consultation* <span className="cta__arrow">&rarr;</span>
                    </a>
                    <div className="phone-inline">
                      Or call <a href="tel:0862887188">(08) 6288 7188</a>
                    </div>
                  </div>
                </div>
              ) : (
                <div>
                  <p className="body-md" style={{ marginBottom: 24 }}>
                    If you have any concerns, a consultation is always a good idea. Dr Denize offers free initial consultations* with no pressure and no obligation.
                  </p>
                  <div style={{ display: 'flex', gap: 20, flexWrap: 'wrap', alignItems: 'center' }}>
                    <a className="cta cta--ghost" href="#/new-patients" onClick={(e) => { e.preventDefault(); go('new-patients'); }}>
                      Book free consultation* <span className="cta__arrow">&rarr;</span>
                    </a>
                    <div className="phone-inline">
                      Or call <a href="tel:0862887188">(08) 6288 7188</a>
                    </div>
                  </div>
                </div>
              )}
              <p className="body-sm tone-mute" style={{ marginTop: 16 }}>*Conditions apply. Initial consultation only.</p>
            </div>

            <div style={{ marginTop: 48, padding: '32px 0', borderTop: '1px solid var(--rule)', textAlign: 'center' }}>
              <p className="body-sm tone-mute">
                This assessment is for informational purposes only and does not constitute a clinical diagnosis. Only a qualified specialist orthodontist can determine whether treatment is appropriate after a proper examination. Results have been sent to {contact.email}.
              </p>
            </div>
          </div>
        </section>

        <ClosingCTA
          title={<>Ready to take the <em>next step?</em></>}
          body="Book a free consultation* with Dr Stewart Denize. No referral needed."
          primary="Book free consultation*"
          target="new-patients"
        />
      </main>
    );
  }

  return null;
}

window.AssessmentPage = AssessmentPage;