function DeleteAccount({ nav }) {
  const { Button, BottomSheet } = window.SpotureDesignSystem_f7ad96;
  const [reason, setReason] = React.useState(null);
  const [etc, setEtc] = React.useState('');
  const [agree, setAgree] = React.useState(false);
  const [confirm, setConfirm] = React.useState(false);
  const [verifying, setVerifying] = React.useState(false);
  const [done, setDone] = React.useState(false);
  const reasons = ['사진 올릴 일이 줄었어요', '동네에 볼 만한 게시물이 적어요', '알림이 너무 많아요', '개인정보가 걱정돼요', '다른 앱을 쓰고 있어요', '기타'];
  const losing = [
    { icon: 'photo', label: '게시물 84개', sub: '사진·영상과 위치 기록' },
    { icon: 'folder', label: '컬렉션 4개', sub: '저장한 이웃 컬렉션 2개 포함' },
    { icon: 'award', label: '배지 6개', sub: '국밥전문가 · 위치제보왕 등' },
    { icon: 'flag', label: '진행 중인 챌린지 9개', sub: '누적 진행도는 복구할 수 없어요' }
  ];
  const valid = reason && agree && (reason !== '기타' || etc.trim().length > 0);
  if (done) return (
    <div style={{ flex: '1 1 0%', minHeight: 0, display: 'flex', flexDirection: 'column' }}>
      <StatusBar />
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', padding: '0 32px', textAlign: 'center' }}>
        <div style={{ width: 64, height: 64, borderRadius: '50%', background: 'var(--surface-2)', display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 18 }}><i className="ti ti-door-exit" style={{ fontSize: 28, color: 'var(--text-muted)' }}></i></div>
        <span style={{ font: 'var(--text-heading)', display: 'block', marginBottom: 10 }}>탈퇴 신청이 접수됐어요</span>
        <p style={{ font: 'var(--text-caption)', color: 'var(--text-secondary)', lineHeight: 1.7, margin: '0 0 26px', textWrap: 'pretty' }}>30일 안에 같은 계정으로 로그인하면 기록을 그대로 되살릴 수 있어요. 이후에는 완전히 삭제됩니다.</p>
        <button onClick={() => nav('feed')} style={{ padding: '15px 34px', font: '600 15px/1 var(--font-family)', border: 'none', background: 'var(--bg-ink)', color: '#fff', borderRadius: 999, cursor: 'pointer' }}>확인</button>
      </div>
    </div>
  );
  return (
    <div style={{ flex: '1 1 0%', minHeight: 0, display: 'flex', flexDirection: 'column', position: 'relative' }}>
      <StatusBar />
      <ScreenHeader title="회원 탈퇴" sub="떠나기 전에 잠깐만 확인해주세요" onBack={() => nav('settings')} />
      <div style={{ flex: '1 1 0%', minHeight: 0, overflowY: 'auto', padding: '0 20px 120px', display: 'flex', flexDirection: 'column', gap: 22 }}>
        <div>
          <span style={{ font: 'var(--text-body-strong)', display: 'block', marginBottom: 10 }}>탈퇴하면 사라지는 기록</span>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 2, background: 'var(--surface-1)', border: '1px solid var(--border)', borderRadius: 'var(--radius-tile)', overflow: 'hidden' }}>
            {losing.map((l, i) => (
              <div key={l.label} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '14px 16px', borderTop: i ? '1px solid var(--border)' : 'none' }}>
                <i className={'ti ti-' + l.icon} style={{ fontSize: 18, color: 'var(--text-secondary)', flexShrink: 0 }}></i>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ font: 'var(--text-body)', marginBottom: 2 }}>{l.label}</div>
                  <div style={{ font: 'var(--text-micro)', color: 'var(--text-muted)' }}>{l.sub}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
        <div style={{ display: 'flex', gap: 10, background: 'var(--bg-accent)', borderRadius: 'var(--radius-tile)', padding: '14px 16px' }}>
          <i className="ti ti-bulb" style={{ fontSize: 18, color: 'var(--text-accent)', flexShrink: 0, marginTop: 1 }}></i>
          <div style={{ minWidth: 0 }}>
            <span style={{ font: '600 13px/1.5 var(--font-family)', color: 'var(--text-accent)', display: 'block', marginBottom: 3 }}>알림만 끄고 쉬어가도 돼요</span>
            <span style={{ font: 'var(--text-micro)', color: 'var(--text-secondary)', lineHeight: 1.6 }}>푸시 알림을 끄거나 게시물을 '나만 보기'로 바꾸면 기록은 지키면서 조용히 쓸 수 있어요.</span>
          </div>
        </div>
        <div>
          <span style={{ font: 'var(--text-body-strong)', display: 'block', marginBottom: 10 }}>떠나는 이유를 알려주세요</span>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            {reasons.map(r => {
              const on = reason === r;
              return (
                <div key={r} onClick={() => setReason(r)} style={{ display: 'flex', alignItems: 'center', gap: 11, padding: '14px 16px', background: on ? 'var(--surface-2)' : 'transparent', border: '1px solid ' + (on ? 'var(--border-strong)' : 'var(--border)'), borderRadius: 'var(--radius-tile)', cursor: 'pointer' }}>
                  <span style={{ width: 18, height: 18, borderRadius: '50%', border: '2px solid ' + (on ? 'var(--text-accent)' : 'var(--border-strong)'), background: on ? 'var(--text-accent)' : 'transparent', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>{on && <span style={{ width: 6, height: 6, borderRadius: '50%', background: '#fff' }}></span>}</span>
                  <span style={{ font: 'var(--text-body)', flex: 1 }}>{r}</span>
                </div>
              );
            })}
          </div>
          {reason === '기타' && <textarea value={etc} onChange={e => setEtc(e.target.value.slice(0, 100))} rows={3} placeholder="어떤 점이 아쉬웠는지 알려주세요" style={{ width: '100%', boxSizing: 'border-box', marginTop: 10, padding: '14px 16px', font: 'var(--text-body)', fontFamily: 'var(--font-family)', color: 'var(--text-primary)', background: 'var(--surface-1)', border: '1px solid var(--border)', borderRadius: 'var(--radius-tile)', outline: 'none', resize: 'none', lineHeight: 1.6 }}></textarea>}
        </div>
        <div onClick={() => setAgree(v => !v)} style={{ display: 'flex', alignItems: 'flex-start', gap: 11, background: 'var(--surface-1)', border: '1px solid ' + (agree ? 'var(--text-danger)' : 'var(--border)'), borderRadius: 'var(--radius-tile)', padding: '15px 16px', cursor: 'pointer' }}>
          <span style={{ width: 19, height: 19, borderRadius: 5, border: '2px solid ' + (agree ? 'var(--text-danger)' : 'var(--border-strong)'), background: agree ? 'var(--text-danger)' : 'transparent', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, marginTop: 1 }}>{agree && <i className="ti ti-check" style={{ fontSize: 13, color: '#fff' }}></i>}</span>
          <span style={{ font: 'var(--text-small)', color: 'var(--text-secondary)', lineHeight: 1.6 }}>게시물·컬렉션·배지가 <b style={{ color: 'var(--text-primary)' }}>30일 후 완전히 삭제</b>되며 되돌릴 수 없다는 점을 확인했어요.</span>
        </div>
      </div>
      <div style={{ position: 'absolute', left: 0, right: 0, bottom: 0, padding: '12px 20px 20px', background: 'var(--bg-app)' }}>
        <Button variant="primary" disabled={!valid} onClick={() => setConfirm(true)}>{valid ? '탈퇴하고 본인 인증' : '이유와 확인란을 입력해주세요'}</Button>
      </div>
      {confirm && (
        <div style={{ position: 'fixed', inset: 0, background: 'rgba(20,20,20,.42)', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 28, zIndex: 70 }}>
          <div style={{ background: 'var(--surface-1)', borderRadius: 'var(--radius-card)', padding: 24, textAlign: 'center', boxShadow: 'var(--shadow-float)', maxWidth: 306, width: '100%' }}>
            <div style={{ width: 58, height: 58, borderRadius: '50%', background: 'var(--bg-danger)', display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 15px' }}><i className="ti ti-shield-lock" style={{ fontSize: 25, color: 'var(--text-danger)' }}></i></div>
            <span style={{ font: 'var(--text-heading)', display: 'block', marginBottom: 8 }}>본인 확인이 필요해요</span>
            <p style={{ font: 'var(--text-caption)', color: 'var(--text-secondary)', margin: '0 0 16px', lineHeight: 1.65, textWrap: 'pretty' }}>{verifying ? '카카오에서 돌아오면 탈퇴가 진행됩니다.' : '계정 도용을 막기 위해 로그인에 쓰는 카카오 계정으로 한 번 더 인증해주세요. 인증하면 계정이 즉시 비활성화되고 30일 후 완전히 삭제됩니다.'}</p>
            <div style={{ display: 'flex', alignItems: 'center', gap: 9, background: 'var(--surface-2)', borderRadius: 'var(--radius-tile)', padding: '13px 14px', marginBottom: 18, textAlign: 'left' }}>
              <div style={{ width: 28, height: 28, borderRadius: '50%', background: '#FEE500', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}><i className="ti ti-brand-kako-talk" style={{ fontSize: 15, color: '#1A1A1A' }}></i></div>
              <span style={{ font: 'var(--text-small)', color: 'var(--text-secondary)' }}>gukbap****@kakao.com</span>
            </div>
            <div style={{ display: 'flex', gap: 8 }}>
              <button onClick={() => { setConfirm(false); setVerifying(false); }} style={{ flex: 1, padding: '14px 0', font: '600 14px/1 var(--font-family)', border: '1px solid var(--border-strong)', background: 'var(--surface-1)', color: 'var(--text-primary)', borderRadius: 999, cursor: 'pointer' }}>계속 쓰기</button>
              <button onClick={() => { setVerifying(true); setTimeout(() => { setConfirm(false); setVerifying(false); setDone(true); }, 1100); }} style={{ flex: 1, padding: '14px 0', font: '600 14px/1 var(--font-family)', border: 'none', background: verifying ? 'var(--surface-2)' : '#FEE500', color: verifying ? 'var(--text-muted)' : '#1A1A1A', borderRadius: 999, cursor: verifying ? 'default' : 'pointer' }}>{verifying ? '인증 중…' : '카카오로 인증'}</button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}
window.DeleteAccount = DeleteAccount;

function LogoutModal({ onCancel, onConfirm }) {
  return (
    <div style={{ position: 'fixed', inset: 0, background: 'rgba(20,20,20,.42)', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 28, zIndex: 70 }}>
      <div style={{ background: 'var(--surface-1)', borderRadius: 'var(--radius-card)', padding: 24, textAlign: 'center', boxShadow: 'var(--shadow-float)', maxWidth: 306, width: '100%' }}>
        <div style={{ width: 58, height: 58, borderRadius: '50%', background: 'var(--surface-2)', display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 15px' }}><i className="ti ti-logout" style={{ fontSize: 25, color: 'var(--text-secondary)' }}></i></div>
        <span style={{ font: 'var(--text-heading)', display: 'block', marginBottom: 8 }}>로그아웃할까요?</span>
        <p style={{ font: 'var(--text-caption)', color: 'var(--text-secondary)', margin: '0 0 16px', lineHeight: 1.65, textWrap: 'pretty' }}>게시물과 배지는 그대로 남아 있어요. 다시 카카오 계정으로 로그인하면 이어서 쓸 수 있습니다.</p>
        <div style={{ display: 'flex', alignItems: 'center', gap: 9, background: 'var(--surface-2)', borderRadius: 'var(--radius-tile)', padding: '13px 14px', marginBottom: 18, textAlign: 'left' }}>
          <i className="ti ti-photo-up" style={{ fontSize: 16, color: 'var(--text-muted)', flexShrink: 0 }}></i>
          <span style={{ font: 'var(--text-small)', color: 'var(--text-secondary)', lineHeight: 1.5 }}>작성 중이던 게시물 <b style={{ color: 'var(--text-primary)' }}>1건</b>은 저장되지 않아요</span>
        </div>
        <div style={{ display: 'flex', gap: 8 }}>
          <button onClick={onCancel} style={{ flex: 1, padding: '14px 0', font: '600 14px/1 var(--font-family)', border: '1px solid var(--border-strong)', background: 'var(--surface-1)', color: 'var(--text-primary)', borderRadius: 999, cursor: 'pointer' }}>취소</button>
          <button onClick={onConfirm} style={{ flex: 1, padding: '14px 0', font: '600 14px/1 var(--font-family)', border: 'none', background: 'var(--bg-ink)', color: '#fff', borderRadius: 999, cursor: 'pointer' }}>로그아웃</button>
        </div>
      </div>
    </div>
  );
}
window.LogoutModal = LogoutModal;