// arcai-screen-on01.jsx — ON-01 Welcome (mobile, first screen post-login)

function ScreenON01({ onNavigate }) {
  const [confirmed, setConfirmed] = React.useState('yes');

  return (
    <div style={{ height: '100%', overflowY: 'auto', background: 'var(--bg)', paddingTop: 44, display: 'flex', flexDirection: 'column', position: 'relative' }}>
      <style>{`
        @keyframes wiggle {
          0%, 60%, 100% { transform: rotate(0deg); }
          10% { transform: rotate(14deg); }
          20% { transform: rotate(-8deg); }
          30% { transform: rotate(14deg); }
          40% { transform: rotate(-4deg); }
          50% { transform: rotate(10deg); }
        }
      `}</style>

      {/* Step indicator */}
      <div style={{ padding: '16px 20px 8px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <span style={{ fontSize: 11, color: 'var(--text-muted)', fontWeight: 600, letterSpacing: '0.08em', fontFamily: 'var(--font-mono)', textTransform: 'uppercase' }}>
          ONBOARDING · 1 dari 8
        </span>
        <svg width="20" height="20" viewBox="0 0 20 20" style={{ display: 'block', flexShrink: 0, opacity: 0.7 }}>
          <path d="M 3 15 A 7 7 0 0 1 17 15" stroke="var(--accent)" strokeWidth="2.5" fill="none" strokeLinecap="round" />
          <circle cx="10" cy="8" r="2" fill="var(--accent)" />
        </svg>
      </div>

      {/* Hero */}
      <div style={{ padding: '32px 20px 8px', display: 'flex', flexDirection: 'column', alignItems: 'flex-start' }}>
        <span style={{ fontSize: 64, lineHeight: 1, display: 'inline-block', transformOrigin: '70% 70%', animation: 'wiggle 2.4s ease-in-out infinite', marginBottom: 18 }}>
          👋
        </span>
        <h1 style={{ fontFamily: 'var(--font-display)', fontSize: 26, fontWeight: 700, letterSpacing: '-0.02em', color: 'var(--text)', margin: 0, lineHeight: 1.15 }}>
          Halo, Rayis!
        </h1>
        <div style={{ fontSize: 14, color: 'var(--text-muted)', marginTop: 8, lineHeight: 1.55 }}>
          Selamat datang di arcai. Kita kenalan dulu sebentar.
        </div>
      </div>

      {/* Body */}
      <div style={{ flex: 1, padding: '24px 20px 140px', display: 'flex', flexDirection: 'column', gap: 18 }}>
        {/* Identity card */}
        <div style={{ background: 'var(--surface-1)', border: '1px solid var(--border)', borderRadius: 16, padding: 18, position: 'relative' }}>
          <svg width="16" height="16" viewBox="0 0 20 20" style={{ position: 'absolute', top: 14, right: 14, opacity: 0.45 }}>
            <path d="M 3 15 A 7 7 0 0 1 17 15" stroke="var(--accent)" strokeWidth="2.5" fill="none" strokeLinecap="round" />
            <circle cx="10" cy="8" r="2" fill="var(--accent)" />
          </svg>
          <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
            <Avatar name="Rayis Ananda" size={56} />
            <div style={{ minWidth: 0 }}>
              <div style={{ fontFamily: 'var(--font-display)', fontSize: 18, fontWeight: 700, color: 'var(--text)', letterSpacing: '-0.01em', lineHeight: 1.2 }}>
                Rayis Ananda
              </div>
              <div style={{ fontSize: 12, color: 'var(--text-muted)', marginTop: 4, lineHeight: 1.4 }}>
                Senior Product Manager · Tim Product
              </div>
            </div>
          </div>
          <div style={{ fontSize: 11, color: 'var(--text-dim)', marginTop: 14, lineHeight: 1.5 }}>
            Data ini diambil dari profil perusahaan kamu.
          </div>
        </div>

        {/* Confirmation */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
          <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--text)', marginBottom: 2 }}>
            Apakah identitas ini benar?
          </div>

          <button onClick={() => setConfirmed('yes')}
            style={{
              width: '100%', padding: '14px 16px', borderRadius: 999,
              border: `1px solid ${confirmed === 'yes' ? 'var(--accent)' : 'var(--border)'}`,
              background: confirmed === 'yes' ? 'var(--accent-overlay-soft)' : 'var(--bg-soft)',
              color: confirmed === 'yes' ? 'var(--accent)' : 'var(--text)',
              fontSize: 14, fontWeight: 600, fontFamily: 'var(--font-body)',
              cursor: 'pointer', textAlign: 'center', transition: 'all 0.15s',
              display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
            }}>
            {confirmed === 'yes' && <span style={{ fontSize: 12 }}>✓</span>}
            Ya, lanjut
          </button>

          <button onClick={() => setConfirmed('no')}
            style={{
              width: '100%', padding: '14px 16px', borderRadius: 999,
              border: `1px solid ${confirmed === 'no' ? 'var(--accent)' : 'var(--border)'}`,
              background: confirmed === 'no' ? 'var(--accent-overlay-soft)' : 'transparent',
              color: confirmed === 'no' ? 'var(--accent)' : 'var(--text-muted)',
              fontSize: 14, fontWeight: 500, fontFamily: 'var(--font-body)',
              cursor: 'pointer', textAlign: 'center', transition: 'all 0.15s',
            }}>
            Bukan, koreksi
          </button>
        </div>
      </div>

      {/* 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)' }}>
        <BtnPrimary onClick={() => confirmed && onNavigate('ON02')} disabled={!confirmed} fullWidth>
          Lanjut →
        </BtnPrimary>
      </div>
    </div>
  );
}

Object.assign(window, { ScreenON01 });