// Owner announcements page + store profile + mobile owner view
function OwnerAnnounce() {
  const [active, setActive] = useState('A1');
  return (
    <div className="wu" style={{ height: '100%', background: 'var(--wu-bg)', display: 'flex' }}>
      {/* Left composer */}
      <div style={{ flex: 1, padding: 28, display: 'flex', flexDirection: 'column', overflow: 'auto' }} className="wu-scroll">
        <div className="mono" style={{ fontSize: 10, color: 'var(--wu-mute)' }}>PARTNER / ANNOUNCEMENTS</div>
        <div className="display" style={{ fontSize: 32, marginTop: 4 }}>공지 · 공급가 발표</div>
        <div className="kr" style={{ fontSize: 13, color: 'var(--wu-mute)', marginTop: 6, maxWidth: 480 }}>본사가 보낸 공지를 열람하거나, 내 매장 고객을 위한 공지를 작성하세요.</div>

        <div style={{ display: 'flex', gap: 6, marginTop: 20 }}>
          {['본사 → 점주', '점주 → 고객', '아카이브'].map((t, i) => (
            <button key={t} className="kr" style={{ padding: '10px 18px', fontSize: 12, fontWeight: 700, background: i === 0 ? 'var(--wu-ink)' : 'transparent', color: i === 0 ? 'var(--wu-paper)' : 'var(--wu-ink)', border: '1px solid var(--wu-ink)' }}>{t}</button>
          ))}
        </div>

        <div style={{ marginTop: 18, display: 'grid', gap: 10 }}>
          {WU_DATA.announcements.map(a => (
            <div key={a.id} onClick={() => setActive(a.id)} style={{ background: active === a.id ? 'var(--wu-ink)' : 'var(--wu-paper)', color: active === a.id ? 'var(--wu-paper)' : 'var(--wu-ink)', border: '1px solid ' + (active === a.id ? 'var(--wu-ink)' : 'var(--wu-line)'), padding: 16, cursor: 'pointer', display: 'flex', gap: 14, alignItems: 'flex-start' }}>
              <div style={{ width: 48, textAlign: 'center' }}>
                <div style={{ background: a.type === 'PRICE' ? 'var(--wu-lime)' : a.type === 'DROP' ? (active === a.id ? 'var(--wu-lime)' : 'var(--wu-ink)') : a.type === 'EVENT' ? 'var(--wu-orange)' : '#8B8680', color: a.type === 'DROP' && active !== a.id ? 'var(--wu-paper)' : a.type === 'EVENT' ? '#fff' : 'var(--wu-ink)', padding: '4px 0', fontSize: 9, fontFamily: 'JetBrains Mono', fontWeight: 700 }}>{a.type}</div>
                {a.pinned && <div className="mono" style={{ fontSize: 9, marginTop: 4, opacity: 0.7 }}>📌</div>}
              </div>
              <div style={{ flex: 1 }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
                  <div className="kr" style={{ fontSize: 14, fontWeight: 700 }}>{a.title}</div>
                  <div className="mono" style={{ fontSize: 10, opacity: 0.6 }}>{a.date}</div>
                </div>
                <div className="kr" style={{ fontSize: 12, opacity: 0.7, marginTop: 6, lineHeight: 1.5 }}>{a.body}</div>
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* Right preview panel */}
      <div style={{ width: 380, background: 'var(--wu-paper)', borderLeft: '1px solid var(--wu-line)', padding: 24, display: 'flex', flexDirection: 'column', flexShrink: 0 }}>
        <div className="mono" style={{ fontSize: 10, color: 'var(--wu-mute)' }}>DETAIL · WU-HQ → 성수점</div>
        <div className="display" style={{ fontSize: 22, marginTop: 4, lineHeight: 1.1 }}>겨울 자켓 전 품목<br/>공급가 <span style={{ color: 'var(--wu-orange)' }}>-12%</span></div>

        <div style={{ marginTop: 16, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 1, background: 'var(--wu-line)' }}>
          {[['적용일', '11.15 00:00'], ['종료일', '11.22 23:59'], ['최소발주', '20 pcs'], ['적용 SKU', '42 종']].map(([l, v]) => (
            <div key={l} style={{ background: 'var(--wu-paper)', padding: 10 }}>
              <div className="mono" style={{ fontSize: 9, color: 'var(--wu-mute)', letterSpacing: '0.08em' }}>{l.toUpperCase()}</div>
              <div className="mono" style={{ fontSize: 13, fontWeight: 700, marginTop: 4 }}>{v}</div>
            </div>
          ))}
        </div>

        <div style={{ marginTop: 18 }}>
          <div className="mono" style={{ fontSize: 10, color: 'var(--wu-mute)', letterSpacing: '0.08em' }}>BODY</div>
          <div className="kr" style={{ fontSize: 12, color: 'var(--wu-ink)', marginTop: 8, lineHeight: 1.6 }}>
            전국 가맹점에 알립니다. 재고 회전을 위해 FW 겨울 자켓 42종에 한해 공급가가 12% 인하됩니다. 기간 내 20pcs 이상 발주시 적용되며 혼합 발주도 가능합니다. 문의는 공급팀으로 부탁드립니다.
          </div>
        </div>

        <div style={{ marginTop: 18, padding: 12, background: 'var(--wu-bg)', border: '1px dashed var(--wu-line)' }}>
          <div className="mono" style={{ fontSize: 9, color: 'var(--wu-mute)' }}>ATTACHMENTS</div>
          {['공급가_개정_2026.pdf', '적용_SKU_42.xlsx'].map(f => (
            <div key={f} className="mono" style={{ fontSize: 11, marginTop: 8, display: 'flex', alignItems: 'center', gap: 8 }}>
              <div style={{ width: 20, height: 24, background: 'var(--wu-ink)', color: 'var(--wu-lime)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 8 }}>PDF</div>
              {f}
            </div>
          ))}
        </div>

        <div style={{ flex: 1 }} />
        <div style={{ display: 'flex', gap: 6, marginTop: 18 }}>
          <button className="wu-btn ghost" style={{ flex: 1, fontSize: 11 }}>읽음 처리</button>
          <button className="wu-btn lime" style={{ flex: 1, fontSize: 11 }}>바로 주문 →</button>
        </div>
      </div>
    </div>
  );
}

// ────────────────────────────────────────────────────
// OWNER STORE PROFILE editor
// ────────────────────────────────────────────────────
function OwnerStoreProfile() {
  return (
    <div className="wu wu-scroll" style={{ height: '100%', overflow: 'auto', background: 'var(--wu-bg)' }}>
      <div style={{ position: 'relative' }}>
        <WuPhoto label="매장 외관 · 커버 이미지" ratio="16/5" />
        <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,0.7) 100%)' }} />
        <div style={{ position: 'absolute', bottom: 20, left: 28, right: 28, color: 'var(--wu-paper)', display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between' }}>
          <div>
            <span className="wu-tag lime">FLAGSHIP · #001</span>
            <div className="display" style={{ fontSize: 44, marginTop: 8 }}>WORKUP SEONGSU.</div>
            <div className="kr" style={{ fontSize: 13, opacity: 0.8 }}>성수점 · 2021년 오픈 · 김민재 점장</div>
          </div>
          <button className="wu-btn lime" style={{ fontSize: 11, padding: '10px 16px' }}>↑ 사진 교체</button>
        </div>
      </div>

      <div style={{ padding: 28, display: 'grid', gridTemplateColumns: '2fr 1fr', gap: 20 }}>
        {/* Left column */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          <div style={{ background: 'var(--wu-paper)', border: '1px solid var(--wu-line)', padding: 20 }}>
            <div className="display" style={{ fontSize: 16, marginBottom: 14 }}>BASIC INFO · 기본 정보</div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
              {[
                ['매장명', '성수점'],
                ['대표자', '김민재'],
                ['연락처', '02-497-0120'],
                ['주소', '서울 성동구 성수이로 24'],
                ['영업시간', '11:00 – 22:00'],
                ['휴무일', '연중무휴'],
              ].map(([l, v]) => (
                <div key={l}>
                  <div className="mono" style={{ fontSize: 9, color: 'var(--wu-mute)', letterSpacing: '0.08em' }}>{l.toUpperCase()}</div>
                  <div className="kr" style={{ fontSize: 14, fontWeight: 600, marginTop: 6, paddingBottom: 8, borderBottom: '1px solid var(--wu-line)' }}>{v}</div>
                </div>
              ))}
            </div>
          </div>

          <div style={{ background: 'var(--wu-paper)', border: '1px solid var(--wu-line)', padding: 20 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 14 }}>
              <div className="display" style={{ fontSize: 16 }}>GALLERY · 매장 사진</div>
              <button className="wu-btn ghost" style={{ fontSize: 10, padding: '6px 10px' }}>+ 추가</button>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 8 }}>
              {['외관', '내부', '피팅룸', '카페'].map(l => <WuPhoto key={l} label={l} ratio="1/1" />)}
            </div>
          </div>

          <div style={{ background: 'var(--wu-paper)', border: '1px solid var(--wu-line)', padding: 20 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 14 }}>
              <div className="display" style={{ fontSize: 16 }}>STAFF · 직원 3명</div>
              <button className="wu-btn ghost" style={{ fontSize: 10, padding: '6px 10px' }}>+ 초대</button>
            </div>
            {[
              ['김민재', '점장', 'OWNER', true],
              ['이서진', '매니저', 'MGR', false],
              ['박현우', '스태프', 'STAFF', false],
            ].map(([n, r, b, o], i) => (
              <div key={n} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '10px 0', borderTop: i ? '1px solid var(--wu-line)' : 'none' }}>
                <div style={{ width: 36, height: 36, borderRadius: 999, background: o ? 'var(--wu-ink)' : 'var(--wu-bg)', color: o ? 'var(--wu-lime)' : 'var(--wu-ink)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'Archivo Black', fontSize: 13 }}>{n[0]}</div>
                <div style={{ flex: 1 }}>
                  <div className="kr" style={{ fontSize: 13, fontWeight: 700 }}>{n}</div>
                  <div className="kr mono" style={{ fontSize: 10, color: 'var(--wu-mute)', marginTop: 2 }}>{r}</div>
                </div>
                <span style={{ background: o ? 'var(--wu-lime)' : 'var(--wu-bg)', padding: '3px 7px', fontSize: 9, fontFamily: 'JetBrains Mono', fontWeight: 700 }}>{b}</span>
              </div>
            ))}
          </div>
        </div>

        {/* Right column */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          <div style={{ background: 'var(--wu-ink)', color: 'var(--wu-paper)', padding: 20 }}>
            <div className="mono" style={{ fontSize: 10, color: 'var(--wu-lime)' }}>● VISIBILITY</div>
            <div className="display" style={{ fontSize: 22, marginTop: 6, color: 'var(--wu-paper)' }}>PUBLIC</div>
            <div className="kr" style={{ fontSize: 12, opacity: 0.7, marginTop: 6, lineHeight: 1.5 }}>일반 고객이 매장 페이지를 볼 수 있어요.</div>
            <div style={{ display: 'flex', marginTop: 14, background: '#1A1A17', padding: 4, borderRadius: 999 }}>
              {['공개', '점검', '비공개'].map((l, i) => (
                <div key={l} style={{ flex: 1, padding: 8, textAlign: 'center', background: i === 0 ? 'var(--wu-lime)' : 'transparent', color: i === 0 ? 'var(--wu-ink)' : 'var(--wu-mute)', borderRadius: 999 }} className="kr">
                  <div style={{ fontSize: 11, fontWeight: 700 }}>{l}</div>
                </div>
              ))}
            </div>
          </div>

          <div style={{ background: 'var(--wu-paper)', border: '1px solid var(--wu-line)', padding: 20 }}>
            <div className="display" style={{ fontSize: 14 }}>MY PAGE STATS</div>
            <div className="mono" style={{ fontSize: 9, color: 'var(--wu-mute)' }}>지난 30일</div>
            <div style={{ marginTop: 14, display: 'flex', flexDirection: 'column', gap: 10 }}>
              {[['페이지 조회', '3,284', '+12%'], ['길찾기 클릭', '412', '+8%'], ['관심 등록', '198', '+3%']].map(([l, v, d]) => (
                <div key={l} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', paddingBottom: 10, borderBottom: '1px solid var(--wu-line)' }}>
                  <div className="kr" style={{ fontSize: 12 }}>{l}</div>
                  <div style={{ textAlign: 'right' }}>
                    <span className="display" style={{ fontSize: 16 }}>{v}</span>
                    <div className="mono" style={{ fontSize: 9, color: 'var(--wu-lime)' }}>● {d}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>

          <div style={{ background: 'var(--wu-lime)', padding: 18 }}>
            <div className="mono" style={{ fontSize: 10, color: 'var(--wu-ink)', fontWeight: 700 }}>CONSUMER PREVIEW</div>
            <div className="kr" style={{ fontSize: 13, fontWeight: 700, marginTop: 6 }}>고객이 보는 매장 페이지 미리보기</div>
            <button className="wu-btn" style={{ marginTop: 12, fontSize: 11, padding: '8px 12px', background: 'var(--wu-ink)', color: 'var(--wu-lime)' }}>👁  미리보기 열기 →</button>
          </div>
        </div>
      </div>
    </div>
  );
}

// ────────────────────────────────────────────────────
// OWNER MOBILE — quick check-in view
// ────────────────────────────────────────────────────
function OwnerMobile() {
  return (
    <div className="wu wu-scroll" style={{ height: '100%', background: 'var(--wu-ink)', color: 'var(--wu-paper)', overflow: 'auto', paddingBottom: 40 }}>
      <div style={{ padding: 'calc(env(safe-area-inset-top, 20px) + 12px) 16px 16px' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
          <div>
            <WuLogo size={20} color="var(--wu-paper)" />
            <div className="mono" style={{ fontSize: 9, color: 'var(--wu-lime)', marginTop: 10, letterSpacing: '0.1em' }}>● PARTNER · 성수점</div>
          </div>
          <button style={{ width: 36, height: 36, borderRadius: 999, background: '#1A1A17', color: 'var(--wu-lime)', display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'relative' }}>
            <svg width="14" height="14" viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="1.8"><path d="M4 8a6 6 0 0112 0v3l2 3H2l2-3V8z"/></svg>
            <span style={{ position: 'absolute', top: 6, right: 6, width: 6, height: 6, borderRadius: 999, background: 'var(--wu-orange)' }} />
          </button>
        </div>
        <div className="kr mono" style={{ fontSize: 10, color: 'var(--wu-mute)', marginTop: 24 }}>GOOD AFTERNOON · 14:02</div>
        <div className="display" style={{ fontSize: 36, marginTop: 4, color: 'var(--wu-paper)', lineHeight: 1 }}>김민재<br/>점장님.</div>
      </div>

      {/* Stat row */}
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 1, background: '#1A1A17', margin: '0 16px' }}>
        {[
          { l: '이번 주 매출', v: '12.4M', d: '+18%' },
          { l: '판매 수량', v: '428', d: '+66' },
          { l: '재고 경고', v: '7', d: 'SKU' },
          { l: '미확인', v: '3', d: '본사 공지' },
        ].map(s => (
          <div key={s.l} style={{ background: 'var(--wu-ink)', padding: 14 }}>
            <div className="mono" style={{ fontSize: 9, color: 'var(--wu-mute)', letterSpacing: '0.08em' }}>{s.l.toUpperCase()}</div>
            <div className="display" style={{ fontSize: 26, marginTop: 8, color: 'var(--wu-paper)' }}>{s.v}</div>
            <div className="mono" style={{ fontSize: 10, color: 'var(--wu-lime)', marginTop: 2 }}>● {s.d}</div>
          </div>
        ))}
      </div>

      {/* Pinned */}
      <div style={{ margin: '20px 16px 0' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 10 }}>
          <div className="display" style={{ fontSize: 16, color: 'var(--wu-lime)' }}>📌 PINNED</div>
          <div className="mono" style={{ fontSize: 10, color: 'var(--wu-mute)' }}>본사 공지</div>
        </div>
        {WU_DATA.announcements.slice(0, 2).map(a => (
          <div key={a.id} style={{ background: '#1A1A17', padding: 14, marginBottom: 8, borderLeft: '3px solid ' + (a.type === 'PRICE' ? 'var(--wu-lime)' : 'var(--wu-orange)') }}>
            <div style={{ display: 'flex', justifyContent: 'space-between' }}>
              <span style={{ background: a.type === 'PRICE' ? 'var(--wu-lime)' : 'var(--wu-orange)', color: a.type === 'PRICE' ? 'var(--wu-ink)' : '#fff', padding: '2px 6px', fontSize: 9, fontFamily: 'JetBrains Mono', fontWeight: 700 }}>{a.badge}</span>
              <span className="mono" style={{ fontSize: 10, color: 'var(--wu-mute)' }}>{a.date}</span>
            </div>
            <div className="kr" style={{ fontSize: 14, fontWeight: 700, marginTop: 8 }}>{a.title}</div>
            <div className="kr" style={{ fontSize: 11, color: 'rgba(255,255,255,0.6)', marginTop: 4 }}>{a.body}</div>
          </div>
        ))}
      </div>

      {/* Leaderboard mini */}
      <div style={{ margin: '20px 16px 0', background: 'var(--wu-lime)', color: 'var(--wu-ink)', padding: 16 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
          <div>
            <div className="mono" style={{ fontSize: 10, letterSpacing: '0.1em' }}>WEEKLY · 성수점</div>
            <div className="display" style={{ fontSize: 24, marginTop: 4 }}>TOP SELLERS</div>
          </div>
          <div className="mono" style={{ fontSize: 10 }}>UPDATED 13:00</div>
        </div>
        {leaderboard.slice(0, 3).map(r => (
          <div key={r.rank} style={{ marginTop: 10, display: 'flex', alignItems: 'center', gap: 12 }}>
            <div className="display" style={{ fontSize: 22, width: 28 }}>{String(r.rank).padStart(2, '0')}</div>
            <div style={{ flex: 1 }}>
              <div className="kr" style={{ fontSize: 13, fontWeight: 700 }}>{r.kr}</div>
              <div className="mono" style={{ fontSize: 9, opacity: 0.6 }}>{r.sku}</div>
            </div>
            <div className="display" style={{ fontSize: 18 }}>{r.units}</div>
          </div>
        ))}
      </div>

      {/* Quick actions */}
      <div style={{ padding: '20px 16px 0' }}>
        <div className="display" style={{ fontSize: 16, color: 'var(--wu-paper)', marginBottom: 10 }}>QUICK ACTIONS</div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
          {[
            ['+ 재주문', '카탈로그 열기'],
            ['✎ 매장 공지', '고객에게'],
            ['📷 사진 올리기', '갤러리'],
            ['💬 본사 채팅', '공급팀'],
          ].map(([l, sub]) => (
            <button key={l} style={{ background: '#1A1A17', padding: 14, textAlign: 'left', border: '1px solid #2A2A26' }}>
              <div className="kr" style={{ fontSize: 13, fontWeight: 700, color: 'var(--wu-paper)' }}>{l}</div>
              <div className="kr mono" style={{ fontSize: 10, color: 'var(--wu-mute)', marginTop: 4 }}>{sub}</div>
            </button>
          ))}
        </div>
      </div>
    </div>
  );
}

// ────────────────────────────────────────────────────
// OWNER MY STORE EDITOR — 모바일 매장 정보 편집 (마이페이지에서 진입)
// ────────────────────────────────────────────────────
// Store info functions — now handled by firebase-init.jsx (Firestore)
// getStoreInfo, saveStoreInfo are defined in firebase-init.jsx

function OwnerMyStoreEditor({ variant, onBack }) {
  const user = getAuth();
  const storeName = user?.storeName || '내 매장';
  const isApproved = user?.status === 'APPROVED';

  const [info, setInfo] = React.useState({
    storeName: storeName,
    hours: '',
    parking: '',
    intro: '',
    phone: '',
    holidays: '',
    events: '',
    photos: [],
  });
  const [saving, setSaving] = React.useState(false);
  const [saved, setSaved] = React.useState(false);
  const [loaded, setLoaded] = React.useState(false);
  const [activeTab, setActiveTab] = React.useState('basic');

  // Load existing data
  React.useEffect(() => {
    getStoreInfo(storeName).then(data => {
      if (data) setInfo(prev => ({ ...prev, ...data }));
      setLoaded(true);
    });
  }, [storeName]);

  const update = (key, val) => {
    setInfo(prev => ({ ...prev, [key]: val }));
    setSaved(false);
  };

  const handleSave = async () => {
    setSaving(true);
    try {
      await saveStoreInfo({ ...info, storeName, updatedAt: new Date().toISOString() });
      setSaved(true);
    } catch (e) {
      console.error('Store info save error:', e);
    }
    setSaving(false);
  };

  const handlePhotoUpload = (e) => {
    const files = Array.from(e.target.files || []);
    if (!files.length) return;
    const maxPhotos = 10;
    const remaining = maxPhotos - info.photos.length;
    const toProcess = files.slice(0, remaining);

    toProcess.forEach(file => {
      const reader = new FileReader();
      reader.onload = () => {
        const img = new Image();
        img.onload = () => {
          const canvas = document.createElement('canvas');
          const maxW = 800;
          let w = img.width, h = img.height;
          if (w > maxW) { h = Math.round(h * maxW / w); w = maxW; }
          canvas.width = w; canvas.height = h;
          canvas.getContext('2d').drawImage(img, 0, 0, w, h);
          const dataUrl = canvas.toDataURL('image/jpeg', 0.8);
          setInfo(prev => ({
            ...prev,
            photos: [...prev.photos, dataUrl].slice(0, maxPhotos)
          }));
          setSaved(false);
        };
        img.src = reader.result;
      };
      reader.readAsDataURL(file);
    });
  };

  const removePhoto = (idx) => {
    setInfo(prev => ({
      ...prev,
      photos: prev.photos.filter((_, i) => i !== idx)
    }));
    setSaved(false);
  };

  if (!isApproved) {
    return (
      <div className="wu wu-scroll" style={{
        height: '100%', overflow: 'auto',
        background: 'var(--wu-bg)', paddingBottom: 100
      }}>
        <div style={{ padding: 'calc(env(safe-area-inset-top, 20px) + 12px) 16px 20px' }}>
          <button onClick={onBack} style={{
            background: 'none', border: 'none',
            fontSize: 18, cursor: 'pointer', marginBottom: 12
          }}>← 뒤로</button>
        </div>
        <div style={{
          margin: '40px 16px', padding: 32,
          background: 'var(--wu-paper)',
          border: '1px solid var(--wu-line)',
          textAlign: 'center'
        }}>
          <div style={{
            width: 80, height: 80, borderRadius: 999,
            background: 'var(--wu-orange)', color: '#fff',
            display: 'flex', alignItems: 'center',
            justifyContent: 'center', fontSize: 32,
            margin: '0 auto'
          }}>⏱</div>
          <div className="kr" style={{
            fontSize: 18, fontWeight: 700, marginTop: 16
          }}>승인 대기 중</div>
          <div className="kr" style={{
            fontSize: 13, color: 'var(--wu-mute)',
            marginTop: 8, lineHeight: 1.6
          }}>
            관리자 승인 후 매장 정보를 관리할 수 있습니다.
          </div>
        </div>
      </div>
    );
  }

  const tabs = [
    { id: 'basic', label: '기본정보', icon: '📋' },
    { id: 'photos', label: '매장사진', icon: '📷' },
    { id: 'events', label: '공지/이벤트', icon: '📢' },
  ];

  const inputStyle = {
    width: '100%', padding: '12px 14px',
    border: '1px solid var(--wu-line)',
    background: 'var(--wu-bg)', fontSize: 14,
    fontFamily: 'var(--wu-kr)', fontWeight: 600,
    outline: 'none', resize: 'vertical'
  };

  const labelStyle = {
    fontSize: 10, fontFamily: 'JetBrains Mono',
    color: 'var(--wu-mute)', marginBottom: 6,
    letterSpacing: '0.06em', display: 'block'
  };

  return (
    <div className="wu wu-scroll" style={{
      height: '100%', overflow: 'auto',
      background: 'var(--wu-bg)', paddingBottom: 120
    }}>
      {/* Header */}
      <div style={{ padding: 'calc(env(safe-area-inset-top, 20px) + 12px) 16px 16px' }}>
        <button onClick={onBack} style={{
          background: 'none', border: 'none',
          fontSize: 18, cursor: 'pointer', marginBottom: 8
        }}>← 뒤로</button>
        <div style={{
          display: 'flex', alignItems: 'center',
          justifyContent: 'space-between'
        }}>
          <div>
            <div className="mono" style={{
              fontSize: 10, color: 'var(--wu-orange)',
              letterSpacing: '0.1em'
            }}>PARTNER · STORE MANAGEMENT</div>
            <div className="display" style={{
              fontSize: 24, marginTop: 4
            }}>{storeName}</div>
          </div>
          <button onClick={handleSave} disabled={saving || saved} style={{
            padding: '10px 18px', fontSize: 13,
            fontWeight: 700, fontFamily: 'var(--wu-kr)',
            background: saved ? 'var(--wu-lime)' : 'var(--wu-orange)',
            color: saved ? 'var(--wu-ink)' : '#fff',
            border: 'none', cursor: saving ? 'wait' : 'pointer',
            opacity: saving ? 0.6 : 1
          }}>
            {saving ? '저장 중...' : saved ? '저장됨 ✓' : '저장'}
          </button>
        </div>
      </div>

      {/* Tab bar */}
      <div style={{
        display: 'flex', gap: 0,
        margin: '0 16px', background: 'var(--wu-paper)',
        border: '1px solid var(--wu-line)'
      }}>
        {tabs.map(t => (
          <button key={t.id} onClick={() => setActiveTab(t.id)} style={{
            flex: 1, padding: '12px 0',
            background: activeTab === t.id ? 'var(--wu-ink)' : 'transparent',
            color: activeTab === t.id ? 'var(--wu-paper)' : 'var(--wu-ink)',
            border: 'none', cursor: 'pointer',
            fontSize: 12, fontWeight: 700,
            fontFamily: 'var(--wu-kr)'
          }}>
            {t.icon} {t.label}
          </button>
        ))}
      </div>

      {/* TAB: Basic Info */}
      {activeTab === 'basic' && (
        <div style={{ padding: '16px' }}>
          <div style={{
            background: 'var(--wu-paper)',
            border: '1px solid var(--wu-line)',
            padding: 20
          }}>
            <div style={{ marginBottom: 18 }}>
              <label style={labelStyle}>운영시간 *</label>
              <input value={info.hours}
                onChange={e => update('hours', e.target.value)}
                placeholder="예: 평일 11:00-22:00 / 주말 10:00-23:00"
                style={inputStyle} />
            </div>

            <div style={{ marginBottom: 18 }}>
              <label style={labelStyle}>전화번호</label>
              <input value={info.phone}
                onChange={e => update('phone', e.target.value)}
                placeholder="예: 02-497-0120"
                type="tel" style={inputStyle} />
            </div>

            <div style={{ marginBottom: 18 }}>
              <label style={labelStyle}>휴무일</label>
              <input value={info.holidays}
                onChange={e => update('holidays', e.target.value)}
                placeholder="예: 매주 월요일, 설/추석 연휴"
                style={inputStyle} />
            </div>

            <div style={{ marginBottom: 18 }}>
              <label style={labelStyle}>주차장 안내</label>
              <textarea value={info.parking}
                onChange={e => update('parking', e.target.value)}
                placeholder="예: 건물 지하 1층 주차 가능 (2시간 무료)"
                rows={2} style={inputStyle} />
            </div>

            <div style={{ marginBottom: 0 }}>
              <label style={labelStyle}>매장 소개</label>
              <textarea value={info.intro}
                onChange={e => update('intro', e.target.value)}
                placeholder="매장의 특징이나 고객에게 전하고 싶은 소개글을 작성해주세요."
                rows={4} style={inputStyle} />
            </div>
          </div>
        </div>
      )}

      {/* TAB: Photos */}
      {activeTab === 'photos' && (
        <div style={{ padding: '16px' }}>
          <div style={{
            background: 'var(--wu-paper)',
            border: '1px solid var(--wu-line)',
            padding: 20
          }}>
            <div style={{
              display: 'flex', justifyContent: 'space-between',
              alignItems: 'center', marginBottom: 16
            }}>
              <div>
                <div className="kr" style={{ fontSize: 14, fontWeight: 700 }}>
                  매장 사진
                </div>
                <div className="mono" style={{
                  fontSize: 10, color: 'var(--wu-mute)', marginTop: 2
                }}>최대 10장 · 800px 자동 리사이즈</div>
              </div>
              <label style={{
                padding: '8px 14px', fontSize: 12,
                fontWeight: 700, fontFamily: 'var(--wu-kr)',
                background: 'var(--wu-orange)', color: '#fff',
                cursor: 'pointer'
              }}>
                + 사진 추가
                <input type="file" accept="image/*" multiple
                  onChange={handlePhotoUpload}
                  style={{ display: 'none' }} />
              </label>
            </div>

            {info.photos.length === 0 ? (
              <div style={{
                padding: 40, textAlign: 'center',
                border: '2px dashed var(--wu-line)',
                background: 'var(--wu-bg)'
              }}>
                <div style={{ fontSize: 32 }}>📷</div>
                <div className="kr" style={{
                  fontSize: 13, color: 'var(--wu-mute)',
                  marginTop: 8
                }}>매장 사진을 업로드해주세요</div>
              </div>
            ) : (
              <div style={{
                display: 'grid',
                gridTemplateColumns: 'repeat(3, 1fr)',
                gap: 8
              }}>
                {info.photos.map((src, i) => (
                  <div key={i} style={{
                    position: 'relative', aspectRatio: '1/1',
                    overflow: 'hidden', background: '#ddd'
                  }}>
                    <img src={src} alt="" style={{
                      width: '100%', height: '100%',
                      objectFit: 'cover'
                    }} />
                    <button onClick={() => removePhoto(i)} style={{
                      position: 'absolute', top: 4, right: 4,
                      width: 24, height: 24, borderRadius: 999,
                      background: 'rgba(0,0,0,0.6)', color: '#fff',
                      border: 'none', cursor: 'pointer',
                      fontSize: 14, lineHeight: '24px'
                    }}>×</button>
                  </div>
                ))}
              </div>
            )}
          </div>
        </div>
      )}

      {/* TAB: Events / Notices */}
      {activeTab === 'events' && (
        <div style={{ padding: '16px' }}>
          <div style={{
            background: 'var(--wu-paper)',
            border: '1px solid var(--wu-line)',
            padding: 20
          }}>
            <div className="kr" style={{
              fontSize: 14, fontWeight: 700, marginBottom: 4
            }}>공지 · 이벤트</div>
            <div className="mono" style={{
              fontSize: 10, color: 'var(--wu-mute)', marginBottom: 16
            }}>고객에게 보여질 매장 공지나 이벤트를 작성하세요</div>

            <textarea value={info.events}
              onChange={e => update('events', e.target.value)}
              placeholder={"예:\n[이벤트] 오픈 기념 전 품목 10% 할인 (~12/31)\n[공지] 연말연시 영업시간 변경 안내\n[신상] 2026 S/S 봄 자켓 입고!"}
              rows={8} style={{
                ...inputStyle,
                lineHeight: 1.8
              }} />
          </div>

          {/* Preview */}
          {info.events && (
            <div style={{
              marginTop: 12,
              background: 'var(--wu-ink)',
              padding: 16
            }}>
              <div className="mono" style={{
                fontSize: 9, color: 'var(--wu-lime)',
                marginBottom: 10, letterSpacing: '0.1em'
              }}>CUSTOMER PREVIEW</div>
              {info.events.split('\n').filter(l => l.trim()).map((line, i) => {
                const isEvent = line.includes('[이벤트]');
                const isNotice = line.includes('[공지]');
                const isNew = line.includes('[신상]');
                const tagColor = isEvent ? 'var(--wu-orange)'
                  : isNotice ? 'var(--wu-lime)'
                  : isNew ? '#4A9EFF' : 'var(--wu-mute)';
                return (
                  <div key={i} style={{
                    padding: '10px 12px', marginBottom: 6,
                    background: '#1A1A17',
                    borderLeft: '3px solid ' + tagColor
                  }}>
                    <div className="kr" style={{
                      fontSize: 13, color: 'var(--wu-paper)',
                      lineHeight: 1.5
                    }}>{line}</div>
                  </div>
                );
              })}
            </div>
          )}
        </div>
      )}
    </div>
  );
}

Object.assign(window, { OwnerAnnounce, OwnerStoreProfile, OwnerMobile, OwnerMyStoreEditor });