function Login({ onDone }) {
  const { Button } = window.SpotureDesignSystem_f7ad96;
  const [step, setStep] = React.useState('social');
  const [provider, setProvider] = React.useState('카카오');
  const [nick, setNick] = React.useState('');
  const [handle, setHandle] = React.useState('');
  const [bio, setBio] = React.useState('');
  const [color, setColor] = React.useState(0);
  const [area, setArea] = React.useState('');
  const [areaSheet, setAreaSheet] = React.useState(false);
  const [photoSheet, setPhotoSheet] = React.useState(false);
  const [legal, setLegal] = React.useState(null);
  const colors = ['#E31E24', '#1A1A1A', '#E8A33D', '#1B8F5A', '#3B6FD9', '#8A5CD9'];
  const steps = ['nick', 'profile', 'area'];
  const idx = steps.indexOf(step);
  const nickOk = nick.trim().length > 1;
  const handleOk = /^[a-z0-9_.]{3,20}$/.test(handle);
  const go = (s) => setStep(s);
  const social = (label, bg, fg, icon, border) => (
    <button onClick={() => { setProvider(label); setStep('nick'); }} style={{ width: '100%', padding: '14px 0', borderRadius: 'var(--radius-chip)', border: border || 'none', background: bg, color: fg, font: '600 14px/1 var(--font-family)', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 7, cursor: 'pointer' }}><i className={'ti ti-' + icon} style={{ fontSize: 16 }}></i>{label === 'Apple' || label === 'Google' ? label + '로 계속하기' : label + '로 시작하기'}</button>
  );
  const Head = ({ title, sub }) => (
    <div style={{ paddingTop: 20 }}>
      <span style={{ font: 'var(--text-display)', display: 'block', marginBottom: 8 }}>{title}</span>
      <span style={{ font: 'var(--text-body)', color: 'var(--text-secondary)', lineHeight: 1.6 }}>{sub}</span>
    </div>
  );
  const Progress = () => (
    <div style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '6px 0 4px' }}>
      <i className="ti ti-arrow-left" onClick={() => go(idx === 0 ? 'social' : steps[idx - 1])} style={{ fontSize: 20, color: 'var(--text-primary)', cursor: 'pointer', flexShrink: 0 }}></i>
      <div style={{ flex: 1, display: 'flex', gap: 5 }}>
        {steps.map((s, i) => <div key={s} style={{ flex: 1, height: 4, borderRadius: 999, background: i <= idx ? 'var(--text-accent)' : 'var(--border)' }}></div>)}
      </div>
      <span style={{ font: 'var(--text-micro)', color: 'var(--text-muted)', flexShrink: 0 }}>{idx + 1}/3</span>
    </div>
  );
  return (
    <div style={{ flex: 1, minHeight: 0, display: 'flex', flexDirection: 'column', background: 'var(--surface-1)', position: 'relative' }}>
      <StatusBar />
      {step === 'social' && (
        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', padding: '0 26px 34px' }}>
          <div style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', gap: 18 }}>
            <span className="spoture-wordmark" style={{ '--wm-size': '82px' }}></span>
            <p style={{ font: 'var(--text-body)', color: 'var(--text-secondary)', textAlign: 'center', margin: 0, lineHeight: 1.6 }}>내가 가본 맛집을 사진 한 장으로<br />지도까지 함께 공유하세요</p>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            {social('카카오', 'var(--kakao)', 'var(--kakao-ink)', 'message-circle')}
            {social('네이버', 'var(--naver)', '#fff', 'circle-letter-n')}
            {social('Google', 'var(--surface-1)', 'var(--text-primary)', 'brand-google', '1px solid var(--border-strong)')}
            {social('Apple', 'var(--surface-1)', 'var(--text-primary)', 'brand-apple', '1px solid var(--border-strong)')}
            <p style={{ font: 'var(--text-micro)', color: 'var(--text-muted)', textAlign: 'center', margin: '10px 0 0', lineHeight: 1.6 }}>계속하면 <span onClick={() => setLegal('terms')} style={{ color: 'var(--text-primary)', fontWeight: 600, textDecoration: 'underline', textUnderlineOffset: 2, cursor: 'pointer' }}>이용약관</span> 및 <span onClick={() => setLegal('privacy')} style={{ color: 'var(--text-primary)', fontWeight: 600, textDecoration: 'underline', textUnderlineOffset: 2, cursor: 'pointer' }}>개인정보처리방침</span>에 동의하게 됩니다</p>
          </div>
        </div>
      )}
      {step === 'nick' && (
        <div style={{ flex: 1, minHeight: 0, display: 'flex', flexDirection: 'column', padding: '0 26px 30px' }}>
          <Progress />
          <Head title="어떻게 불러드릴까요?" sub={provider + ' 계정으로 시작해요. 닉네임과 아이디는 나중에 바꿀 수 있어요.'} />
          <div style={{ flex: 1, minHeight: 0, overflowY: 'auto', marginTop: 26, display: 'flex', flexDirection: 'column', gap: 22 }}>
            <div>
              <span style={{ font: 'var(--text-body-strong)', display: 'block', marginBottom: 9 }}>닉네임</span>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10, background: 'var(--surface-2)', borderRadius: 'var(--radius-field)', padding: '17px 18px', border: '1px solid ' + (nickOk ? 'var(--text-success)' : 'var(--border)') }}>
                <input value={nick} onChange={e => setNick(e.target.value.slice(0, 12))} placeholder="예) 국밥러버92" style={{ flex: 1, border: 'none', outline: 'none', background: 'transparent', font: 'var(--text-body)', fontFamily: 'var(--font-family)', color: 'var(--text-primary)', minWidth: 0 }} />
                {nickOk && <i className="ti ti-circle-check" style={{ fontSize: 19, color: 'var(--text-success)' }}></i>}
              </div>
              <span style={{ font: 'var(--text-small)', color: nickOk ? 'var(--text-success)' : 'var(--text-muted)', display: 'block', marginTop: 8, paddingLeft: 4 }}>{nickOk ? '사용 가능한 닉네임이에요' : '2~12자, 한글·영문·숫자'}</span>
            </div>
            <div>
              <span style={{ font: 'var(--text-body-strong)', display: 'block', marginBottom: 9 }}>아이디</span>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, background: 'var(--surface-2)', borderRadius: 'var(--radius-field)', padding: '17px 18px', border: '1px solid ' + (handle ? (handleOk ? 'var(--text-success)' : 'var(--text-danger)') : 'var(--border)') }}>
                <span style={{ font: 'var(--text-body)', color: 'var(--text-muted)' }}>@</span>
                <input value={handle} onChange={e => setHandle(e.target.value.toLowerCase().replace(/[^a-z0-9_.]/g, '').slice(0, 20))} placeholder="gukbap_lover92" style={{ flex: 1, border: 'none', outline: 'none', background: 'transparent', font: 'var(--text-body)', fontFamily: 'var(--font-family)', color: 'var(--text-primary)', minWidth: 0 }} />
                {handleOk && <i className="ti ti-circle-check" style={{ fontSize: 19, color: 'var(--text-success)' }}></i>}
              </div>
              <span style={{ font: 'var(--text-small)', color: 'var(--text-muted)', display: 'block', marginTop: 8, paddingLeft: 4 }}>이웃이 나를 찾을 때 쓰는 주소예요 · 영문 소문자·숫자 3~20자</span>
            </div>
          </div>
          <Button variant="primary" disabled={!nickOk || !handleOk} onClick={() => go('profile')}>다음<i className="ti ti-arrow-right" style={{ fontSize: 18 }}></i></Button>
        </div>
      )}
      {step === 'profile' && (
        <div style={{ flex: 1, minHeight: 0, display: 'flex', flexDirection: 'column', padding: '0 26px 30px' }}>
          <Progress />
          <Head title="프로필을 꾸며볼까요?" sub="지금 넘어가고 나중에 채워도 괜찮아요." />
          <div style={{ flex: 1, minHeight: 0, overflowY: 'auto', marginTop: 24, display: 'flex', flexDirection: 'column', gap: 24 }}>
            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 12 }}>
              <div onClick={() => setPhotoSheet(true)} style={{ position: 'relative', cursor: 'pointer' }}>
                <div style={{ width: 92, height: 92, borderRadius: '50%', background: colors[color], display: 'flex', alignItems: 'center', justifyContent: 'center' }}><span style={{ font: '700 34px/1 var(--font-family)', color: '#fff' }}>{nick ? nick.slice(0, 1) : '?'}</span></div>
                <div style={{ position: 'absolute', right: -2, bottom: -2, width: 32, height: 32, borderRadius: '50%', background: 'var(--bg-ink)', border: '3px solid var(--surface-1)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><i className="ti ti-camera" style={{ fontSize: 15, color: '#fff' }}></i></div>
              </div>
              <span onClick={() => setPhotoSheet(true)} style={{ font: '600 13px/1 var(--font-family)', color: 'var(--text-accent)', cursor: 'pointer' }}>사진 올리기</span>
              <div style={{ display: 'flex', gap: 10, marginTop: 2 }}>
                {colors.map((c, i) => <div key={c} onClick={() => setColor(i)} style={{ width: 26, height: 26, borderRadius: '50%', background: c, cursor: 'pointer', boxShadow: color === i ? '0 0 0 2px var(--surface-1), 0 0 0 4px var(--text-primary)' : 'none' }}></div>)}
              </div>
            </div>
            <div>
              <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 9 }}>
                <span style={{ font: 'var(--text-body-strong)' }}>소개</span>
                <span style={{ font: 'var(--text-micro)', color: 'var(--text-muted)' }}>{bio.length}/60</span>
              </div>
              <textarea value={bio} onChange={e => setBio(e.target.value.slice(0, 60))} rows={3} placeholder="예) 국밥 한 그릇으로 하루를 시작하는 사람" style={{ width: '100%', boxSizing: 'border-box', padding: '16px 18px', font: 'var(--text-body)', fontFamily: 'var(--font-family)', color: 'var(--text-primary)', background: 'var(--surface-2)', border: '1px solid ' + (bio ? 'var(--text-accent)' : 'var(--border)'), borderRadius: 'var(--radius-field)', outline: 'none', resize: 'none', lineHeight: 1.6 }}></textarea>
            </div>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            <Button variant="primary" onClick={() => go('area')}>다음<i className="ti ti-arrow-right" style={{ fontSize: 18 }}></i></Button>
            <span onClick={() => go('area')} style={{ font: '600 13px/1 var(--font-family)', color: 'var(--text-muted)', textAlign: 'center', padding: '10px 0', cursor: 'pointer' }}>건너뛰기</span>
          </div>
        </div>
      )}
      {step === 'area' && (
        <div style={{ flex: 1, minHeight: 0, display: 'flex', flexDirection: 'column', padding: '0 26px 30px' }}>
          <Progress />
          <Head title="어느 동네를 기록하나요?" sub="동네를 정하면 근처 맛집과 미션을 먼저 보여드려요." />
          <div style={{ flex: 1, minHeight: 0, overflowY: 'auto', marginTop: 24, display: 'flex', flexDirection: 'column', gap: 12 }}>
            <div onClick={() => setAreaSheet(true)} style={{ display: 'flex', alignItems: 'center', gap: 11, background: area ? 'var(--bg-accent)' : 'var(--surface-2)', border: '1px solid ' + (area ? 'var(--text-accent)' : 'var(--border)'), borderRadius: 'var(--radius-field)', padding: '17px 18px', cursor: 'pointer' }}>
              <i className="ti ti-map-pin" style={{ fontSize: 19, color: area ? 'var(--text-accent)' : 'var(--text-muted)', flexShrink: 0 }}></i>
              <span style={{ flex: 1, font: 'var(--text-body)', color: area ? 'var(--text-primary)' : 'var(--text-muted)' }}>{area || '동네 검색하기'}</span>
              <i className="ti ti-chevron-right" style={{ fontSize: 16, color: 'var(--text-muted)' }}></i>
            </div>
            <div style={{ display: 'flex', gap: 10, background: 'var(--surface-2)', borderRadius: 'var(--radius-tile)', padding: '15px 16px' }}>
              <i className="ti ti-shield-lock" style={{ fontSize: 17, color: 'var(--text-muted)', flexShrink: 0, marginTop: 1 }}></i>
              <span style={{ font: 'var(--text-small)', color: 'var(--text-secondary)', lineHeight: 1.6, textWrap: 'pretty' }}>동네 이름만 프로필에 보이고, 정확한 위치는 이웃에게 공개되지 않아요.</span>
            </div>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            <Button variant="primary" disabled={!area} onClick={onDone}>{area ? 'Spoture 시작하기' : '동네를 골라주세요'}</Button>
            <span onClick={onDone} style={{ font: '600 13px/1 var(--font-family)', color: 'var(--text-muted)', textAlign: 'center', padding: '10px 0', cursor: 'pointer' }}>나중에 설정하기</span>
          </div>
        </div>
      )}
      {legal && <LegalModal kind={legal} onClose={() => setLegal(null)} />}
      {photoSheet && <ProfilePhotoSheet onClose={() => setPhotoSheet(false)} />}
      {areaSheet && <EditAreaSheet current={area} onPick={a => { setArea(a); setAreaSheet(false); }} onClose={() => setAreaSheet(false)} />}
    </div>
  );
}
window.Login = Login;