/* screens.jsx — kiosk journey screens (parts 1: Welcome, ID, Triage) */

const { useState, useEffect, useRef } = React;

// ────────────────────────────────────────────────────────────
// HERO AVATAR — nurse photo with concentric halos + floating
// capability chips so it doesn't read as a lonely circle.
// ────────────────────────────────────────────────────────────
function HeroAvatar({ T }) {
  // Anchor chips by side (left or right) so they never overflow on narrow viewports.
  const chips = [
    { icon: 'ph-microphone',   label: T({ th: 'ฟังอาการ',         en: 'Listens' }),    side: 'left',  top: '18%' },
    { icon: 'ph-heartbeat',    label: T({ th: 'วัดสัญญาณชีพ',     en: 'Vitals' }),     side: 'right', top: '20%' },
    { icon: 'ph-brain',        label: T({ th: 'AI วินิจฉัย',        en: 'AI triage' }), side: 'left',  top: '74%' },
    { icon: 'ph-stethoscope',  label: T({ th: 'แนะนำแผนก',       en: 'Routes you' }),  side: 'right', top: '76%' },
  ];
  return (
    <div className="relative w-full max-w-[880px] mx-auto" style={{ aspectRatio: '880/760', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
      {/* Soft glow behind */}
      <div style={{
        position: 'absolute', inset: '8% 18%', borderRadius: '50%',
        background: `radial-gradient(circle, ${K.primary100} 0%, rgba(210,236,237,0) 70%)`,
        filter: 'blur(8px)',
      }}/>
      {/* Slow-rotating dashed orbit */}
      <div style={{
        position: 'absolute', width: '77%', height: '89%', borderRadius: '50%',
        border: `2px dashed ${K.primary}`, opacity: 0.35,
        animation: 'kiosk-orbit 36s linear infinite',
      }}/>
      {/* Big nurse photo, no frame, soft edge fade */}
      <img src="assets/nurse-mordee.jpg" alt="MorDee Nurse" draggable={false}
        style={{
          width: '82%', height: '95%', objectFit: 'contain', display: 'block',
          mixBlendMode: 'multiply',
          WebkitMaskImage: 'radial-gradient(circle at 50% 48%, #000 55%, transparent 78%)',
          maskImage: 'radial-gradient(circle at 50% 48%, #000 55%, transparent 78%)',
          userSelect: 'none', pointerEvents: 'none',
          position: 'relative', zIndex: 2,
        }}/>
      {/* Floating capability chips — hidden on phones to keep hero clean */}
      {chips.map((c, i) => (
        <div key={i} className="hidden md:flex font-semibold text-base sm:text-lg lg:text-xl leading-none items-center" style={{
          position: 'absolute',
          [c.side]: '2%',
          top: c.top,
          transform: 'translateY(-50%)',
          background: '#fff', border: `1px solid ${K.line}`,
          borderRadius: 999, padding: '10px 16px',
          boxShadow: '0 10px 24px rgba(47,82,82,.12)',
          gap: 8,
          color: K.ink2,
          zIndex: 3, whiteSpace: 'nowrap',
          maxWidth: '46%',
        }}>
          <span style={{
            width: 32, height: 32, borderRadius: '50%', flexShrink: 0,
            background: K.primary050, color: K.primary900,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}>
            <i className={`ph-fill ${c.icon} text-base sm:text-lg lg:text-xl`}/>
          </span>
          <span style={{ overflow: 'hidden', textOverflow: 'ellipsis' }}>{c.label}</span>
        </div>
      ))}
      {/* Online pill bottom-center */}
      <div className="font-semibold text-sm sm:text-lg lg:text-xl leading-none" style={{
        position: 'absolute', left: '50%', bottom: '4%',
        transform: 'translateX(-50%)',
        background: K.primary900, color: '#fff',
        padding: '10px 20px', borderRadius: 999,
        letterSpacing: 1,
        display: 'flex', alignItems: 'center', gap: 10,
        boxShadow: '0 14px 30px rgba(47,82,82,.32)',
        zIndex: 3, whiteSpace: 'nowrap',
      }}>
        <span style={{
          width: 10, height: 10, borderRadius: '50%', background: '#7DEC8A', flexShrink: 0,
          animation: 'kiosk-pulse 1.4s infinite',
        }}/>
        {T({ th: 'พี่หมอดี · ออนไลน์', en: 'MorDee · Online' })}
      </div>
    </div>
  );
}

// ────────────────────────────────────────────────────────────
// 1. WELCOME / ATTRACT
// ────────────────────────────────────────────────────────────
function ScreenWelcome({ onStart, showParticles = true }) {
  const T = useT();
  return (
    <div style={{
      flex: 1, display: 'flex', flexDirection: 'column',
      background: `radial-gradient(ellipse at 50% 0%, ${K.primary100} 0%, ${K.bg} 50%, ${K.bg} 100%)`,
      position: 'relative', overflow: 'hidden',
    }}>
      <svg style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', opacity: 0.4 }}>
        <defs>
          <pattern id="dots" x="0" y="0" width="48" height="48" patternUnits="userSpaceOnUse">
            <circle cx="2" cy="2" r="1.5" fill={K.primary} opacity="0.35"/>
          </pattern>
        </defs>
        <rect width="100%" height="100%" fill="url(#dots)"/>
      </svg>

      {/* Floating particle aura — gentle dots + connections behind hero */}
      {showParticles && window.ParticleField && (
        <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none' }}>
          <window.ParticleField count={56} color={K.primary} opacity={0.55}/>
        </div>
      )}

      {/* Header */}
      <div className="flex flex-wrap items-center justify-between gap-3 px-4 pt-4 sm:px-10 sm:pt-8 md:px-20 md:pt-14" style={{ position: 'relative', zIndex: 1 }}>
        <img src="assets/mordee-logo.png" alt="MorDee" className="h-10 sm:h-14 md:h-20"/>
        <div className="flex flex-wrap items-center gap-2 sm:gap-3">
          <LangToggle size="md" tone="light"/>
          <span className="hidden sm:inline-flex">
            <KTag tone="success" icon="ph-circle" size="md">{T({ th: 'ระบบพร้อมใช้งาน', en: 'System ready' })}</KTag>
          </span>
          <span className="hidden md:inline-flex">
            <KTag tone="neutral" icon="ph-shield-check" size="md">{T({ th: 'ปลอดภัย · เข้ารหัส', en: 'Secure · Encrypted' })}</KTag>
          </span>
        </div>
      </div>

      {/* Hero */}
      <div className="px-4 py-6 sm:px-10 sm:py-10 md:px-20 md:py-10 gap-8 sm:gap-12 md:gap-16" style={{
        flex: 1, display: 'flex', flexDirection: 'column',
        alignItems: 'center', justifyContent: 'center',
        position: 'relative', zIndex: 1,
      }}>
        <div style={{ textAlign: 'center' }}>
          <div className="font-semibold text-xl sm:text-3xl lg:text-4xl leading-none mb-4 sm:mb-6 md:mb-8 sm:tracking-widest" style={{
            color: K.primary900,
          }}>SMART OPD · KIOSK</div>
          <h1 className="font-bold text-3xl sm:text-5xl lg:text-7xl leading-tight tracking-tight sm:tracking-tighter mb-4 sm:mb-8" style={{
            color: K.ink, margin: 0,
          }}>{T({ th: <>คัดกรองอาการ<br/>ก่อนพบแพทย์</>, en: <>Smart Triage<br/>Before You See a Doctor</> })}</h1>
          <p className="font-normal text-xl sm:text-3xl lg:text-4xl leading-normal" style={{
            color: K.ink2,
            margin: 0, maxWidth: 880, marginInline: 'auto',
            textWrap: 'balance',
          }}>
            {T({ th: <>พูดคุยกับ <b style={{color: K.primary900}}>พยาบาลผู้ช่วย AI</b><br/>เพื่อประเมินอาการเบื้องต้นและเลือกแผนกที่เหมาะสม</>,
               en: <>Chat with our <b style={{color: K.primary900}}>AI Nurse Assistant</b><br/>to assess your symptoms and find the right department</> })}
          </p>
          <div className="font-medium text-lg sm:text-2xl lg:text-3xl leading-snug mt-4 sm:mt-6" style={{ color: K.meta }}>
            {T({ th: 'ใช้เวลาประมาณ 3–5 นาที', en: 'Takes about 3–5 minutes' })}
          </div>
        </div>

        <HeroAvatar T={T}/>

        <KButton size="xl" onClick={onStart} icon="ph-hand-tap">
          {T({ th: 'แตะเพื่อเริ่มต้น', en: 'Tap to start' })}
        </KButton>

        <div className="font-medium text-lg sm:text-xl lg:text-2xl leading-none flex gap-3 sm:gap-6 md:gap-9 flex-wrap justify-center" style={{ color: K.meta }}>
          <span><i className="ph-bold ph-globe" style={{ marginRight: 10 }}></i>{T({ th: 'ภาษาไทย / English', en: 'Thai / English' })}</span>
          <span style={{ color: K.line }}>·</span>
          <span><i className="ph-bold ph-wheelchair" style={{ marginRight: 10 }}></i>{T({ th: 'รองรับผู้พิการ', en: 'Accessibility supported' })}</span>
          <span style={{ color: K.line }}>·</span>
          <span><i className="ph-bold ph-shield-star" style={{ marginRight: 10 }}></i>HIPAA Ready</span>
        </div>
      </div>

      {/* Footer */}
      <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 px-4 py-6 sm:px-16 sm:py-8" style={{
        position: 'relative', zIndex: 1,
        borderTop: `1px solid ${K.line}`, background: 'rgba(255,255,255,.5)',
      }}>
        <div className="font-normal text-lg sm:text-xl lg:text-2xl leading-snug" style={{ color: K.meta }}>
          <div className="font-semibold text-lg sm:text-xl lg:text-2xl" style={{ color: K.ink2 }}>Center of Excellence</div>
          {T({ th: 'ศูนย์นวัตกรรมการแพทย์ดิจิทัล · MorDee × Hospital Group', en: 'Digital Medical Innovation Center · MorDee × Hospital Group' })}
        </div>
        <div className="font-normal text-lg sm:text-xl lg:text-2xl leading-snug sm:text-right" style={{ color: K.meta }}>
          <div>{T({ th: 'หากต้องการความช่วยเหลือ', en: 'Need help?' })}</div>
          <div className="font-semibold text-lg sm:text-xl lg:text-2xl" style={{ color: K.ink2 }}>{T({ th: 'กดปุ่มเรียกเจ้าหน้าที่ที่ขอบจอ', en: 'Press call-staff button on the side' })}</div>
        </div>
      </div>
    </div>
  );
}

// ────────────────────────────────────────────────────────────
// 2. IDENTIFICATION — single path: เสียบบัตรประชาชน
// ────────────────────────────────────────────────────────────
function ScreenIdentify({ onNext, patient }) {
  const T = useT();
  // phase: insert → reading → confirm
  const [phase, setPhase] = useState('insert');
  const [progress, setProgress] = useState(0);

  // Auto-start the read after a short pause to feel realistic
  useEffect(() => {
    if (phase !== 'insert') return;
    const t = setTimeout(() => setPhase('reading'), 1600);
    return () => clearTimeout(t);
  }, [phase]);

  useEffect(() => {
    if (phase !== 'reading') return;
    let p = 0;
    const id = setInterval(() => {
      p += 6;
      setProgress(Math.min(p, 100));
      if (p >= 100) {
        clearInterval(id);
        setTimeout(() => setPhase('confirm'), 350);
      }
    }, 70);
    return () => clearInterval(id);
  }, [phase]);

  return (
    <ScreenShell title={T({ th: 'เสียบบัตรประชาชน', en: 'Insert your ID card' })} subtitle={T({ th: 'กรุณาเสียบบัตรเข้าช่องด้านล่างของจอ — ระบบจะอ่านข้อมูลให้อัตโนมัติ', en: 'Insert your card into the slot below — the system reads it automatically' })}>
      {phase !== 'confirm' && (
        <div className="flex flex-col items-center gap-6 sm:gap-8 md:gap-9 pt-2 sm:pt-3">
          {/* ID card animation */}
          <div style={{
            position: 'relative', width: 560, height: 360,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}>
            {/* Slot at the bottom */}
            <div style={{
              position: 'absolute', bottom: 0, left: '50%', transform: 'translateX(-50%)',
              width: 360, height: 24, borderRadius: 12,
              background: '#1B2A2A',
              boxShadow: 'inset 0 6px 12px rgba(0,0,0,.6), 0 4px 10px rgba(47,82,82,.15)',
            }}/>
            {/* The card */}
            <IDCard inserting={phase === 'reading'} progress={phase === 'reading' ? progress : 0}/>
          </div>

          {/* Status */}
          <div style={{ textAlign: 'center', minHeight: 80 }}>
            {phase === 'insert' && (
              <>
                <div className="font-semibold text-xl sm:text-3xl lg:text-4xl leading-tight" style={{ color: K.primary900, marginBottom: 8 }}>
                  {T({ th: 'รอเสียบบัตร...', en: 'Waiting for card…' })}
                </div>
                <div className="font-normal text-lg sm:text-xl lg:text-2xl leading-snug" style={{ color: K.meta }}>
                  {T({ th: 'วางด้านที่มีรูปลงในช่อง', en: 'Photo side facing the slot' })}
                </div>
              </>
            )}
            {phase === 'reading' && (
              <>
                <div className="font-semibold text-xl sm:text-3xl lg:text-4xl leading-tight" style={{ color: K.primary900, marginBottom: 16 }}>
                  {T({ th: 'กำลังอ่านข้อมูลจากบัตร...', en: 'Reading card data…' })} {progress}%
                </div>
                <div style={{
                  width: 460, height: 10, background: K.line, borderRadius: 999,
                  overflow: 'hidden', margin: '0 auto',
                }}>
                  <div style={{
                    width: `${progress}%`, height: '100%',
                    background: `linear-gradient(90deg, ${K.primary} 0%, ${K.primary900} 100%)`,
                    transition: 'width .15s',
                  }}/>
                </div>
                <div className="font-normal text-base sm:text-lg leading-snug" style={{ color: K.meta, marginTop: 14 }}>
                  {T({ th: 'โปรดอย่าขยับบัตร · ระบบกำลังตรวจสอบกับฐานข้อมูล', en: 'Please don’t move the card · verifying with database' })}
                </div>
              </>
            )}
          </div>
        </div>
      )}

      {phase === 'confirm' && (
        <div style={{ margin: '8px 0 0' }}>
          <KCard padding={44}>
            <div className="flex items-center gap-4 sm:gap-6 md:gap-7 mb-4 sm:mb-6 md:mb-7">
              <div style={{
                width: 120, height: 120, borderRadius: '50%',
                background: K.primary100, display: 'flex',
                alignItems: 'center', justifyContent: 'center',
                flexShrink: 0,
              }}>
                <i className="ph-fill ph-user text-3xl sm:text-5xl lg:text-6xl" style={{ color: K.primary900 }}></i>
              </div>
              <div style={{ flex: 1 }}>
                <div className="font-medium text-lg sm:text-xl lg:text-2xl leading-none" style={{ color: K.meta, marginBottom: 10 }}>{T({ th: 'ยืนยันข้อมูลของท่าน', en: 'Confirm your information' })}</div>
                <div className="font-bold text-2xl sm:text-4xl lg:text-5xl leading-tight" style={{ color: K.ink }}>{T(patient.name)}</div>
                <div className="font-medium text-lg sm:text-2xl lg:text-3xl leading-none" style={{ color: K.ink3, marginTop: 10 }}>{patient.hn}</div>
              </div>
              <KTag tone="success" icon="ph-check-circle" size="lg">{T({ th: 'ยืนยันแล้ว', en: 'Verified' })}</KTag>
            </div>
            <div className="grid grid-cols-3 gap-3 sm:gap-4 md:gap-5 pt-4 sm:pt-5" style={{ borderTop: `1px solid ${K.line}` }}>
              <InfoBit label={T({ th: 'อายุ', en: 'Age' })} value={T({ th: `${patient.age} ปี`, en: `${patient.age} yrs` })}/>
              <InfoBit label={T({ th: 'เพศ', en: 'Gender' })} value={T(patient.gender)}/>
              <InfoBit label={T({ th: 'แพ้ยา', en: 'Drug allergy' })} value={patient.allergy} highlight={patient.allergy !== '–'}/>
            </div>
          </KCard>
          <div className="flex justify-between mt-6 sm:mt-8">
            <KButton variant="secondary" size="lg" onClick={() => { setProgress(0); setPhase('insert'); }}>{T({ th: 'ไม่ใช่ฉัน · เสียบบัตรใหม่', en: 'Not me · Re-insert card' })}</KButton>
            <KButton size="lg" onClick={onNext} iconRight="ph-arrow-right">{T({ th: 'ถูกต้อง · ไปคุยกับ AI', en: 'Correct · Talk to AI' })}</KButton>
          </div>
        </div>
      )}
    </ScreenShell>
  );
}

// Stylised Thai national ID card with insert animation
function IDCard({ inserting, progress }) {
  // y position: rest at top, slide down into slot when inserting
  const y = inserting ? 90 + (progress / 100) * 80 : 30;
  return (
    <div style={{
      position: 'absolute', top: y, left: '50%',
      transform: 'translateX(-50%)',
      width: 380, height: 240, borderRadius: 18,
      background: 'linear-gradient(135deg, #F7E9C9 0%, #E8D29A 100%)',
      boxShadow: '0 12px 28px rgba(47,82,82,.28), inset 0 1px 0 rgba(255,255,255,.5)',
      transition: 'top .22s ease-out',
      padding: 16, display: 'flex', gap: 14,
      overflow: 'hidden',
    }}>
      {/* photo */}
      <div style={{
        width: 92, height: 116, borderRadius: 6, background: '#C9A86A',
        flexShrink: 0, position: 'relative', overflow: 'hidden',
        boxShadow: 'inset 0 0 0 2px rgba(0,0,0,.08)',
      }}>
        <i className="ph-fill ph-user text-4xl sm:text-6xl lg:text-7xl" style={{
          position: 'absolute', bottom: -10, left: '50%', transform: 'translateX(-50%)',
          color: 'rgba(0,0,0,.25)',
        }}/>
      </div>
      <div style={{ flex: 1, fontFamily: "'Anuphan'", color: '#3a2a14' }}>
        <div className="font-bold text-base leading-none" style={{ letterSpacing: 1.5, color: '#7d5a1a' }}>
          THAI NATIONAL ID CARD
        </div>
        <div className="font-medium text-base leading-none" style={{ color: '#7d5a1a', marginTop: 3 }}>
          บัตรประจำตัวประชาชน
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 4, marginTop: 10 }}>
          {[
            ['Identification No.', '1 ▮▮▮▮ ▮▮▮▮▮ ▮▮ ▮'],
            ['Name', 'Mr. Somchai'],
            ['Last name', 'Jaidee'],
            ['Date of Birth', '12 Jan. 1982'],
          ].map((r, i) => (
            <div key={i} className="font-medium text-base leading-tight" style={{ color: '#3a2a14' }}>
              <span style={{ opacity: 0.6 }}>{r[0]}: </span>
              <span style={{ fontWeight: 700 }}>{r[1]}</span>
            </div>
          ))}
        </div>
        {/* chip */}
        <div style={{
          position: 'absolute', bottom: 16, right: 16, width: 36, height: 28,
          borderRadius: 4, background: 'linear-gradient(135deg, #D4A645 0%, #B07F1F 100%)',
          boxShadow: 'inset 0 1px 0 rgba(255,255,255,.4), 0 1px 2px rgba(0,0,0,.2)',
        }}>
          <div style={{ position: 'absolute', inset: 4, borderRadius: 2, border: '1px solid rgba(0,0,0,.2)' }}/>
        </div>
      </div>
      {/* Scan line */}
      {inserting && (
        <div style={{
          position: 'absolute', left: 0, right: 0, height: 4,
          top: `${progress}%`,
          background: `linear-gradient(90deg, transparent, ${K.coral} 50%, transparent)`,
          boxShadow: `0 0 16px ${K.coral}`,
        }}/>
      )}
    </div>
  );
}

function InfoBit({ label, value, highlight }) {
  return (
    <div>
      <div className="font-medium text-lg sm:text-xl lg:text-2xl leading-none" style={{ color: K.meta, marginBottom: 12 }}>{label}</div>
      <div className="font-bold text-xl sm:text-3xl lg:text-4xl leading-tight" style={{
        color: highlight ? K.danger : K.ink,
      }}>{value}</div>
    </div>
  );
}

// ────────────────────────────────────────────────────────────
// 3. TRIAGE (Conversational Q&A with nurse avatar)
// ────────────────────────────────────────────────────────────
function ScreenTriage({ scenario, onNext }) {
  const T = useT();
  const [step, setStep] = useState(-1); // -1 chief, 0..n questions
  const [answers, setAnswers] = useState({});

  const total = scenario.triage.length;
  const isChief = step === -1;
  const current = !isChief ? scenario.triage[step] : null;

  const pickAnswer = (i) => {
    if (current.multi) {
      const cur = answers[step] || [];
      const next = cur.includes(i) ? cur.filter(x => x !== i) : [...cur, i];
      setAnswers({ ...answers, [step]: next });
    } else {
      setAnswers({ ...answers, [step]: i });
      setTimeout(() => {
        if (step + 1 >= total) onNext();
        else setStep(step + 1);
      }, 350);
    }
  };

  return (
    <ScreenShell title={T({ th: 'คัดกรองอาการเบื้องต้น', en: 'Initial symptom assessment' })} subtitle={T({ th: `คำถามที่ ${Math.max(0, step + 1)} จาก ${total}`, en: `Question ${Math.max(0, step + 1)} of ${total}` })}>
      {/* Avatar + speech */}
      <div className="flex gap-4 sm:gap-6 md:gap-9 items-start mt-4 sm:mt-6 mb-6 sm:mb-8 md:mb-9">
        <NurseAvatar size={180} speaking/>
        <div style={{ flex: 1, paddingTop: 20 }}>
          <div className="font-medium text-base sm:text-lg leading-none" style={{ color: K.primary900, marginBottom: 10 }}>
            {T({ th: 'พยาบาลผู้ช่วย AI · "พี่หมอดี"', en: 'AI Nurse Assistant · "MorDee"' })}
          </div>
          {isChief ? (
            <SpeechBubble>
              {T({ th: <>สวัสดีค่ะ ดิฉันจะช่วยประเมินอาการเบื้องต้นนะคะ<br/><b style={{ color: K.primary900 }}>วันนี้มาด้วยอาการอะไรคะ?</b></>,
                  en: <>Hello! I’ll help assess your symptoms.<br/><b style={{ color: K.primary900 }}>What brings you in today?</b></> })}
            </SpeechBubble>
          ) : (
            <SpeechBubble>{T(current.q)}</SpeechBubble>
          )}
        </div>
      </div>

      {/* Chief complaint preset */}
      {isChief && (
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          <div style={{
            background: K.primary050, border: `2px solid ${K.primary900}`,
            borderRadius: 24, padding: 28,
            display: 'flex', alignItems: 'center', gap: 20,
          }}>
            <i className="ph-fill ph-microphone text-xl sm:text-3xl lg:text-4xl" style={{ color: K.primary900 }}></i>
            <div style={{ flex: 1 }}>
              <div className="font-medium text-base sm:text-lg leading-none" style={{ color: K.meta, marginBottom: 6 }}>{T({ th: 'คุณตอบว่า', en: 'You said' })}</div>
              <div className="font-semibold text-xl sm:text-3xl lg:text-4xl leading-tight" style={{ color: K.ink }}>"{T(scenario.chief)}"</div>
            </div>
            <KTag tone="success" icon="ph-check" size="md">{T({ th: 'เข้าใจแล้ว', en: 'Got it' })}</KTag>
          </div>
          <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: 20 }}>
            <KButton size="lg" onClick={() => setStep(0)} iconRight="ph-arrow-right">{T({ th: 'เริ่มคำถามคัดกรอง', en: 'Start triage questions' })}</KButton>
          </div>
        </div>
      )}

      {/* Question options */}
      {!isChief && current && (
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          {current.options.map((opt, i) => {
            const selected = current.multi
              ? (answers[step] || []).includes(i)
              : answers[step] === i;
            return (
              <button key={i} onClick={() => pickAnswer(i)} className="font-medium text-lg sm:text-2xl lg:text-3xl leading-tight" style={{
                width: '100%', textAlign: 'left',
                padding: '28px 32px', borderRadius: 20,
                background: selected ? K.primary900 : '#fff',
                color: selected ? '#fff' : K.ink,
                border: `2px solid ${selected ? K.primary900 : K.line}`,
                cursor: 'pointer',
                display: 'flex', alignItems: 'center', gap: 20,
                transition: 'all .15s',
                boxShadow: selected ? '0 8px 20px rgba(47,82,82,.2)' : 'none',
              }}>
                <div style={{
                  width: 36, height: 36, borderRadius: 10,
                  border: `2px solid ${selected ? '#fff' : K.line}`,
                  background: selected ? '#fff' : 'transparent',
                  color: K.primary900,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                }}>
                  {selected && <i className="ph-bold ph-check text-lg sm:text-xl lg:text-2xl"></i>}
                </div>
                {T(opt)}
              </button>
            );
          })}
          {current.multi && (
            <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 12 }}>
              <div className="font-normal text-base sm:text-lg leading-none" style={{ color: K.meta, alignSelf: 'center' }}>
                {T({ th: 'เลือกได้มากกว่า 1 ข้อ', en: 'Choose multiple if applicable' })}
              </div>
              <KButton size="lg" onClick={() => {
                if (step + 1 >= total) onNext();
                else setStep(step + 1);
              }} iconRight="ph-arrow-right">{T({ th: 'ถัดไป', en: 'Next' })}</KButton>
            </div>
          )}
        </div>
      )}
    </ScreenShell>
  );
}

window.ScreenWelcome = ScreenWelcome;
window.ScreenIdentify = ScreenIdentify;
window.ScreenTriage = ScreenTriage;