// 돼지엄마 — Review write wizard, Review detail, Consultant list

// ───────── REVIEW WRITE (3-step) ─────────
function ReviewWriteScreen({ onBack, onDone, t }) {
  const [step, setStep] = useState(1);
  const [picked, setPicked] = useState(null);
  const [rating, setRating] = useState(0);
  const [details, setDetails] = useState({ price: 0, counsel: 0, accuracy: 0, result: 0 });
  const [body, setBody] = useState('');
  const [paid, setPaid] = useState('');
  const [service, setService] = useState('');
  const [year, setYear] = useState('2025');
  const [files, setFiles] = useState([]);
  const [agreed, setAgreed] = useState(false);
  const [completed, setCompleted] = useState(false);

  const minBody = 200;

  if (completed) {
    return (
      <div style={{ background: 'var(--c-bg-primary)', minHeight: '100%', display: 'flex', flexDirection: 'column' }}>
        <TopBar showBack onBack={onBack} title="평가 등록 완료" showSearch={false} showBell={false} />
        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', padding: 24, textAlign: 'center' }}>
          <div style={{ width: 88, height: 88, borderRadius: 44, background: 'rgba(0,184,82,.12)', display: 'grid', placeItems: 'center', marginBottom: 20 }}>
            <Icon name="check" size={44} stroke={2.4} color="var(--c-success)" />
          </div>
          <div style={{ fontSize: 22, fontWeight: 800, color: 'var(--c-text-primary)', marginBottom: 10, letterSpacing: '-0.02em' }}>평가 등록 완료</div>
          <div style={{ fontSize: 15, lineHeight: 1.6, color: 'var(--c-text-sub)', maxWidth: 280, textWrap: 'pretty' }}>
            작성하신 평가가 바로 게시되었어요.<br />신고 접수 시 검토 후 숨김 처리될 수 있어요.
          </div>
          <div style={{ marginTop: 32, width: '100%', maxWidth: 320 }}>
            <Button kind="primary" full onClick={onDone}>확인</Button>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div style={{ background: 'var(--c-bg-primary)', minHeight: '100%', display: 'flex', flexDirection: 'column' }}>
      <TopBar showBack onBack={() => step === 1 ? onBack() : setStep(step - 1)} title="평가 작성" showSearch={false} showBell={false} />

      {/* Progress */}
      <div style={{ padding: '16px 16px 0' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 8 }}>
          {[1, 2, 3].map((n) => (
            <div key={n} style={{
              flex: 1, height: 4, borderRadius: 2,
              background: n <= step ? 'var(--c-primary)' : 'var(--c-border)',
              transition: 'background .25s',
            }} />
          ))}
        </div>
        <div style={{ fontSize: 12.5, color: 'var(--c-text-sub)', fontWeight: 500 }}>
          Step {step} / 3 · {['기관 선택', '평가 내용', '인증 자료'][step - 1]}
        </div>
      </div>

      <div style={{ flex: 1, padding: 16, paddingBottom: 100, overflow: 'auto' }}>
        {step === 1 && <Step1 picked={picked} setPicked={setPicked} />}
        {step === 2 && (
          <Step2
            rating={rating} setRating={setRating}
            details={details} setDetails={setDetails}
            body={body} setBody={setBody} minBody={minBody}
            paid={paid} setPaid={setPaid}
            service={service} setService={setService}
            year={year} setYear={setYear}
          />
        )}
        {step === 3 && (
          <Step3 files={files} setFiles={setFiles} agreed={agreed} setAgreed={setAgreed} />
        )}
      </div>

      {/* Bottom CTA */}
      <div style={{ padding: '12px 16px', borderTop: '1px solid var(--c-border)', background: 'var(--c-bg-primary)', position: 'sticky', bottom: 0 }}>
        {step === 1 && <Button kind="primary" full disabled={!picked} onClick={() => setStep(2)}>다음</Button>}
        {step === 2 && (
          <Button kind="primary" full
            disabled={!rating || body.length < minBody || !paid || !service}
            onClick={() => setStep(3)}>다음</Button>
        )}
        {step === 3 && (
          <Button kind="primary" full disabled={!files.length || !agreed} onClick={() => setCompleted(true)}>평가 등록 신청</Button>
        )}
      </div>
    </div>
  );
}

function Step1({ picked, setPicked }) {
  const [q, setQ] = useState('');
  const [cat, setCat] = useState('all');
  const [region, setRegion] = useState('all');
  const recent = ['강남○○유학원', '대치○○수학학원', '서초○○어학원'];

  // Filter logic: category + region + query (substring)
  const filtered = D.reviewSearch.filter((r) => {
    if (cat !== 'all' && r.cat !== cat) return false;
    if (region !== 'all' && r.region !== region) return false;
    if (q && !r.name.toLowerCase().includes(q.toLowerCase()) && !r.loc.toLowerCase().includes(q.toLowerCase())) return false;
    return true;
  });

  return (
    <div>
      {/* Search input */}
      <div style={{ position: 'relative', marginBottom: 14 }}>
        <input value={q} onChange={(e) => setQ(e.target.value)} placeholder="기관명을 검색해주세요"
          style={{ width: '100%', height: 48, padding: '0 14px 0 42px', borderRadius: 10, border: '1px solid var(--c-border)', background: 'var(--c-bg-secondary)', fontSize: 15, outline: 'none', color: 'var(--c-text-primary)' }} />
        <span style={{ position: 'absolute', left: 14, top: '50%', transform: 'translateY(-50%)', color: 'var(--c-text-tertiary)' }}>
          <Icon name="search" size={18} />
        </span>
      </div>

      {/* Category filter */}
      <div style={{ marginBottom: 12 }}>
        <div style={{ fontSize: 12.5, fontWeight: 700, color: 'var(--c-text-sub)', marginBottom: 6 }}>카테고리</div>
        <div style={{ display: 'flex', gap: 6, overflowX: 'auto', paddingBottom: 4, scrollbarWidth: 'none' }}>
          {(D.reviewCategories || []).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>

      {/* Region filter (학원가) */}
      <div style={{ marginBottom: 16 }}>
        <div style={{ fontSize: 12.5, fontWeight: 700, color: 'var(--c-text-sub)', marginBottom: 6 }}>학원가·지역</div>
        <div style={{ display: 'flex', gap: 6, overflowX: 'auto', paddingBottom: 4, scrollbarWidth: 'none' }}>
          {(D.reviewRegions || []).map((r) => {
            const on = region === r.id;
            return (
              <button key={r.id} onClick={() => setRegion(r.id)} style={{
                padding: '6px 12px', borderRadius: 16, fontSize: 12.5, fontWeight: 600, cursor: 'pointer',
                border: '1px solid ' + (on ? 'var(--c-verified)' : 'var(--c-border)'),
                background: on ? 'rgba(0,200,150,.10)' : 'var(--c-bg-primary)',
                color: on ? 'var(--c-verified)' : 'var(--c-text-sub)', whiteSpace: 'nowrap',
              }}>{r.label}</button>
            );
          })}
        </div>
      </div>

      {/* Recent search */}
      {!q && (
        <div style={{ marginBottom: 16 }}>
          <div style={{ fontSize: 12.5, fontWeight: 700, color: 'var(--c-text-sub)', marginBottom: 8 }}>최근 검색</div>
          <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
            {recent.map((r) => (
              <button key={r} onClick={() => setQ(r)} style={{
                padding: '6px 12px', borderRadius: 16, fontSize: 13, border: '1px solid var(--c-border)',
                background: 'var(--c-bg-primary)', color: 'var(--c-text-sub)', cursor: 'pointer', fontWeight: 500,
              }}>{r}</button>
            ))}
          </div>
        </div>
      )}

      {/* Results */}
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 8 }}>
        <div style={{ fontSize: 12.5, fontWeight: 700, color: 'var(--c-text-sub)' }}>
          검색 결과 <b style={{ color: 'var(--c-text-primary)', fontVariantNumeric: 'tabular-nums' }}>{filtered.length}</b>건
        </div>
        {(cat !== 'all' || region !== 'all') && (
          <button onClick={() => { setCat('all'); setRegion('all'); }} style={{
            border: 0, background: 'transparent', cursor: 'pointer', fontSize: 12, color: 'var(--c-primary)', fontWeight: 600,
          }}>필터 초기화</button>
        )}
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
        {filtered.length === 0 && (
          <div style={{ padding: '40px 20px', textAlign: 'center', fontSize: 13, color: 'var(--c-text-tertiary)' }}>
            <div style={{ fontSize: 32, marginBottom: 8 }}></div>
            검색 조건에 맞는 기관이 없어요
          </div>
        )}
        {filtered.map((r) => {
          const on = picked === r.id;
          return (
            <div key={r.id} onClick={() => setPicked(r.id)} style={{
              padding: 14, borderRadius: 10, border: `2px solid ${on ? 'var(--c-primary)' : 'var(--c-border)'}`,
              background: on ? 'rgba(44,91,255,.04)' : 'var(--c-bg-primary)', cursor: 'pointer',
              display: 'flex', alignItems: 'center', gap: 12,
            }}>
              <div style={{ width: 44, height: 44, borderRadius: 8, background: 'var(--c-bg-secondary)', display: 'grid', placeItems: 'center', fontSize: 20 }}><Icon name="building" size={20} /></div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 14.5, fontWeight: 700, color: 'var(--c-text-primary)', marginBottom: 2 }}>{r.name}</div>
                <div style={{ fontSize: 12, color: 'var(--c-text-sub)' }}>
                  <span style={{ fontWeight: 600 }}>{r.catLabel || r.cat}</span> · {r.loc} · ★ {r.rating} ({r.count})
                </div>
                {r.priceRange && (
                  <div style={{ fontSize: 11.5, color: 'var(--c-text-tertiary)', marginTop: 2, fontVariantNumeric: 'tabular-nums' }}>
                    {r.priceRange}
                  </div>
                )}
              </div>
              {on && <Icon name="check" size={20} color="var(--c-primary)" stroke={2.6} />}
            </div>
          );
        })}
      </div>
      <div style={{ marginTop: 20, padding: 14, background: 'var(--c-bg-secondary)', borderRadius: 10, fontSize: 13, color: 'var(--c-text-sub)', textAlign: 'center' }}>
        내 기관이 없나요? <span style={{ color: 'var(--c-primary)', fontWeight: 600, textDecoration: 'underline', cursor: 'pointer' }}>기관 등록 요청</span>
      </div>
    </div>
  );
}

function Step2({ rating, setRating, details, setDetails, body, setBody, minBody, paid, setPaid, service, setService, year, setYear }) {
  const labels = { price: '가격 만족도', counsel: '상담 품질', accuracy: '정보 정확성', result: '결과 만족도' };
  const services = ['미국 학부 패키지', '에세이 첨삭', '입시 컨설팅', 'IB·AP 학습', '기타'];
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 22 }}>
      {/* Overall */}
      <div>
        <div style={{ fontSize: 14, fontWeight: 700, color: 'var(--c-text-primary)', marginBottom: 10 }}>전체 만족도</div>
        <div style={{ display: 'flex', gap: 6, justifyContent: 'center', padding: '10px 0' }}>
          {[1, 2, 3, 4, 5].map((n) => (
            <button key={n} onClick={() => setRating(n)} style={{
              border: 0, background: 'transparent', cursor: 'pointer',
              fontSize: 36, color: n <= rating ? '#FFB700' : 'var(--c-border)', padding: 4,
              transition: 'transform .1s', transform: n <= rating ? 'scale(1.05)' : 'scale(1)',
            }}>★</button>
          ))}
        </div>
      </div>

      {/* Details */}
      <div>
        <div style={{ fontSize: 14, fontWeight: 700, color: 'var(--c-text-primary)', marginBottom: 12 }}>세부 평가</div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
          {Object.entries(labels).map(([k, l]) => (
            <div key={k} style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
              <div style={{ flex: 1, fontSize: 13.5, color: 'var(--c-text-sub)' }}>{l}</div>
              <div style={{ display: 'flex', gap: 2 }}>
                {[1, 2, 3, 4, 5].map((n) => (
                  <button key={n} onClick={() => setDetails({ ...details, [k]: n })} style={{
                    border: 0, background: 'transparent', cursor: 'pointer',
                    fontSize: 18, color: n <= details[k] ? '#FFB700' : 'var(--c-border)', padding: 2,
                  }}>★</button>
                ))}
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* Service & year */}
      <div>
        <div style={{ fontSize: 14, fontWeight: 700, color: 'var(--c-text-primary)', marginBottom: 10 }}>이용 서비스</div>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
          {services.map((s) => (
            <button key={s} onClick={() => setService(s)} style={{
              padding: '8px 14px', borderRadius: 18, fontSize: 13, fontWeight: 600,
              border: '1px solid ' + (service === s ? 'var(--c-primary)' : 'var(--c-border)'),
              background: service === s ? 'rgba(44,91,255,.08)' : 'var(--c-bg-primary)',
              color: service === s ? 'var(--c-primary)' : 'var(--c-text-sub)', cursor: 'pointer',
            }}>{s}</button>
          ))}
        </div>
      </div>

      <div style={{ display: 'flex', gap: 10 }}>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 14, fontWeight: 700, color: 'var(--c-text-primary)', marginBottom: 8 }}>이용 연도</div>
          <select value={year} onChange={(e) => setYear(e.target.value)} style={{ width: '100%', height: 48, padding: '0 14px', borderRadius: 8, border: '1px solid var(--c-border)', fontSize: 15, color: 'var(--c-text-primary)', background: 'var(--c-bg-primary)' }}>
            {['2026', '2025', '2024', '2023'].map((y) => <option key={y}>{y}</option>)}
          </select>
        </div>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 14, fontWeight: 700, color: 'var(--c-text-primary)', marginBottom: 8 }}>결제 가격 (만원)</div>
          <input type="number" value={paid} onChange={(e) => setPaid(e.target.value)} placeholder="850" style={{ width: '100%', height: 48, padding: '0 14px', borderRadius: 8, border: '1px solid var(--c-border)', fontSize: 15, color: 'var(--c-text-primary)', background: 'var(--c-bg-primary)', outline: 'none' }} />
        </div>
      </div>

      {/* Body */}
      <div>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 10 }}>
          <div style={{ fontSize: 14, fontWeight: 700, color: 'var(--c-text-primary)' }}>상세 평가</div>
          <div style={{ fontSize: 12, color: body.length < minBody ? 'var(--c-text-tertiary)' : 'var(--c-success)', fontWeight: 600, fontVariantNumeric: 'tabular-nums' }}>
            {body.length} / {minBody}자 이상
          </div>
        </div>
        <textarea value={body} onChange={(e) => setBody(e.target.value)}
          placeholder={`솔직한 후기를 남겨주세요.\n\n· 어떤 서비스를 받으셨나요?\n· 가격 대비 만족도는 어땠나요?\n· 다른 학부모님께 추천하시겠어요?`}
          style={{ width: '100%', minHeight: 160, padding: 14, borderRadius: 10, border: '1px solid var(--c-border)', fontSize: 14.5, lineHeight: 1.6, resize: 'none', outline: 'none', color: 'var(--c-text-primary)', fontFamily: 'inherit', background: 'var(--c-bg-primary)' }} />
      </div>
    </div>
  );
}

function Step3({ files, setFiles, agreed, setAgreed }) {
  const fakeFiles = ['결제내역_2025.pdf', '계약서_스캔.jpg'];
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
      {/* Safety notice — strong */}
      <div style={{
        padding: 16, borderRadius: 12,
        background: 'linear-gradient(135deg, rgba(44,91,255,.06), rgba(0,200,150,.06))',
        border: '1px solid rgba(44,91,255,.20)',
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
          <Icon name="shield" size={20} color="var(--c-primary)" stroke={2.2} />
          <div style={{ fontSize: 14, fontWeight: 800, color: 'var(--c-primary)', letterSpacing: '-0.01em' }}>당신의 정보는 안전합니다</div>
        </div>
        <div style={{ fontSize: 13, lineHeight: 1.65, color: 'var(--c-text-primary)', textWrap: 'pretty' }}>
          이 자료는 <b>돼지엄마 검수팀(2명)만 열람</b>하며, 검증 완료 후 <b>7일 내 자동 파기</b>됩니다.
          평가 본문에는 절대 노출되지 않으며, 학부모님의 익명성은 끝까지 보호됩니다.
        </div>
        <div style={{ display: 'flex', gap: 10, marginTop: 12, fontSize: 12, color: 'var(--c-text-sub)' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}><Icon name="lock" size={14} /> 암호화 저장</div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}><Icon name="eye" size={14} /> 검수팀 2명만</div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}><Icon name="trash" size={14} /> 7일 자동 파기</div>
        </div>
      </div>

      {/* Upload */}
      <div>
        <div style={{ fontSize: 14, fontWeight: 700, color: 'var(--c-text-primary)', marginBottom: 10 }}>인증 자료 업로드</div>
        <button onClick={() => setFiles(fakeFiles)} style={{
          width: '100%', minHeight: 120, 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: 14, fontWeight: 600, color: 'var(--c-text-primary)' }}>결제 내역서 또는 계약서</div>
          <div style={{ fontSize: 12, color: 'var(--c-text-tertiary)' }}>JPG, PNG, PDF · 최대 10MB</div>
        </button>

        {files.length > 0 && (
          <div style={{ marginTop: 10, display: 'flex', flexDirection: 'column', gap: 6 }}>
            {files.map((f, i) => (
              <div key={f} style={{
                padding: '10px 12px', background: 'var(--c-bg-secondary)', borderRadius: 8,
                display: 'flex', alignItems: 'center', gap: 10,
              }}>
                <div style={{ width: 32, height: 32, borderRadius: 6, background: 'var(--c-primary)', display: 'grid', placeItems: 'center', color: '#fff', fontSize: 11, fontWeight: 700 }}>
                  {f.endsWith('.pdf') ? 'PDF' : 'IMG'}
                </div>
                <div style={{ flex: 1, fontSize: 13.5, color: 'var(--c-text-primary)', fontWeight: 500 }}>{f}</div>
                <button onClick={() => setFiles(files.filter((_, j) => j !== i))} style={{ border: 0, background: 'transparent', cursor: 'pointer', color: 'var(--c-text-tertiary)' }}>
                  <Icon name="close" size={18} />
                </button>
              </div>
            ))}
          </div>
        )}
      </div>

      {/* Consent */}
      <button onClick={() => setAgreed(!agreed)} style={{
        padding: 14, borderRadius: 10,
        background: agreed ? 'rgba(44,91,255,.04)' : 'var(--c-bg-secondary)',
        border: `1px solid ${agreed ? 'var(--c-primary)' : 'var(--c-border)'}`,
        cursor: 'pointer', display: 'flex', alignItems: 'flex-start', gap: 10, textAlign: 'left',
      }}>
        <div style={{
          width: 22, height: 22, borderRadius: 5, flexShrink: 0,
          background: agreed ? 'var(--c-primary)' : 'transparent',
          border: `2px solid ${agreed ? 'var(--c-primary)' : 'var(--c-border)'}`,
          display: 'grid', placeItems: 'center',
        }}>
          {agreed && <Icon name="check" size={14} color="#fff" stroke={3} />}
        </div>
        <div style={{ flex: 1, fontSize: 13.5, lineHeight: 1.5, color: 'var(--c-text-primary)', fontWeight: 500, textWrap: 'pretty' }}>
          본인이 실제로 이용한 평가이며, 허위 내용이 없음을 확인합니다. 허위 평가는 영구 정지될 수 있습니다.
        </div>
      </button>
    </div>
  );
}

// ───────── REVIEW DETAIL ─────────
function ReviewDetailScreen({ onBack, onWrite, onCompare, t }) {
  const r = D.reviewDetail;
  return (
    <div style={{ background: 'var(--c-bg-secondary)', minHeight: '100%' }}>
      <TopBar showBack onBack={onBack} title="기관 평가" showSearch={false} showBell={false} />

      {/* Header */}
      <div style={{ background: 'var(--c-bg-primary)', padding: 20 }}>
        <div style={{ fontSize: 11, fontWeight: 600, color: 'var(--c-primary)', letterSpacing: '0.04em', marginBottom: 4 }}>{r.cat.toUpperCase()}</div>
        <div style={{ fontSize: 22, fontWeight: 800, color: 'var(--c-text-primary)', marginBottom: 4, letterSpacing: '-0.025em' }}>{r.name}</div>
        <div style={{ fontSize: 13, color: 'var(--c-text-sub)', marginBottom: 14 }}>{r.loc}</div>

        <div style={{ display: 'flex', alignItems: 'flex-end', gap: 16 }}>
          <div>
            <div style={{ fontSize: 36, fontWeight: 800, color: 'var(--c-text-primary)', lineHeight: 1, fontVariantNumeric: 'tabular-nums', letterSpacing: '-0.03em' }}>{r.rating}</div>
            <div style={{ display: 'flex', gap: 1, marginTop: 4 }}>
              {[1, 2, 3, 4, 5].map((n) => (
                <span key={n} style={{ color: n <= Math.round(r.rating) ? '#FFB700' : 'var(--c-border)', fontSize: 14 }}>★</span>
              ))}
            </div>
            <div style={{ fontSize: 12, color: 'var(--c-text-sub)', marginTop: 4 }}>평가 {r.count}개</div>
          </div>
          <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 5 }}>
            {Object.entries(r.breakdown).map(([k, v]) => {
              const labels = { price: '가격', counsel: '상담', accuracy: '정확성', result: '결과' };
              return (
                <div key={k} style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 11.5 }}>
                  <div style={{ width: 36, color: 'var(--c-text-sub)' }}>{labels[k]}</div>
                  <div style={{ flex: 1, height: 6, borderRadius: 3, background: 'var(--c-border)', overflow: 'hidden' }}>
                    <div style={{ width: `${v / 5 * 100}%`, height: '100%', background: 'var(--c-primary)' }} />
                  </div>
                  <div style={{ width: 26, textAlign: 'right', fontWeight: 700, color: 'var(--c-text-primary)', fontVariantNumeric: 'tabular-nums' }}>{v}</div>
                </div>
              );
            })}
          </div>
        </div>
      </div>

      {/* Price stats */}
      {r.priceStats && (
        <div style={{ padding: '12px 16px 0', background: 'var(--c-bg-primary)' }}>
          <Card padding={14}>
            <div style={{ fontSize: 12.5, fontWeight: 700, color: 'var(--c-text-sub)', marginBottom: 8, letterSpacing: '-0.01em' }}>결제 가격 통계 (최근 6개월, n={r.priceStats.sampleSize})</div>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, marginBottom: 6 }}>
              <span style={{ fontSize: 24, fontWeight: 800, color: 'var(--c-text-primary)', fontVariantNumeric: 'tabular-nums', letterSpacing: '-0.02em' }}>{r.priceStats.median}만원</span>
              <span style={{ fontSize: 12, color: 'var(--c-text-sub)' }}>중앙값</span>
            </div>
            <div style={{ position: 'relative', height: 6, borderRadius: 3, background: 'var(--c-border)', overflow: 'hidden' }}>
              <div style={{
                position: 'absolute', left: '15%', right: '15%', top: 0, bottom: 0,
                background: 'var(--c-primary-100)', borderLeft: '2px solid var(--c-primary)', borderRight: '2px solid var(--c-primary)',
              }} />
              <div style={{
                position: 'absolute', left: 'calc(50% - 1px)', top: -3, bottom: -3, width: 2, background: 'var(--c-primary)',
              }} />
            </div>
            <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 6, fontSize: 11, color: 'var(--c-text-tertiary)', fontVariantNumeric: 'tabular-nums' }}>
              <span>{r.priceStats.p25}만</span>
              <span>{r.priceStats.p75}만</span>
            </div>
          </Card>
        </div>
      )}

      {/* AI Summary */}
      {r.aiSummary && (
        <div style={{ padding: '12px 16px 0', background: 'var(--c-bg-primary)' }}>
          <Card padding={16} style={{ background: 'linear-gradient(135deg, rgba(44,91,255,.04), rgba(0,200,150,.03))', border: '1px solid rgba(44,91,255,.12)' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 12 }}>
              <div style={{ width: 28, height: 28, borderRadius: 8, background: 'linear-gradient(135deg, var(--c-primary), var(--c-verified))', display: 'grid', placeItems: 'center' }}>
                <Icon name="sparkle" size={15} color="#fff" stroke={2.4} />
              </div>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 14, fontWeight: 800, color: 'var(--c-text-primary)', letterSpacing: '-0.01em' }}>AI 후기 요약</div>
                <div style={{ fontSize: 11, color: 'var(--c-text-tertiary)' }}>학부모 평가 {r.aiSummary.sample}건 기반 · 매주 갱신</div>
              </div>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
              <SummaryBlock title="장점" color="var(--c-success)" items={r.aiSummary.pros} />
              <SummaryBlock title="단점" color="var(--c-danger)" items={r.aiSummary.cons} />
              <SummaryBlock title="추천 대상" color="var(--c-primary)" items={r.aiSummary.recommendedFor} />
            </div>
          </Card>
        </div>
      )}

      {/* Business response */}
      {r.businessResponse && (
        <div style={{ padding: '12px 16px 0', background: 'var(--c-bg-primary)' }}>
          <Card padding={14} style={{ borderLeft: '3px solid var(--c-primary)' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 8 }}>
              <Icon name="shield" size={14} color="var(--c-primary)" stroke={2.4} />
              <div style={{ fontSize: 12.5, fontWeight: 700, color: 'var(--c-primary)', letterSpacing: '-0.01em' }}>사업자 공식 답변</div>
              <span style={{ marginLeft: 'auto', fontSize: 11, color: 'var(--c-text-tertiary)' }}>{r.businessResponse.respondedAt}</span>
            </div>
            <div style={{ fontSize: 13.5, lineHeight: 1.6, color: 'var(--c-text-primary)', marginBottom: 8, textWrap: 'pretty' }}>
              {r.businessResponse.body}
            </div>
            <div style={{ fontSize: 11.5, color: 'var(--c-text-sub)', fontWeight: 600 }}>— {r.businessResponse.responderName}</div>
          </Card>
        </div>
      )}

      {/* CTA + Compare */}
      <div style={{ padding: '12px 16px', background: 'var(--c-bg-primary)', display: 'flex', gap: 8 }}>
        <Button kind="primary" size="md" onClick={onWrite} leading={<Icon name="plus" size={18} stroke={2.4} />} style={{ flex: 1 }}>평가 남기기</Button>
        <Button kind="secondary" size="md" onClick={onCompare} leading={<Icon name="filter" size={16} stroke={2.4} />}>경쟁 기관과 비교</Button>
      </div>

      {/* Reviews */}
      <div style={{ padding: '16px 16px 100px', display: 'flex', flexDirection: 'column', gap: 10 }}>
        <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--c-text-primary)', padding: '0 4px' }}>실제 학부모 평가 {r.reviews.length}개 (검증 완료)</div>
        {r.reviews.map((rv) => (
          <Card key={rv.id} padding={16}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
              <div style={{ display: 'flex', gap: 1 }}>
                {[1, 2, 3, 4, 5].map((n) => (
                  <span key={n} style={{ color: n <= rv.rating ? '#FFB700' : 'var(--c-border)', fontSize: 15 }}>★</span>
                ))}
              </div>
              <span style={{ fontSize: 11, padding: '2px 6px', background: 'rgba(0,200,150,.12)', color: 'var(--c-verified)', borderRadius: 4, fontWeight: 700 }}>인증 완료</span>
            </div>
            <div style={{ fontSize: 15, fontWeight: 700, color: 'var(--c-text-primary)', marginBottom: 6, letterSpacing: '-0.02em' }}>{rv.title}</div>
            <div style={{ fontSize: 14, lineHeight: 1.6, color: 'var(--c-text-primary)', marginBottom: 12, textWrap: 'pretty' }}>{rv.body}</div>
            <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap', marginBottom: 10 }}>
              <span style={{ fontSize: 11, padding: '3px 8px', background: 'var(--c-bg-secondary)', borderRadius: 4, color: 'var(--c-text-sub)', fontWeight: 500 }}>{rv.usedYear} 이용</span>
              <span style={{ fontSize: 11, padding: '3px 8px', background: 'var(--c-bg-secondary)', borderRadius: 4, color: 'var(--c-text-sub)', fontWeight: 500 }}>{rv.usedService}</span>
              <span style={{ fontSize: 11, padding: '3px 8px', background: 'var(--c-bg-secondary)', borderRadius: 4, color: 'var(--c-text-sub)', fontWeight: 500 }}>결제 {rv.paid}만원</span>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', paddingTop: 10, borderTop: '1px solid var(--c-border-soft)' }}>
              <AuthorLine author={rv.author} verified={rv.verified} senior={rv.senior} meta={rv.meta} badgeEmphasis={t.badgeEmphasis} />
              <div style={{ fontSize: 12, color: 'var(--c-text-sub)', fontWeight: 500 }}>도움돼요 {rv.helpful}</div>
            </div>
          </Card>
        ))}
      </div>
    </div>
  );
}

function SummaryBlock({ title, emoji, color, items }) {
  return (
    <div>
      <div style={{ fontSize: 12.5, fontWeight: 800, color, marginBottom: 6, letterSpacing: '-0.01em', display: 'flex', alignItems: 'center', gap: 4 }}>
        {emoji && <span>{emoji}</span>}<span>{title}</span>
      </div>
      <ul style={{ margin: 0, padding: 0, listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 4 }}>
        {items.map((it, i) => (
          <li key={i} style={{ fontSize: 13.5, lineHeight: 1.55, color: 'var(--c-text-primary)', display: 'flex', gap: 8, paddingLeft: 4, textWrap: 'pretty' }}>
            <span style={{ color, fontWeight: 700, flexShrink: 0 }}>·</span>
            <span style={{ flex: 1 }}>{it}</span>
          </li>
        ))}
      </ul>
    </div>
  );
}

Object.assign(window, { ReviewWriteScreen, ReviewDetailScreen });