// arcai-screen-on02.jsx — ON-02 Why Are You Here

function ScreenON02({ onNavigate }) {
  const [selected, setSelected] = React.useState(null);
  const [note, setNote] = React.useState('');

  const motivations = [
    {
      id: 'manager',
      emoji: '🎯',
      title: 'Manager assign saya',
      desc: 'Belajar AI jadi target dari atasan atau perusahaan.',
    },
    {
      id: 'improve',
      emoji: '🚀',
      title: 'Mau tingkatin skill',
      desc: 'Penasaran sama AI dan mau lebih jago di kerjaan.',
    },
    {
      id: 'pivot',
      emoji: '🔄',
      title: 'Lagi pivot karir',
      desc: 'Eksplorasi field baru atau siap-siap role berikutnya.',
    },
  ];

  const canContinue = !!selected;

  return (
    <div style={{ height: '100%', overflowY: 'auto', background: 'var(--bg)', paddingTop: 44, display: 'flex', flexDirection: 'column' }}>
      {/* Step indicator */}
      <div style={{ padding: '14px 20px 4px' }}>
        <span style={{ fontSize: 11, color: 'var(--text-muted)', fontFamily: 'var(--font-mono)', letterSpacing: '0.06em', textTransform: 'uppercase' }}>
          ONBOARDING · 2 dari 8
        </span>
      </div>

      {/* Hero */}
      <div style={{ padding: '12px 20px 20px' }}>
        <h1 style={{ fontFamily: 'var(--font-display)', fontSize: 24, fontWeight: 700, letterSpacing: '-0.02em', color: 'var(--text)', margin: 0, lineHeight: 1.2 }}>
          Apa yang bawa kamu ke sini?
        </h1>
        <div style={{ fontSize: 14, color: 'var(--text-muted)', lineHeight: 1.5, marginTop: 10 }}>
          Pilih satu yang paling pas. Ini bantu arcai personalisasi pelajaran kamu.
        </div>
      </div>

      {/* Motivation cards */}
      <div style={{ padding: '0 20px', display: 'flex', flexDirection: 'column', gap: 12 }}>
        {motivations.map(m => {
          const active = selected === m.id;
          return (
            <div key={m.id} onClick={() => setSelected(m.id)}
              style={{
                padding: 18, borderRadius: 16, cursor: 'pointer',
                border: `1px solid ${active ? 'var(--accent)' : 'var(--border)'}`,
                background: active ? 'var(--accent-overlay-soft)' : 'var(--bg-soft)',
                transition: 'all 0.15s', position: 'relative',
              }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                <span style={{ fontSize: 28, lineHeight: 1 }}>{m.emoji}</span>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 16, fontWeight: 700, color: 'var(--text)', letterSpacing: '-0.01em' }}>
                  {m.title}
                </div>
              </div>
              <div style={{ fontSize: 13, color: 'var(--text-muted)', lineHeight: 1.5, marginTop: 8 }}>
                {m.desc}
              </div>
              {active && (
                <div style={{
                  position: 'absolute', top: 12, right: 12,
                  width: 18, height: 18, borderRadius: '50%',
                  background: 'var(--accent)', display: 'flex', alignItems: 'center',
                  justifyContent: 'center', fontSize: 10, color: 'var(--bg)', fontWeight: 700,
                }}>✓</div>
              )}
            </div>
          );
        })}
      </div>

      {/* Optional secondary */}
      <div style={{ padding: '20px 20px 0' }}>
        <div style={{ fontSize: 11, color: 'var(--text-dim)', textTransform: 'uppercase', letterSpacing: '0.08em', fontWeight: 700, marginBottom: 8 }}>
          OPSIONAL
        </div>
        <input
          type="text"
          value={note}
          onChange={e => setNote(e.target.value)}
          placeholder="Atau ceritain singkat..."
          style={{
            width: '100%', boxSizing: 'border-box',
            background: 'var(--surface-1)', border: '1px solid var(--border)',
            padding: '12px 14px', borderRadius: 12, fontSize: 13,
            color: 'var(--text)', fontFamily: 'var(--font-body)', outline: 'none',
          }}
        />
      </div>

      {/* Spacer */}
      <div style={{ flex: 1, minHeight: 120 }} />

      {/* Sticky bottom CTA */}
      <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, padding: '16px 20px 28px', background: 'linear-gradient(to top, var(--bg) 60%, transparent)', borderTop: '1px solid var(--border)' }}>
        {!canContinue && (
          <div style={{ fontSize: 11, color: 'var(--text-dim)', fontStyle: 'italic', textAlign: 'center', marginBottom: 8 }}>
            Pilih satu untuk lanjut
          </div>
        )}
        <BtnPrimary onClick={() => canContinue && onNavigate('ON03')} disabled={!canContinue} fullWidth>
          Lanjut →
        </BtnPrimary>
      </div>
    </div>
  );
}

Object.assign(window, { ScreenON02 });