// screens-tests.jsx — Self-assessment test screens for Psyche
// Tests: PHQ-9 (Depression), GAD-7 (Anxiety), ASRS v1.1 (ADHD), Rosenberg (Self-Esteem)

const { useState } = React;

// ─── Test data definitions ────────────────────────────────────────────────────

const TEST_DATA = {
  depression: {
    id: 'depression',
    title: 'Depression Screening (PHQ-9)',
    scale: 'PHQ-9',
    duration: '3-5 minutes',
    questionCount: 9,
    description: "The PHQ-9 is a validated, widely-used screening questionnaire developed by Kroenke & Spitzer. It measures the frequency of depressive symptoms over the past two weeks. It is used by clinicians around the world as a first step in identifying depression.",
    prefix: "Over the past 2 weeks, how often have you been bothered by:",
    questions: [
      "Little interest or pleasure in doing things",
      "Feeling down, depressed, or hopeless",
      "Trouble falling or staying asleep, or sleeping too much",
      "Feeling tired or having little energy",
      "Poor appetite or overeating",
      "Feeling bad about yourself, or that you are a failure",
      "Trouble concentrating on things",
      "Moving or speaking so slowly that other people could have noticed — or the opposite, being fidgety or restless",
      "Thoughts that you would be better off dead, or thoughts of hurting yourself",
    ],
    options: [
      { label: "Not at all", value: 0 },
      { label: "Several days", value: 1 },
      { label: "More than half the days", value: 2 },
      { label: "Nearly every day", value: 3 },
    ],
    scoring: function(answers) {
      return answers.reduce(function(sum, a) { return sum + a; }, 0);
    },
    getResult: function(score) {
      if (score <= 4)  return { label: "Minimal depression",           color: "var(--psy-leaf)",  tier: 0 };
      if (score <= 9)  return { label: "Mild depression",              color: "#F59E0B",           tier: 1 };
      if (score <= 14) return { label: "Moderate depression",          color: "#F97316",           tier: 2 };
      if (score <= 19) return { label: "Moderately severe depression", color: "#DC2626",           tier: 3 };
      return             { label: "Severe depression",                 color: "#DC2626",           tier: 4 };
    },
    getInterpretation: function(score, result) {
      if (result.tier === 0) return "Your responses suggest minimal depressive symptoms at this time. This is reassuring, but if you have concerns about your mood it is always worth speaking with a professional.";
      if (result.tier === 1) return "Your responses suggest mild depressive symptoms. Many people experience periods like this. A psychologist can help you understand what is happening and develop strategies to support your wellbeing.";
      if (result.tier === 2) return "Your responses suggest moderate depressive symptoms. This level of distress is significant and speaking with a licensed mental health professional is strongly recommended.";
      return "Your responses suggest moderately severe to severe depressive symptoms. Please reach out to a mental health professional as soon as possible. You do not have to face this alone.";
    },
    isCrisis: function(score) { return score >= 15; },
  },

  anxiety: {
    id: 'anxiety',
    title: 'Anxiety Screening (GAD-7)',
    scale: 'GAD-7',
    duration: '2-3 minutes',
    questionCount: 7,
    description: "The GAD-7 is a validated screening tool for generalised anxiety disorder, developed by Spitzer et al. It measures the frequency of anxiety-related symptoms over the past two weeks and is widely used in primary care and mental health settings.",
    prefix: "Over the past 2 weeks, how often have you been bothered by:",
    questions: [
      "Feeling nervous, anxious, or on edge",
      "Not being able to stop or control worrying",
      "Worrying too much about different things",
      "Trouble relaxing",
      "Being so restless that it is hard to sit still",
      "Becoming easily annoyed or irritable",
      "Feeling afraid, as if something awful might happen",
    ],
    options: [
      { label: "Not at all", value: 0 },
      { label: "Several days", value: 1 },
      { label: "More than half the days", value: 2 },
      { label: "Nearly every day", value: 3 },
    ],
    scoring: function(answers) {
      return answers.reduce(function(sum, a) { return sum + a; }, 0);
    },
    getResult: function(score) {
      if (score <= 4)  return { label: "Minimal anxiety",  color: "var(--psy-leaf)", tier: 0 };
      if (score <= 9)  return { label: "Mild anxiety",     color: "#F59E0B",          tier: 1 };
      if (score <= 14) return { label: "Moderate anxiety", color: "#F97316",          tier: 2 };
      return             { label: "Severe anxiety",        color: "#DC2626",          tier: 3 };
    },
    getInterpretation: function(score, result) {
      if (result.tier === 0) return "Your responses suggest minimal anxiety symptoms at this time. If you are concerned about anxiety in your daily life, a brief conversation with a psychologist can still be helpful.";
      if (result.tier === 1) return "Your responses suggest mild anxiety symptoms. Anxiety at this level can still affect daily life. A psychologist can offer practical, evidence-based strategies to help you manage worry and stress.";
      if (result.tier === 2) return "Your responses suggest moderate anxiety symptoms. This level of anxiety can be quite disruptive. A licensed mental health professional can help you understand the causes and work toward relief.";
      return "Your responses suggest severe anxiety symptoms. This level of distress significantly affects day-to-day functioning. Please consider speaking with a mental health professional as soon as possible.";
    },
    isCrisis: function(score) { return score >= 15; },
  },

  adhd: {
    id: 'adhd',
    title: 'ADHD Screener (ASRS v1.1)',
    scale: 'ASRS v1.1',
    duration: '2-3 minutes',
    questionCount: 6,
    description: "The Adult ADHD Self-Report Scale (ASRS v1.1) is a validated screener developed in collaboration with the World Health Organization (WHO). It identifies symptoms of ADHD in adults. This short version uses 6 questions. Note: ADHD is a complex neurodevelopmental condition that can only be formally diagnosed by a qualified clinician following a comprehensive assessment.",
    prefix: null,
    questions: [
      "How often do you have trouble wrapping up the final details of a project, once the challenging parts have been done?",
      "How often do you have difficulty getting things in order when you have to do a task that requires organisation?",
      "How often do you have problems remembering appointments or obligations?",
      "When you have a task that requires a lot of thought, how often do you avoid or delay getting started?",
      "How often do you fidget or squirm with your hands or feet when you have to sit down for a long time?",
      "How often do you feel overly active and compelled to do things, like you were driven by a motor?",
    ],
    options: [
      { label: "Never",      value: 0 },
      { label: "Rarely",     value: 1 },
      { label: "Sometimes",  value: 2 },
      { label: "Often",      value: 3 },
      { label: "Very often", value: 4 },
    ],
    // ASRS scoring: Q1-3 positive if >=2; Q4-6 positive if >=3
    scoring: function(answers) {
      var count = 0;
      answers.forEach(function(val, i) {
        if (i < 3 && val >= 2) count++;
        if (i >= 3 && val >= 3) count++;
      });
      return count;
    },
    getResult: function(positiveCount) {
      if (positiveCount <= 2) return { label: "Low likelihood of ADHD",      color: "var(--psy-leaf)", tier: 0 };
      if (positiveCount <= 4) return { label: "Moderate likelihood of ADHD", color: "#F59E0B",          tier: 1 };
      return                   { label: "High likelihood of ADHD",           color: "#F97316",          tier: 2 };
    },
    getInterpretation: function(score, result) {
      if (result.tier === 0) return "Your responses suggest a low likelihood of ADHD symptoms at a clinically significant level. If you still have concerns about attention or focus, a conversation with a psychologist can help clarify things.";
      if (result.tier === 1) return "Your responses suggest some symptoms consistent with ADHD. A formal assessment by a qualified professional is the only way to determine whether ADHD is present. Speaking with a psychologist or psychiatrist is a good next step.";
      return "Your responses are consistent with a higher likelihood of ADHD symptoms. This does not mean you have ADHD — only a licensed professional can make that determination. We encourage you to speak with a psychologist or psychiatrist for a proper evaluation.";
    },
    isCrisis: function() { return false; },
    scoreLabel: 'positive indicators',
  },

  'self-esteem': {
    id: 'self-esteem',
    title: 'Self-Esteem Assessment (Rosenberg)',
    scale: 'Rosenberg Self-Esteem Scale',
    duration: '3-4 minutes',
    questionCount: 10,
    description: "The Rosenberg Self-Esteem Scale (RSES) is one of the most widely used and validated measures of global self-esteem. Developed by Morris Rosenberg in 1965, it consists of 10 statements about feelings of self-worth. Some items are reverse-scored.",
    prefix: "Please indicate how strongly you agree or disagree with each statement:",
    questions: [
      "I feel that I am a person of worth, at least on an equal basis with others.",
      "I feel that I have a number of good qualities.",
      "All in all, I am inclined to feel that I am a failure.",
      "I am able to do things as well as most other people.",
      "I feel I do not have much to be proud of.",
      "I take a positive attitude toward myself.",
      "On the whole, I am satisfied with myself.",
      "I wish I could have more respect for myself.",
      "I certainly feel useless at times.",
      "At times I think I am no good at all.",
    ],
    // Reverse-scored items: indices 2,4,7,8,9 (0-based)
    reversed: [2, 4, 7, 8, 9],
    options: [
      { label: "Strongly agree",    value: 4 },
      { label: "Agree",             value: 3 },
      { label: "Disagree",          value: 2 },
      { label: "Strongly disagree", value: 1 },
    ],
    scoring: function(answers) {
      var reversed = [2, 4, 7, 8, 9];
      return answers.reduce(function(sum, val, i) {
        var score = reversed.includes(i) ? (5 - val) : val;
        return sum + score;
      }, 0);
    },
    getResult: function(score) {
      if (score <= 25) return { label: "Lower self-esteem",    color: "#F97316", tier: 0 };
      if (score <= 34) return { label: "Moderate self-esteem", color: "#F59E0B", tier: 1 };
      return             { label: "Higher self-esteem",        color: "var(--psy-leaf)", tier: 2 };
    },
    getInterpretation: function(score, result) {
      if (result.tier === 0) return "Your responses suggest lower self-esteem at this time. This can affect many areas of life including relationships, work, and overall wellbeing. A psychologist can help you explore the roots of these feelings and build a stronger sense of self-worth.";
      if (result.tier === 1) return "Your responses suggest a moderate level of self-esteem. While you have a reasonable foundation, there may be areas where you feel less confident or self-assured. Therapy can help you deepen your relationship with yourself.";
      return "Your responses suggest higher self-esteem. You appear to have a generally positive sense of self-worth. If there are specific areas where you would like to grow or seek support, a psychologist can still be a valuable resource.";
    },
    isCrisis: function() { return false; },
    maxScore: 40,
  },
};

// ─── TestScreen ───────────────────────────────────────────────────────────────

function TestScreen({ testId, setRoute }) {
  const { lang } = useLang();
  const test = TEST_DATA[testId];

  const [phase, setPhase] = useState('intro'); // 'intro' | 'questions' | 'results'
  const [currentQ, setCurrentQ] = useState(0);
  const [answers, setAnswers] = useState([]);
  const [selected, setSelected] = useState(null);

  if (!test) {
    return (
      <div style={{ maxWidth: 640, margin: '80px auto', padding: '0 24px', textAlign: 'center' }}>
        <p style={{ color: 'var(--fg2)' }}>Test not found.</p>
        <button className="btn ghost" onClick={function() { setRoute('home'); }}>
          {lang === 'el' ? 'Αρχική' : 'Go home'}
        </button>
      </div>
    );
  }

  // ── Scoring ──
  var finalScore = null;
  var result = null;
  if (phase === 'results' && answers.length === test.questionCount) {
    finalScore = test.scoring(answers);
    result = test.getResult(finalScore);
  }

  // ── Handlers ──
  function handleStart() {
    setAnswers([]);
    setCurrentQ(0);
    setSelected(null);
    setPhase('questions');
  }

  function handleSelect(val) {
    setSelected(val);
  }

  function handleNext() {
    if (selected === null) return;
    var newAnswers = answers.concat([selected]);
    setAnswers(newAnswers);
    setSelected(null);
    if (currentQ + 1 < test.questionCount) {
      setCurrentQ(currentQ + 1);
    } else {
      setPhase('results');
    }
  }

  function handleBack() {
    if (currentQ === 0) {
      setPhase('intro');
      setAnswers([]);
      setSelected(null);
    } else {
      var prev = currentQ - 1;
      var prevAnswers = answers.slice(0, prev);
      setAnswers(prevAnswers);
      setSelected(answers[prev] !== undefined ? answers[prev] : null);
      setCurrentQ(prev);
    }
  }

  function handleRetake() {
    setAnswers([]);
    setCurrentQ(0);
    setSelected(null);
    setPhase('intro');
  }

  // ── Render ──
  if (phase === 'intro') {
    return <TestIntro test={test} lang={lang} onStart={handleStart} setRoute={setRoute} />;
  }

  if (phase === 'questions') {
    return (
      <TestQuestion
        test={test}
        lang={lang}
        questionIndex={currentQ}
        selected={selected}
        onSelect={handleSelect}
        onNext={handleNext}
        onBack={handleBack}
      />
    );
  }

  if (phase === 'results') {
    return (
      <TestResults
        test={test}
        lang={lang}
        score={finalScore}
        result={result}
        onRetake={handleRetake}
        setRoute={setRoute}
      />
    );
  }

  return null;
}

// ─── TestIntro ────────────────────────────────────────────────────────────────

function TestIntro({ test, lang, onStart, setRoute }) {
  return (
    <div style={{ maxWidth: 680, margin: '0 auto', padding: '48px 24px 80px' }}>
      {/* Back link */}
      <div style={{ display: 'inline-block', background: 'var(--psy-accent-soft)', borderRadius: 10, padding: '5px 12px', fontSize: 12, fontWeight: 700, color: 'var(--psy-accent)', letterSpacing: '0.07em', textTransform: 'uppercase', marginBottom: 20 }}>
        {test.scale}
      </div>

      <h1 className="display" style={{ fontSize: 34, fontWeight: 700, letterSpacing: '-0.02em', marginBottom: 16, lineHeight: 1.2 }}>
        {test.title}
      </h1>

      <p style={{ fontSize: 16, color: 'var(--fg2)', lineHeight: 1.65, marginBottom: 32 }}>
        {test.description}
      </p>

      {/* Meta */}
      <div style={{ display: 'flex', gap: 24, marginBottom: 32, flexWrap: 'wrap' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <Icon name="quiz" style={{ color: 'var(--psy-accent)', fontSize: 18 }} />
          <span style={{ fontSize: 14, color: 'var(--fg2)' }}>
            <strong style={{ color: 'var(--psy-ink)' }}>{test.questionCount}</strong> {lang === 'el' ? 'ερωτήσεις' : 'questions'}
          </span>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <Icon name="schedule" style={{ color: 'var(--psy-accent)', fontSize: 18 }} />
          <span style={{ fontSize: 14, color: 'var(--fg2)' }}>
            <strong style={{ color: 'var(--psy-ink)' }}>{test.duration}</strong>
          </span>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <Icon name="verified" style={{ color: 'var(--psy-leaf)', fontSize: 18 }} />
          <span style={{ fontSize: 14, color: 'var(--fg2)' }}>
            {lang === 'el' ? 'Επαληθευμένη κλίμακα' : 'Validated scale'}
          </span>
        </div>
      </div>

      {/* Disclaimer */}
      <div style={{
        background: 'color-mix(in oklab, #F59E0B 10%, white)',
        border: '1px solid #F59E0B',
        borderRadius: 12, padding: '14px 18px', marginBottom: 32,
        display: 'flex', gap: 12, alignItems: 'flex-start',
      }}>
        <Icon name="info" style={{ color: '#B45309', fontSize: 18, marginTop: 1, flexShrink: 0 }} />
        <p style={{ margin: 0, fontSize: 13, color: '#78350F', lineHeight: 1.55 }}>
          <strong>{lang === 'el' ? 'Σημαντική σημείωση:' : 'Important note:'}</strong>{' '}
          {lang === 'el'
            ? "Αυτό είναι ένα εργαλείο ανίχνευσης, όχι διαγνωστικό. Μόνο ένας εξουσιοδοτημένος επαγγελματίας ψυχικής υγείας μπορεί να κάνει διάγνωση. Αν βρίσκεστε σε δυσχέρεια, ζητήστε βοήθεια αμέσως."
            : "This is a screening tool, not a diagnosis. Only a licensed mental health professional can diagnose. If you are in distress, seek help immediately."
          }
        </p>
      </div>

      <button className="btn accent" style={{ fontSize: 16, padding: '14px 36px' }} onClick={onStart}>
        {lang === 'el' ? 'Ξεκινήστε' : 'Start test'}
        <Icon name="arrow_forward" style={{ fontSize: 18, marginLeft: 6 }} />
      </button>
    </div>
  );
}

// ─── TestQuestion ─────────────────────────────────────────────────────────────

function TestQuestion({ test, lang, questionIndex, selected, onSelect, onNext, onBack }) {
  var progress = (questionIndex / test.questionCount) * 100;
  var question = test.questions[questionIndex];

  return (
    <div style={{ maxWidth: 680, margin: '0 auto', padding: '48px 24px 80px' }}>
      {/* Progress */}
      <div style={{ marginBottom: 32 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8 }}>
          <span style={{ fontSize: 13, color: 'var(--fg3)', fontWeight: 500 }}>
            {lang === 'el' ? 'Ερώτηση' : 'Question'} {questionIndex + 1} {lang === 'el' ? 'από' : 'of'} {test.questionCount}
          </span>
          <span style={{ fontSize: 13, color: 'var(--fg3)' }}>{Math.round(progress)}%</span>
        </div>
        <div style={{ height: 6, background: 'var(--psy-rule)', borderRadius: 999, overflow: 'hidden' }}>
          <div style={{
            height: '100%', width: progress + '%',
            background: 'var(--psy-accent)',
            borderRadius: 999,
            transition: 'width 0.3s ease',
          }} />
        </div>
      </div>

      {/* Card */}
      <div style={{
        background: 'white', borderRadius: 20, border: '1px solid var(--psy-rule)',
        padding: '36px 40px', boxShadow: '0 2px 16px rgba(15,21,37,0.06)',
        marginBottom: 24,
      }}>
        {/* Scale label */}
        <div style={{ fontSize: 11, fontWeight: 700, color: 'var(--fg3)', textTransform: 'uppercase', letterSpacing: '0.1em', marginBottom: 12 }}>
          {test.scale}
        </div>

        {/* Prefix */}
        {test.prefix && (
          <p style={{ fontSize: 13, color: 'var(--fg2)', marginBottom: 12, fontStyle: 'italic' }}>
            {test.prefix}
          </p>
        )}

        {/* Question text */}
        <p style={{ fontSize: 20, fontWeight: 600, color: 'var(--psy-ink)', lineHeight: 1.45, marginBottom: 32 }}>
          {question}
        </p>

        {/* Options */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
          {test.options.map(function(opt) {
            var isSelected = selected === opt.value;
            return (
              <button
                key={opt.value}
                onClick={function() { onSelect(opt.value); }}
                style={{
                  width: '100%', textAlign: 'left',
                  padding: '14px 20px',
                  border: isSelected ? '2px solid var(--psy-accent)' : '2px solid var(--psy-rule)',
                  borderRadius: 12, cursor: 'pointer',
                  background: isSelected ? 'var(--psy-accent-soft)' : 'white',
                  color: isSelected ? 'var(--psy-accent)' : 'var(--psy-ink)',
                  fontWeight: isSelected ? 600 : 400,
                  fontSize: 15,
                  display: 'flex', alignItems: 'center', gap: 12,
                  transition: 'all 0.15s',
                }}>
                <span style={{
                  width: 20, height: 20, borderRadius: '50%', flexShrink: 0,
                  border: isSelected ? '6px solid var(--psy-accent)' : '2px solid var(--psy-rule)',
                  background: 'white',
                  display: 'inline-block',
                }} />
                {opt.label}
              </button>
            );
          })}
        </div>
      </div>

      {/* Navigation */}
      <div style={{ display: 'flex', gap: 12, justifyContent: 'space-between' }}>
        <button
          className="btn ghost"
          onClick={onBack}
          style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
          <Icon name="arrow_back" style={{ fontSize: 16 }} />
          {lang === 'el' ? 'Πίσω' : 'Back'}
        </button>
        <button
          className="btn accent"
          onClick={onNext}
          disabled={selected === null}
          style={{ opacity: selected === null ? 0.45 : 1, display: 'flex', alignItems: 'center', gap: 6 }}>
          {questionIndex + 1 === test.questionCount
            ? (lang === 'el' ? "Δείτε αποτελέσματα" : "See results")
            : (lang === 'el' ? "Επόμενο" : "Next")}
          <Icon name="arrow_forward" style={{ fontSize: 16 }} />
        </button>
      </div>
    </div>
  );
}

// ─── TestResults ──────────────────────────────────────────────────────────────

function TestResults({ test, lang, score, result, onRetake, setRoute }) {
  var isCrisis = test.isCrisis(score);
  var interpretation = test.getInterpretation(score, result);
  var maxScore = test.id === 'self-esteem' ? 40 : (test.id === 'adhd' ? 6 : (test.id === 'anxiety' ? 21 : 27));
  var displayScore = test.id === 'adhd' ? score + " / 6" : score + " / " + maxScore;

  return (
    <div style={{ maxWidth: 680, margin: '0 auto', padding: '48px 24px 80px' }}>
      {/* Scale badge */}
      <div style={{ display: 'inline-block', background: 'var(--psy-accent-soft)', borderRadius: 10, padding: '5px 12px', fontSize: 12, fontWeight: 700, color: 'var(--psy-accent)', letterSpacing: '0.07em', textTransform: 'uppercase', marginBottom: 28 }}>
        {test.scale}
      </div>

      {/* Score circle */}
      <div style={{ textAlign: 'center', marginBottom: 36 }}>
        <div style={{
          width: 140, height: 140, borderRadius: '50%',
          border: "8px solid " + result.color,
          display: 'inline-flex', flexDirection: 'column',
          alignItems: 'center', justifyContent: 'center',
          background: 'white',
          boxShadow: "0 0 0 4px color-mix(in oklab, " + result.color + " 15%, white)",
          marginBottom: 20,
        }}>
          <span style={{ fontSize: 38, fontWeight: 800, color: result.color, lineHeight: 1 }}>{test.id === 'adhd' ? score : score}</span>
          <span style={{ fontSize: 12, color: 'var(--fg3)', marginTop: 2 }}>{test.id === 'adhd' ? (lang === 'el' ? 'θετικά' : 'positive') : 'score'}</span>
        </div>
        <div style={{ fontSize: 22, fontWeight: 700, color: result.color }}>{result.label}</div>
        <div style={{ fontSize: 14, color: 'var(--fg3)', marginTop: 4 }}>
          {test.id === 'adhd' ? displayScore + " " + (lang === 'el' ? 'θετικοί δείκτες' : 'positive indicators') : displayScore + " " + (lang === 'el' ? 'συνολική βαθμολογία' : 'total score')}
        </div>
      </div>

      {/* Crisis box */}
      {isCrisis && (
        <div style={{
          background: '#FEF2F2', border: '1.5px solid #DC2626',
          borderRadius: 14, padding: '16px 20px', marginBottom: 24,
          display: 'flex', gap: 12, alignItems: 'flex-start',
        }}>
          <Icon name="warning" style={{ color: '#DC2626', fontSize: 22, marginTop: 1, flexShrink: 0 }} />
          <div>
            <div style={{ fontWeight: 700, color: '#DC2626', marginBottom: 4, fontSize: 15 }}>
              {lang === 'el' ? 'Αν βρίσκεστε σε κρίση' : 'If you are in crisis'}
            </div>
            <p style={{ margin: 0, fontSize: 14, color: '#7F1D1D', lineHeight: 1.5 }}>
              {lang === 'el'
                ? "Καλέστε τη Γραμμή Ψυχικής Υγείας 1410 ή 112 αν κινδυνεύει η ζωή. Μην αντιμετωπίσετε αυτό μόνοι σας."
                : "Call the Mental Health Helpline 1410 or 112 if life is in danger. Please do not face this alone."
              }
            </p>
          </div>
        </div>
      )}

      {/* ADHD disclaimer */}
      {test.id === 'adhd' && (
        <div style={{
          background: 'var(--psy-accent-soft)', border: '1px solid var(--psy-accent)',
          borderRadius: 12, padding: '14px 18px', marginBottom: 24,
          display: 'flex', gap: 12, alignItems: 'flex-start',
        }}>
          <Icon name="psychology" style={{ color: 'var(--psy-accent)', fontSize: 20, marginTop: 1, flexShrink: 0 }} />
          <p style={{ margin: 0, fontSize: 13, color: 'var(--psy-ink)', lineHeight: 1.55 }}>
            <strong>{lang === 'el' ? 'Σημαντική σημείωση:' : 'Important note:'}</strong>{' '}
            {lang === 'el'
              ? "Η ΔΕΠΥ μπορεί να διαγνωσθεί μόνο από εξουσιοδοτημένο επαγγελματία ψυχικής υγείας μετά από πλήρη αξιολόγηση. Αυτό το εργαλείο ανίχνευσης δεν αντικαθιστά επαγγελματική αξιολόγηση."
              : "ADHD can only be diagnosed by a licensed professional following a comprehensive assessment. This screener is not a substitute for professional evaluation."
            }
          </p>
        </div>
      )}

      {/* Interpretation */}
      <div style={{
        background: 'white', border: '1px solid var(--psy-rule)',
        borderRadius: 16, padding: '24px 28px', marginBottom: 24,
      }}>
        <h3 style={{ fontSize: 15, fontWeight: 700, color: 'var(--psy-ink)', marginBottom: 10 }}>
          {lang === 'el' ? 'Ερμηνεία' : 'Interpretation'}
        </h3>
        <p style={{ fontSize: 15, color: 'var(--fg2)', lineHeight: 1.65, margin: 0 }}>
          {interpretation}
        </p>
      </div>

      {/* Disclaimer */}
      <div style={{
        background: 'var(--psy-surface)', border: '1px solid var(--psy-rule)',
        borderRadius: 12, padding: '14px 18px', marginBottom: 32,
      }}>
        <p style={{ margin: 0, fontSize: 12, color: 'var(--fg3)', lineHeight: 1.55 }}>
          <strong>{lang === 'el' ? 'Αποποίηση ευθύνης:' : 'Disclaimer:'}</strong>{' '}
          {lang === 'el'
            ? "Αυτό είναι ένα εργαλείο ανίχνευσης, όχι διαγνωστικό. Μόνο ένας εξουσιοδοτημένος επαγγελματίας ψυχικής υγείας μπορεί να κάνει διάγνωση. Αν βρίσκεστε σε δυσχέρεια, ζητήστε βοήθεια αμέσως."
            : "This is a screening tool, not a diagnosis. Only a licensed mental health professional can diagnose. If you are in distress, seek help immediately."
          }
        </p>
      </div>

      {/* CTA */}
      <div style={{
        background: 'color-mix(in oklab, var(--psy-accent) 6%, white)',
        border: '1.5px solid var(--psy-accent)',
        borderRadius: 20, padding: '28px 32px', marginBottom: 24, textAlign: 'center',
      }}>
        <div style={{ fontSize: 18, fontWeight: 700, color: 'var(--psy-ink)', marginBottom: 8 }}>
          {lang === 'el' ? 'Μιλήστε με έναν ψυχολόγο' : 'Talk to a psychologist'}
        </div>
        <p style={{ color: 'var(--fg2)', fontSize: 14, lineHeight: 1.55, marginBottom: 20 }}>
          {lang === 'el'
            ? "Βρείτε αδειούχους ψυχολόγους στην Κύπρο, φιλτραρισμένους κατά ειδίκευση, προσέγγιση και διαθεσιμότητα."
            : "Find licensed psychologists in Cyprus, filtered by specialisation, approach, and availability."
          }
        </p>
        <button
          className="btn accent"
          style={{ fontSize: 15, padding: '13px 32px' }}
          onClick={function() { setRoute('directory'); }}>
          <Icon name="search" style={{ fontSize: 18, marginRight: 8 }} />
          {lang === 'el' ? "Βρείτε ψυχολόγο στο Psyche" : "Find a psychologist on Psyche"}
        </button>
      </div>

      {/* Retake */}
      <div style={{ textAlign: 'center' }}>
        <button className="btn ghost" onClick={onRetake} style={{ fontSize: 13 }}>
          {lang === 'el' ? 'Επανάληψη τεστ' : 'Retake test'}
        </button>
      </div>
    </div>
  );
}

Object.assign(window, { TestScreen });
