// 돼지엄마 — Peer Mentor (돼지엄마) + Chat (당근 스타일)
// docs/15_peer_mentor_revenue_model.md 명세 준수

// ═══════════════════════ MENTOR LIST ═══════════════════════

function MentorListScreen({ onMentor, onBecome, t }) {
  const [cat, setCat] = useState('all');
  const [tier, setTier] = useState('all');

  const filtered = D.peerMentors.filter((m) => {
    if (cat !== 'all' && !m.categories.includes(cat)) return false;
    if (tier !== 'all' && m.tier !== tier) return false;
    return true;
  });
  const tierMap = Object.fromEntries(D.mentorTiers.map((t) => [t.id, t]));

  return (
    <div style={{ background: 'var(--c-bg-secondary)', minHeight: '100%' }}>
      <TopBar title="돼지엄마 멘토" badge={null} />

      {/* Hero — 돼지엄마 안내 + 가입 CTA */}
      <div style={{ padding: '12px 16px 0' }}>
        <Card padding={16} style={{
          background: 'linear-gradient(135deg, rgba(255,184,0,.10), rgba(139,92,246,.06))',
          border: '1px solid rgba(255,184,0,.20)',
        }}>
          <div style={{ fontSize: 12, fontWeight: 700, color: '#A77A00', marginBottom: 6 }}>
            돼지엄마 = 정보 많은 학부모
          </div>
          <div style={{ fontSize: 14.5, fontWeight: 700, color: 'var(--c-text-primary)', lineHeight: 1.4, marginBottom: 8, textWrap: 'pretty' }}>
            자녀 입시 끝낸 학부모님 — 정보 공유로 월 100만원~ 수익 가능합니다
          </div>
          <Button kind="primary" size="sm" onClick={onBecome}>나도 멘토 되기 →</Button>
        </Card>
      </div>

      {/* Category filter */}
      <div style={{ padding: '14px 16px 0', overflowX: 'auto', whiteSpace: 'nowrap', scrollbarWidth: 'none' }}>
        <div style={{ display: 'inline-flex', gap: 6 }}>
          {D.mentorCategories.map((c) => {
            const on = cat === c.id;
            return (
              <button key={c.id} onClick={() => setCat(c.id)} style={{
                padding: '6px 12px', borderRadius: 16, fontSize: 12.5, fontWeight: 600, cursor: 'pointer',
                border: '1px solid ' + (on ? 'var(--c-primary)' : 'var(--c-border)'),
                background: on ? 'var(--c-primary)' : 'var(--c-bg-primary)',
                color: on ? '#fff' : 'var(--c-text-sub)', whiteSpace: 'nowrap',
              }}>{c.label}</button>
            );
          })}
        </div>
      </div>

      {/* Tier filter */}
      <div style={{ padding: '8px 16px 0', display: 'flex', gap: 6, overflowX: 'auto', whiteSpace: 'nowrap', scrollbarWidth: 'none' }}>
        <button onClick={() => setTier('all')} style={tierChip(tier === 'all', '#9E9E9E')}>전체 등급</button>
        {D.mentorTiers.map((tt) => (
          <button key={tt.id} onClick={() => setTier(tt.id)} style={tierChip(tier === tt.id, tt.color)}>
            {tt.label}
          </button>
        ))}
      </div>

      {/* Result count */}
      <div style={{ padding: '12px 16px 4px', fontSize: 12, color: 'var(--c-text-sub)' }}>
        전체 <b style={{ color: 'var(--c-text-primary)' }}>{filtered.length}</b>명
      </div>

      {/* Mentor cards */}
      <div style={{ padding: '4px 16px 100px', display: 'flex', flexDirection: 'column', gap: 10 }}>
        {filtered.map((m) => {
          const tt = tierMap[m.tier];
          const minPrice = Math.min(...m.services.filter((s) => s.price > 0).map((s) => s.price));
          return (
            <Card key={m.id} padding={14} onClick={() => onMentor && onMentor(m.id)}>
              <div style={{ display: 'flex', gap: 12, marginBottom: 10 }}>
                <Avatar initial={m.avatar} bg={m.avatarBg} size={56} ring={tt?.color} />
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 4, flexWrap: 'wrap' }}>
                    <span style={{ fontSize: 11, padding: '2px 7px', borderRadius: 4, background: (tt?.color || '#9E9E9E') + '20', color: tt?.color || '#9E9E9E', fontWeight: 700 }}>
                      {tt?.label}
                    </span>
                  </div>
                  <div style={{ fontSize: 14.5, fontWeight: 700, color: 'var(--c-text-primary)', lineHeight: 1.35, marginBottom: 4, textWrap: 'pretty' }}>{m.nickname}</div>
                  <div style={{ fontSize: 12, color: 'var(--c-text-sub)', marginBottom: 4 }}>
                    {m.childrenSummary}
                  </div>
                  <div style={{ display: 'flex', flexWrap: 'wrap', gap: 4 }}>
                    {m.categoryLabels.map((cl) => (
                      <span key={cl} style={{ fontSize: 10.5, padding: '2px 6px', borderRadius: 4, background: 'rgba(44,91,255,.10)', color: 'var(--c-primary)', fontWeight: 600 }}>{cl}</span>
                    ))}
                  </div>
                </div>
              </div>

              <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '10px 12px', background: 'var(--c-bg-secondary)', borderRadius: 8, fontSize: 12, marginBottom: 8 }}>
                <span style={{ color: '#FFB700', fontSize: 14 }}>★</span>
                <b style={{ color: 'var(--c-text-primary)' }}>{m.rating}</b>
                <span style={{ color: 'var(--c-text-sub)' }}>({m.reviewCount}건)</span>
                <span style={{ width: 1, height: 11, background: 'var(--c-border)' }} />
                <span style={{ color: 'var(--c-text-sub)' }}>멘토링 <b style={{ color: 'var(--c-text-primary)' }}>{m.mentorshipCount}</b>회</span>
              </div>

              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontSize: 12, color: 'var(--c-text-sub)' }}>
                <span>최저 <b style={{ color: 'var(--c-text-primary)', fontVariantNumeric: 'tabular-nums', fontSize: 13 }}>{(minPrice / 10000).toLocaleString()}만원~</b></span>
                <span style={{ color: 'var(--c-primary)', fontWeight: 700 }}>상세 보기 →</span>
              </div>
            </Card>
          );
        })}
        {filtered.length === 0 && (
          <div style={{ padding: '60px 20px', textAlign: 'center', color: 'var(--c-text-tertiary)' }}>
            <div style={{ fontSize: 40, marginBottom: 10 }}></div>
            <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--c-text-sub)' }}>조건에 맞는 멘토가 없어요</div>
          </div>
        )}
      </div>
    </div>
  );
}

function tierChip(on, color) {
  return {
    padding: '6px 12px', borderRadius: 16, fontSize: 12, fontWeight: 600, cursor: 'pointer',
    border: '1px solid ' + (on ? color : 'var(--c-border)'),
    background: on ? color + '15' : 'var(--c-bg-primary)',
    color: on ? color : 'var(--c-text-sub)', whiteSpace: 'nowrap',
  };
}

// ═══════════════════════ MENTOR DETAIL ═══════════════════════

function MentorDetailScreen({ onBack, onChat, onPay, mentorId, t }) {
  const m = D.peerMentors.find((x) => x.id === mentorId) || D.peerMentors[0];
  const tt = D.mentorTiers.find((x) => x.id === m.tier);
  const [pickedService, setPickedService] = useState(m.services[0]?.id);

  return (
    <div style={{ background: 'var(--c-bg-secondary)', minHeight: '100%', display: 'flex', flexDirection: 'column' }}>
      <TopBar showBack onBack={onBack} title="" showSearch={false} showBell={false} />

      <div style={{ flex: 1, overflow: 'auto', paddingBottom: 90 }}>
        {/* Profile */}
        <div style={{ background: 'var(--c-bg-primary)', padding: '8px 20px 20px' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 16, marginBottom: 14 }}>
            <Avatar initial={m.avatar} bg={m.avatarBg} size={80} ring={tt?.color} />
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ display: 'inline-flex', alignItems: 'center', gap: 4, padding: '3px 10px', borderRadius: 12, background: (tt?.color || '#9E9E9E') + '20', color: tt?.color, fontSize: 11.5, fontWeight: 700, marginBottom: 6 }}>
                {tt?.label}
              </div>
              <div style={{ fontSize: 17, fontWeight: 800, color: 'var(--c-text-primary)', lineHeight: 1.3, letterSpacing: '-0.02em', textWrap: 'pretty' }}>{m.nickname}</div>
            </div>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: 12.5 }}>
            <span style={{ display: 'flex', alignItems: 'center', gap: 3 }}>
              <span style={{ color: '#FFB700', fontSize: 14 }}>★</span>
              <b>{m.rating}</b>
              <span style={{ color: 'var(--c-text-sub)' }}>({m.reviewCount})</span>
            </span>
            <span style={{ width: 1, height: 11, background: 'var(--c-border)' }} />
            <span style={{ color: 'var(--c-text-sub)' }}>멘토링 <b style={{ color: 'var(--c-text-primary)' }}>{m.mentorshipCount}</b>회</span>
          </div>
          <div style={{ marginTop: 12, fontSize: 14, lineHeight: 1.65, color: 'var(--c-text-primary)', textWrap: 'pretty' }}>{m.bio}</div>
        </div>

        {/* Achievements */}
        <div style={{ padding: '12px 16px 0' }}>
          <Card padding={14}>
            <div style={{ fontSize: 13, fontWeight: 800, color: 'var(--c-text-primary)', marginBottom: 10, display: 'flex', alignItems: 'center', gap: 4 }}>
              자녀 합격 실적
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
              {m.achievements.map((a, i) => (
                <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 13.5, color: 'var(--c-text-primary)' }}>
                  <span style={{ color: 'var(--c-warning)' }}>✓</span>
                  <span style={{ flex: 1, textWrap: 'pretty' }}>{a.text}</span>
                </div>
              ))}
            </div>
          </Card>
        </div>

        {/* Services */}
        <div style={{ padding: '12px 16px 0' }}>
          <div style={{ fontSize: 13, fontWeight: 800, color: 'var(--c-text-primary)', padding: '8px 4px' }}>서비스 {m.services.length}종</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            {m.services.map((s) => {
              const on = pickedService === s.id;
              return (
                <div key={s.id} onClick={() => setPickedService(s.id)} style={{
                  padding: 14, borderRadius: 10, cursor: 'pointer',
                  border: `2px solid ${on ? 'var(--c-primary)' : 'var(--c-border)'}`,
                  background: on ? 'rgba(44,91,255,.04)' : 'var(--c-bg-primary)',
                  display: 'flex', alignItems: 'flex-start', gap: 12,
                }}>
                  <div style={{ width: 40, height: 40, borderRadius: 8, background: 'var(--c-bg-secondary)', display: 'grid', placeItems: 'center', fontSize: 18, flexShrink: 0 }}><Icon name={s.icon} size={18} /></div>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 2, flexWrap: 'wrap' }}>
                      <span style={{ fontSize: 14, fontWeight: 700, color: 'var(--c-text-primary)' }}>{s.name}</span>
                      {s.duration && <span style={{ fontSize: 11, padding: '2px 6px', borderRadius: 4, background: 'var(--c-bg-secondary)', color: 'var(--c-text-sub)', fontWeight: 600 }}>{s.duration}분</span>}
                      {s.slots && <span style={{ fontSize: 11, padding: '2px 6px', borderRadius: 4, background: 'rgba(0,200,150,.12)', color: 'var(--c-verified)', fontWeight: 600 }}>{s.slots}인</span>}
                    </div>
                    <div style={{ fontSize: 12, color: 'var(--c-text-sub)', lineHeight: 1.5, marginBottom: 6, textWrap: 'pretty' }}>{s.desc}</div>
                    <div style={{ fontSize: 14, fontWeight: 800, color: 'var(--c-text-primary)', fontVariantNumeric: 'tabular-nums' }}>
                      {s.price === 0 ? '강사료의 10% 수수료' : `${(s.price / 10000).toLocaleString()}만원`}
                    </div>
                  </div>
                </div>
              );
            })}
          </div>
        </div>

        {/* Chat hint */}
        <div style={{ padding: '12px 16px 0' }}>
          <Card padding={12} style={{ background: 'rgba(44,91,255,.04)', border: '1px solid rgba(44,91,255,.18)' }}>
            <div style={{ fontSize: 12.5, lineHeight: 1.5, color: 'var(--c-text-primary)', textWrap: 'pretty' }}>
              결제 전 궁금한 점이 있다면 <b style={{ color: 'var(--c-primary)' }}>채팅으로 먼저 문의</b>해보세요. 멘토 응답 시간 평균 12시간.
            </div>
          </Card>
        </div>
      </div>

      {/* Sticky CTA */}
      <div style={{ position: 'sticky', bottom: 0, padding: '12px 16px', borderTop: '1px solid var(--c-border)', background: 'var(--c-bg-primary)', display: 'flex', gap: 8 }}>
        <Button kind="secondary" size="md" onClick={() => onChat && onChat(m.id)} leading={<Icon name="chat" size={16} stroke={2} />}>채팅 문의</Button>
        <Button kind="primary" size="md" full onClick={() => onPay && onPay(m.id, pickedService)}>
          예약·결제
        </Button>
      </div>
    </div>
  );
}

// ═══════════════════════ MENTOR ONBOARDING (돼지엄마 가입) ═══════════════════════

function MentorOnboardingScreen({ onCancel, onComplete, t }) {
  const [step, setStep] = useState(0); // 0:welcome 1:eligibility 2:profile 3:service 4:settle 5:done

  // Welcome
  if (step === 0) {
    return (
      <div style={{ background: 'var(--c-bg-primary)', minHeight: '100%', display: 'flex', flexDirection: 'column' }}>
        <div style={{ height: 52, display: 'flex', alignItems: 'center', padding: '0 8px 0 16px' }}>
          <button onClick={onCancel} style={{ width: 36, height: 36, marginLeft: -8, display: 'grid', placeItems: 'center', border: 0, background: 'transparent', cursor: 'pointer', color: 'var(--c-text-primary)' }}>
            <Icon name="close" size={22} />
          </button>
        </div>
        <div style={{ flex: 1, padding: '0 24px 40px' }}>
          <div style={{ marginTop: 24, fontSize: 28, fontWeight: 800, color: 'var(--c-text-primary)', letterSpacing: '-0.03em', lineHeight: 1.25, marginBottom: 12, textWrap: 'pretty' }}>
            나도 돼지엄마가 되어<br /><span style={{ color: 'var(--c-primary)' }}>정보로 수익을 만들 수 있어요</span>
          </div>
          <div style={{ fontSize: 14.5, lineHeight: 1.65, color: 'var(--c-text-sub)', marginBottom: 28, textWrap: 'pretty' }}>
            자녀 입시·유학·국제학교·학원 정보 — 어떤 분야든 정보가 있다면 멘토 신청하세요. 돼지엄마가 결제·정산·세금까지 처리해드려요.
          </div>

          {/* 6 revenue models */}
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 8, marginBottom: 24 }}>
            {[
              { i: 'chat', t: '1:1 멘토링', s: '5만~30만/회' },
              { i: 'users', t: '그룹 멘토링', s: '1.5만~5만/인' },
              { i: 'box', t: '정보 패키지', s: 'PDF·문서' },
              { i: 'mail', t: 'Q&A 답변', s: '5천~3만/건' },
              { i: 'ticket', t: '월 멤버십', s: '2만~5만/월' },
              { i: 'grad', t: '팀 수업 조직', s: '강사료의 10%' },
            ].map((m, i) => (
              <div key={i} style={{ padding: 12, borderRadius: 10, background: 'var(--c-bg-secondary)' }}>
                <div style={{ fontSize: 22, marginBottom: 4 }}><Icon name={m.i} size={22} /></div>
                <div style={{ fontSize: 13, fontWeight: 700 }}>{m.t}</div>
                <div style={{ fontSize: 11, color: 'var(--c-text-sub)', marginTop: 2 }}>{m.s}</div>
              </div>
            ))}
          </div>

          {/* Tier preview */}
          <div style={{ padding: 14, background: 'linear-gradient(135deg, rgba(255,184,0,.08), rgba(139,92,246,.04))', borderRadius: 12, marginBottom: 24 }}>
            <div style={{ fontSize: 13, fontWeight: 800, marginBottom: 8 }}>등급 시스템</div>
            {D.mentorTiers.map((tt) => (
              <div key={tt.id} style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '4px 0', fontSize: 12 }}>
                <span style={{ width: 76, color: tt.color, fontWeight: 700 }}>{tt.label}</span>
                <span style={{ color: 'var(--c-text-sub)', flex: 1, fontSize: 11.5 }}>수수료 {tt.commission}%</span>
              </div>
            ))}
          </div>

          <Button kind="primary" full size="lg" onClick={() => setStep(1)}>멘토 신청하기</Button>
          <div style={{ marginTop: 12, textAlign: 'center', fontSize: 11, color: 'var(--c-text-tertiary)' }}>
            영업일 5일 검수 + 화상 인터뷰 15분 후 활성화
          </div>
        </div>
      </div>
    );
  }

  // Steps 1~4: Wizard
  if (step >= 1 && step <= 4) {
    return <OnboardingWizardStep step={step} setStep={setStep} onCancel={onCancel} />;
  }

  // Done
  return (
    <div style={{ background: 'var(--c-bg-primary)', minHeight: '100%', display: 'flex', flexDirection: 'column' }}>
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', padding: '40px 24px' }}>
        <div style={{ width: 96, height: 96, borderRadius: 48, background: 'rgba(0,184,82,.12)', display: 'grid', placeItems: 'center', marginBottom: 24 }}>
          <Icon name="check" size={48} stroke={2.4} color="var(--c-success)" />
        </div>
        <div style={{ fontSize: 24, fontWeight: 800, color: 'var(--c-text-primary)', letterSpacing: '-0.025em', marginBottom: 10, textAlign: 'center' }}>
          멘토 신청 완료!
        </div>
        <div style={{ fontSize: 14.5, lineHeight: 1.6, color: 'var(--c-text-sub)', maxWidth: 320, textWrap: 'pretty', textAlign: 'center', marginBottom: 32 }}>
          영업일 5일 내 화상 인터뷰(15분) 일정 안내 드립니다. 인터뷰 후 활성화되면 알림으로 통보드려요.
        </div>
        <Button kind="primary" full size="lg" onClick={onComplete} style={{ maxWidth: 320 }}>홈으로</Button>
      </div>
    </div>
  );
}

function OnboardingWizardStep({ step, setStep, onCancel }) {
  const titles = ['', '자격 검증', '프로필 작성', '서비스 등록', '정산 정보'];
  return (
    <div style={{ background: 'var(--c-bg-primary)', minHeight: '100%', display: 'flex', flexDirection: 'column' }}>
      <div style={{ height: 52, display: 'flex', alignItems: 'center', padding: '0 8px' }}>
        <button onClick={() => setStep(step - 1)} style={{ width: 36, height: 36, display: 'grid', placeItems: 'center', border: 0, background: 'transparent', cursor: 'pointer', color: 'var(--c-text-primary)' }}>
          <Icon name="chevL" size={22} />
        </button>
        <div style={{ flex: 1, fontSize: 15, fontWeight: 600, color: 'var(--c-text-sub)', textAlign: 'center' }}>{titles[step]} · Step {step}/4</div>
        <button onClick={onCancel} style={{ width: 36, height: 36, display: 'grid', placeItems: 'center', border: 0, background: 'transparent', cursor: 'pointer', color: 'var(--c-text-tertiary)' }}>
          <Icon name="close" size={20} />
        </button>
      </div>

      <div style={{ padding: '0 16px 8px' }}>
        <div style={{ display: 'flex', gap: 4 }}>
          {[1, 2, 3, 4].map((n) => (
            <div key={n} style={{ flex: 1, height: 3, borderRadius: 2, background: n <= step ? 'var(--c-primary)' : 'var(--c-border)' }} />
          ))}
        </div>
      </div>

      <div style={{ flex: 1, padding: 16, overflow: 'auto' }}>
        {step === 1 && <Step1Eligibility />}
        {step === 2 && <Step2Profile />}
        {step === 3 && <Step3Services />}
        {step === 4 && <Step4Settle />}
      </div>

      <div style={{ position: 'sticky', bottom: 0, padding: '12px 16px', borderTop: '1px solid var(--c-border)', background: 'var(--c-bg-primary)' }}>
        <Button kind="primary" full size="lg" onClick={() => setStep(step + 1)}>
          {step < 4 ? '다음' : '신청 제출'}
        </Button>
      </div>
    </div>
  );
}

function Step1Eligibility() {
  return (
    <div>
      <div style={{ fontSize: 21, fontWeight: 800, color: 'var(--c-text-primary)', letterSpacing: '-0.025em', marginBottom: 8 }}>
        자녀 합격 실적을 인증해주세요
      </div>
      <div style={{ fontSize: 13.5, color: 'var(--c-text-sub)', marginBottom: 20, lineHeight: 1.55, textWrap: 'pretty' }}>
        합격증·재학증명서·졸업증서 등을 업로드하면 운영팀이 검수합니다 (영업일 3일).
      </div>

      <div style={{ marginBottom: 14 }}>
        <div style={{ fontSize: 12.5, fontWeight: 700, color: 'var(--c-text-sub)', marginBottom: 6 }}>자녀 합격 학교</div>
        <input placeholder="예: Cornell University" style={inputStyle} />
      </div>

      <div style={{ marginBottom: 14 }}>
        <div style={{ fontSize: 12.5, fontWeight: 700, color: 'var(--c-text-sub)', marginBottom: 6 }}>합격 연도</div>
        <select style={inputStyle}>
          {['2024', '2023', '2022', '2021', '2020 이전'].map((y) => <option key={y}>{y}</option>)}
        </select>
      </div>

      <div style={{ marginBottom: 14 }}>
        <div style={{ fontSize: 12.5, fontWeight: 700, color: 'var(--c-text-sub)', marginBottom: 6 }}>증빙 자료</div>
        <button style={{ width: '100%', minHeight: 100, border: '2px dashed var(--c-border)', borderRadius: 12, background: 'var(--c-bg-secondary)', cursor: 'pointer', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 6, color: 'var(--c-text-sub)' }}>
          <Icon name="upload" size={28} stroke={1.8} />
          <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--c-text-primary)' }}>합격증·재학증명서·졸업증서</div>
          <div style={{ fontSize: 11, color: 'var(--c-text-tertiary)' }}>JPG·PNG·PDF · 최대 10MB</div>
        </button>
      </div>

      <div style={{ padding: 14, background: 'rgba(44,91,255,.06)', border: '1px solid rgba(44,91,255,.18)', borderRadius: 10 }}>
        <div style={{ fontSize: 12.5, fontWeight: 700, color: 'var(--c-primary)', marginBottom: 6 }}>보안 안내</div>
        <div style={{ fontSize: 12, lineHeight: 1.55, color: 'var(--c-text-primary)', textWrap: 'pretty' }}>
          제출된 증빙은 <b>운영팀 2명만 열람</b>하며, 검증 완료 후 <b>30일 내 자동 파기</b>됩니다.
        </div>
      </div>
    </div>
  );
}

function Step2Profile() {
  const cats = D.mentorCategories.filter((c) => c.id !== 'all');
  const [picked, setPicked] = useState(['us_undergrad']);
  const toggle = (id) => setPicked((p) => p.includes(id) ? p.filter((x) => x !== id) : [...p, id]);
  return (
    <div>
      <div style={{ fontSize: 21, fontWeight: 800, color: 'var(--c-text-primary)', letterSpacing: '-0.025em', marginBottom: 8 }}>
        멘토 프로필을 작성해주세요
      </div>
      <div style={{ fontSize: 13.5, color: 'var(--c-text-sub)', marginBottom: 20, lineHeight: 1.55, textWrap: 'pretty' }}>
        다른 학부모가 보는 프로필입니다. 솔직하게 작성하면 더 많이 매칭됩니다.
      </div>

      <div style={{ marginBottom: 14 }}>
        <div style={{ fontSize: 12.5, fontWeight: 700, color: 'var(--c-text-sub)', marginBottom: 6 }}>익명 닉네임 (자동 생성)</div>
        <input value="강남구 Cornell EA 합격 학부모" readOnly style={{ ...inputStyle, background: 'var(--c-bg-secondary)' }} />
        <div style={{ fontSize: 11, color: 'var(--c-text-tertiary)', marginTop: 4 }}>지역 + 자녀 합격 학교로 자동 생성됩니다</div>
      </div>

      <div style={{ marginBottom: 14 }}>
        <div style={{ fontSize: 12.5, fontWeight: 700, color: 'var(--c-text-sub)', marginBottom: 6 }}>전문 분야 (3개까지)</div>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
          {cats.map((c) => {
            const on = picked.includes(c.id);
            return (
              <button key={c.id} onClick={() => toggle(c.id)} style={{
                padding: '8px 14px', borderRadius: 18, fontSize: 13, fontWeight: 600, cursor: 'pointer',
                border: '1px solid ' + (on ? 'var(--c-primary)' : 'var(--c-border)'),
                background: on ? 'rgba(44,91,255,.08)' : 'var(--c-bg-primary)',
                color: on ? 'var(--c-primary)' : 'var(--c-text-sub)',
              }}>{on ? '✓ ' : ''}{c.label}</button>
            );
          })}
        </div>
      </div>

      <div style={{ marginBottom: 14 }}>
        <div style={{ fontSize: 12.5, fontWeight: 700, color: 'var(--c-text-sub)', marginBottom: 6 }}>자기소개 (300자~)</div>
        <textarea defaultValue="2024년 자녀 Cornell EA 합격. 4년간 입시 동행하면서 모은 정보·실수를 솔직하게 나눕니다."
          style={{ ...inputStyle, height: 120, padding: 12, lineHeight: 1.6, resize: 'vertical' }} />
      </div>
    </div>
  );
}

function Step3Services() {
  const [enabled, setEnabled] = useState(['1on1', 'package', 'qa']);
  const types = [
    { id: '1on1', icon: 'chat', name: '1:1 멘토링 60분', defaultPrice: '8만' },
    { id: 'group', icon: 'users', name: '그룹 멘토링 90분 (3인)', defaultPrice: '5만/인' },
    { id: 'package', icon: 'box', name: '정보 패키지 (PDF)', defaultPrice: '10만' },
    { id: 'qa', icon: 'mail', name: 'Q&A 1건 (24h)', defaultPrice: '1.5만' },
    { id: 'membership', icon: 'ticket', name: '월 멤버십', defaultPrice: '3만/월' },
    { id: 'team', icon: 'grad', name: '팀 수업 조직 (강사료 10%)', defaultPrice: '수수료' },
  ];
  return (
    <div>
      <div style={{ fontSize: 21, fontWeight: 800, color: 'var(--c-text-primary)', letterSpacing: '-0.025em', marginBottom: 8 }}>
        제공할 서비스를 선택해주세요
      </div>
      <div style={{ fontSize: 13.5, color: 'var(--c-text-sub)', marginBottom: 20, lineHeight: 1.55 }}>
        나중에 추가·수정 가능합니다. 1개 이상 선택.
      </div>

      <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
        {types.map((s) => {
          const on = enabled.includes(s.id);
          return (
            <button key={s.id} onClick={() => setEnabled((p) => p.includes(s.id) ? p.filter((x) => x !== s.id) : [...p, s.id])} style={{
              padding: 14, borderRadius: 10, cursor: 'pointer',
              border: `2px solid ${on ? 'var(--c-primary)' : 'var(--c-border)'}`,
              background: on ? 'rgba(44,91,255,.04)' : 'var(--c-bg-primary)',
              display: 'flex', alignItems: 'center', gap: 12, textAlign: 'left',
            }}>
              <div style={{ width: 36, height: 36, borderRadius: 8, background: 'var(--c-bg-secondary)', display: 'grid', placeItems: 'center', fontSize: 16, flexShrink: 0 }}><Icon name={s.icon} size={16} /></div>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 14, fontWeight: 700, color: 'var(--c-text-primary)' }}>{s.name}</div>
                <div style={{ fontSize: 11.5, color: 'var(--c-text-sub)', marginTop: 2 }}>예시 가격 {s.defaultPrice}</div>
              </div>
              {on && <Icon name="check" size={18} color="var(--c-primary)" stroke={3} />}
            </button>
          );
        })}
      </div>
    </div>
  );
}

function Step4Settle() {
  return (
    <div>
      <div style={{ fontSize: 21, fontWeight: 800, color: 'var(--c-text-primary)', letterSpacing: '-0.025em', marginBottom: 8 }}>
        정산 정보를 입력해주세요
      </div>
      <div style={{ fontSize: 13.5, color: 'var(--c-text-sub)', marginBottom: 20, lineHeight: 1.55 }}>
        매월 1일·15일 자동 정산됩니다 (수수료 차감 후).
      </div>

      <div style={{ marginBottom: 14 }}>
        <div style={{ fontSize: 12.5, fontWeight: 700, color: 'var(--c-text-sub)', marginBottom: 6 }}>은행</div>
        <select style={inputStyle}>
          {['신한', '국민', '우리', 'KEB하나', '농협', '카카오뱅크', '토스뱅크'].map((b) => <option key={b}>{b}</option>)}
        </select>
      </div>

      <div style={{ marginBottom: 14 }}>
        <div style={{ fontSize: 12.5, fontWeight: 700, color: 'var(--c-text-sub)', marginBottom: 6 }}>계좌번호</div>
        <input placeholder="-없이 숫자만" style={inputStyle} />
      </div>

      <div style={{ marginBottom: 14 }}>
        <div style={{ fontSize: 12.5, fontWeight: 700, color: 'var(--c-text-sub)', marginBottom: 6 }}>예금주</div>
        <input style={inputStyle} />
      </div>

      <div style={{ marginBottom: 14 }}>
        <div style={{ fontSize: 12.5, fontWeight: 700, color: 'var(--c-text-sub)', marginBottom: 6 }}>구분</div>
        <div style={{ display: 'flex', gap: 6 }}>
          {['개인', '개인사업자', '법인'].map((t) => (
            <button key={t} style={{ flex: 1, padding: '10px 8px', borderRadius: 10, border: '2px solid var(--c-border)', background: 'var(--c-bg-primary)', cursor: 'pointer', fontSize: 13, fontWeight: 600 }}>{t}</button>
          ))}
        </div>
      </div>

      <div style={{ padding: 14, background: 'rgba(255,184,0,.08)', border: '1px solid rgba(255,184,0,.25)', borderRadius: 10, fontSize: 12, lineHeight: 1.55, textWrap: 'pretty' }}>
        ⓘ 멘토 활동 수익은 사업소득으로 과세됩니다. 연 매출 4,800만원 이상 시 부가세 신고 필요. 운영팀이 연말 정산 자료를 자동 발급해드립니다.
      </div>
    </div>
  );
}

const inputStyle = {
  width: '100%', height: 48, padding: '0 14px', borderRadius: 10,
  border: '1px solid var(--c-border)', background: 'var(--c-bg-primary)',
  fontSize: 15, fontWeight: 500, color: 'var(--c-text-primary)',
  outline: 'none', fontFamily: 'inherit',
};

// ═══════════════════════ CHAT LIST (당근 스타일) ═══════════════════════

function ChatListScreen({ onRoom, onBack, t }) {
  const [search, setSearch] = useState('');
  const [filter, setFilter] = useState('all');

  const filtered = D.chatRooms.filter((r) => {
    if (filter === 'unread' && r.unread === 0) return false;
    if (search && !r.peer.name.includes(search) && !r.lastMessage.includes(search)) return false;
    return true;
  });

  return (
    <div style={{ background: 'var(--c-bg-secondary)', minHeight: '100%' }}>
      <TopBar title="채팅" badge={null} onBack={onBack} />

      {/* Search */}
      <div style={{ padding: '12px 16px 0' }}>
        <div style={{ position: 'relative' }}>
          <input
            value={search}
            onChange={(e) => setSearch(e.target.value)}
            placeholder="이름·내용 검색"
            style={{
              width: '100%', height: 40, padding: '0 14px 0 38px',
              borderRadius: 20, border: 0, background: 'var(--c-bg-primary)',
              fontSize: 13.5, outline: 'none', fontFamily: 'inherit', boxSizing: 'border-box',
            }}
          />
          <span style={{ position: 'absolute', left: 14, top: '50%', transform: 'translateY(-50%)', fontSize: 14, color: 'var(--c-text-tertiary)' }}><Icon name="search" size={14} /></span>
        </div>
      </div>

      {/* Filter chips */}
      <div style={{ padding: '10px 16px', display: 'flex', gap: 6 }}>
        {[['all', '전체'], ['unread', '안읽음']].map(([k, l]) => (
          <button
            key={k}
            onClick={() => setFilter(k)}
            style={{
              padding: '6px 12px', borderRadius: 14, fontSize: 12, fontWeight: 700,
              background: filter === k ? 'var(--c-primary)' : 'var(--c-bg-primary)',
              color: filter === k ? '#fff' : 'var(--c-text-sub)',
              border: 0, cursor: 'pointer', fontFamily: 'inherit',
            }}
          >{l}</button>
        ))}
      </div>

      <div style={{ padding: '0 16px 100px', display: 'flex', flexDirection: 'column', gap: 6 }}>
        {filtered.length === 0 ? (
          <div style={{ padding: 40, textAlign: 'center', color: 'var(--c-text-tertiary)', fontSize: 13 }}>
            {search ? '검색 결과 없음' : '아직 채팅이 없습니다.\n멘토·컨설턴트와 대화를 시작해보세요.'}
          </div>
        ) : filtered.map((r) => (
          <Card key={r.id} padding={14} onClick={() => onRoom(r.id)}>
            <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
              <div style={{ position: 'relative', flexShrink: 0 }}>
                <div style={{
                  width: 44, height: 44, borderRadius: 22,
                  background: r.peer.avatarBg, color: '#fff',
                  display: 'grid', placeItems: 'center', fontSize: 17, fontWeight: 800,
                }}>{r.peer.avatar}</div>
              </div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 1 }}>
                  <div style={{ fontSize: 13.5, fontWeight: 700, color: 'var(--c-text-primary)' }}>{r.peer.name}</div>
                  {r.peer.isExpert && (
                    <span style={{ fontSize: 9.5, padding: '1px 5px', borderRadius: 3, background: 'var(--c-primary)', color: '#fff', fontWeight: 700 }}>전문가</span>
                  )}
                  <div style={{ marginLeft: 'auto', fontSize: 11, color: 'var(--c-text-tertiary)' }}>{r.lastAt}</div>
                </div>
                <div style={{ fontSize: 11, color: 'var(--c-primary)', fontWeight: 600, marginBottom: 3 }}>{r.context}</div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                  <div style={{
                    flex: 1, fontSize: 12.5,
                    color: r.unread > 0 ? 'var(--c-text-primary)' : 'var(--c-text-sub)',
                    fontWeight: r.unread > 0 ? 600 : 400,
                    whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
                  }}>{r.lastMessage}</div>
                  {r.unread > 0 && (
                    <span style={{
                      minWidth: 18, height: 18, padding: '0 6px',
                      borderRadius: 9, background: 'var(--c-danger)', color: '#fff',
                      fontSize: 10.5, fontWeight: 800,
                      display: 'grid', placeItems: 'center', flexShrink: 0,
                    }}>{r.unread}</span>
                  )}
                </div>
              </div>
            </div>
          </Card>
        ))}
      </div>
    </div>
  );
}

// ═══════════════════════ CHAT ROOM ═══════════════════════

function ChatRoomScreen({ onBack, roomId, t }) {
  const room = D.chatRooms.find((r) => r.id === roomId) || D.chatRooms[0];
  const seedMessages = (D.chatMessages && D.chatMessages[room.id]) || [];
  const [messages, setMessages] = useState(seedMessages);
  const [input, setInput] = useState('');

  const send = () => {
    const t = input.trim();
    if (!t) return;
    setMessages((m) => [...m, { id: Date.now(), from: 'me', body: t, at: '방금' }]);
    setInput('');
  };

  return (
    <div style={{ background: 'var(--c-bg-secondary)', minHeight: '100%', display: 'flex', flexDirection: 'column' }}>
      {/* Header */}
      <div style={{
        padding: '12px 14px', borderBottom: '1px solid var(--c-border-soft)',
        display: 'flex', alignItems: 'center', gap: 10, background: 'var(--c-bg-primary)',
        position: 'sticky', top: 0, zIndex: 10,
      }}>
        <button onClick={onBack} style={{ width: 36, height: 36, borderRadius: 18, border: 0, background: 'transparent', cursor: 'pointer', fontSize: 18 }}>‹</button>
        <div style={{ position: 'relative', flexShrink: 0 }}>
          <div style={{
            width: 36, height: 36, borderRadius: 18, background: room.peer.avatarBg,
            color: '#fff', display: 'grid', placeItems: 'center', fontSize: 14, fontWeight: 800,
          }}>{room.peer.avatar}</div>
        </div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontSize: 13.5, fontWeight: 700, color: 'var(--c-text-primary)' }}>{room.peer.name}</div>
          <div style={{ fontSize: 11, color: 'var(--c-primary)', fontWeight: 600 }}>{room.context}</div>
        </div>
        <button style={{ width: 36, height: 36, borderRadius: 18, border: 0, background: 'transparent', cursor: 'pointer', fontSize: 16 }}>⋯</button>
      </div>

      {/* Safety banner */}
      <div style={{ padding: '8px 14px', background: 'rgba(255,184,0,.08)', borderBottom: '1px solid rgba(255,184,0,.18)', fontSize: 11, color: '#A77A00', textAlign: 'center' }}>
        외부 결제·송금은 금지. 모든 거래는 돼지엄마 결제로!
      </div>

      {/* Messages */}
      <div style={{ flex: 1, padding: '14px', display: 'flex', flexDirection: 'column', gap: 4, overflowY: 'auto' }}>
        {messages.map((m, i) => {
          const prev = messages[i - 1];
          const sameAuthor = prev && prev.from === m.from;
          return m.from === 'me' ? (
            <div key={m.id} style={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'flex-end', gap: 5, marginTop: sameAuthor ? 2 : 6 }}>
              <span style={{ fontSize: 9.5, color: 'var(--c-text-tertiary)', marginBottom: 2 }}>{(m.at || '').split(' ').slice(-1)[0] || ''}</span>
              <div style={{
                maxWidth: '75%', padding: '8px 12px', borderRadius: 14,
                background: 'var(--c-primary)', color: '#fff', fontSize: 13.5, lineHeight: 1.5,
                whiteSpace: 'pre-wrap', wordBreak: 'break-word',
                borderBottomRightRadius: sameAuthor ? 14 : 4,
              }}>{m.body}</div>
            </div>
          ) : (
            <div key={m.id} style={{ display: 'flex', alignItems: 'flex-end', gap: 6, marginTop: sameAuthor ? 2 : 6 }}>
              {sameAuthor ? <div style={{ width: 26, flexShrink: 0 }} /> : (
                <div style={{
                  width: 26, height: 26, borderRadius: 13, background: room.peer.avatarBg,
                  color: '#fff', display: 'grid', placeItems: 'center', fontSize: 11, fontWeight: 800, flexShrink: 0,
                }}>{room.peer.avatar}</div>
              )}
              <div style={{
                maxWidth: '75%', padding: '8px 12px', borderRadius: 14,
                background: 'var(--c-bg-primary)', color: 'var(--c-text-primary)',
                fontSize: 13.5, lineHeight: 1.5, whiteSpace: 'pre-wrap', wordBreak: 'break-word',
                borderBottomLeftRadius: sameAuthor ? 14 : 4,
                boxShadow: '0 1px 2px rgba(0,0,0,.04)',
              }}>{m.body}</div>
              <span style={{ fontSize: 9.5, color: 'var(--c-text-tertiary)', marginBottom: 2 }}>{(m.at || '').split(' ').slice(-1)[0] || ''}</span>
            </div>
          );
        })}
      </div>

      {/* Composer */}
      <div style={{
        padding: '8px 12px', borderTop: '1px solid var(--c-border-soft)',
        background: 'var(--c-bg-primary)', display: 'flex', gap: 8, alignItems: 'flex-end',
      }}>
        <button style={{ width: 36, height: 36, borderRadius: 18, border: 0, background: 'var(--c-bg-secondary)', cursor: 'pointer', fontSize: 16, flexShrink: 0 }}><Icon name="clip" size={16} /></button>
        <input
          value={input}
          onChange={(e) => setInput(e.target.value)}
          onKeyDown={(e) => { if (e.key === 'Enter') { e.preventDefault(); send(); } }}
          placeholder="메시지 입력"
          style={{
            flex: 1, height: 36, padding: '0 14px', borderRadius: 18,
            border: 0, background: 'var(--c-bg-secondary)', fontSize: 13.5,
            outline: 'none', fontFamily: 'inherit',
          }}
        />
        <button
          onClick={send}
          disabled={!input.trim()}
          style={{
            width: 36, height: 36, borderRadius: 18, border: 0,
            background: input.trim() ? 'var(--c-primary)' : 'var(--c-border)',
            color: '#fff', cursor: input.trim() ? 'pointer' : 'default',
            fontSize: 14, flexShrink: 0,
          }}
        >↑</button>
      </div>
    </div>
  );
}

Object.assign(window, { MentorListScreen, MentorDetailScreen, MentorOnboardingScreen, ChatListScreen, ChatRoomScreen });
