// OLLYMEN Store OS — Owner Dashboard
const { useState: useStateDash } = React;

function OwnerDashboard({ onNavigate }) {
  const D = window.DATA;

  return (
    <div className="workspace">
      <div className="page">
        {/* Header */}
        <div className="page-head">
          <div>
            <div style={{ display: "flex", alignItems: "center", gap: 8, color: "var(--muted)", fontSize: 12.5 }}>
              <span className="mono">{D.today}</span>
              <span>·</span>
              <span>{window.__today.weekday}</span>
              <span>·</span>
              <span className="mono">23°C 맑음</span>
            </div>
            <div className="page-h1" style={{ marginTop: 4 }}>안녕하세요, 고대수 대표님</div>
            <div className="page-sub" style={{ marginTop: 4 }}>
              운영 중 <strong style={{ color: "var(--ink)" }}>1개</strong> · 오픈 준비 <strong style={{ color: "var(--ink)" }}>1개</strong> · 확장 후보 <strong style={{ color: "var(--ink)" }}>1개</strong> · 오늘 확인 필요 <strong style={{ color: "var(--ramen-ink)" }}>6건</strong>
            </div>
          </div>
          <div className="page-right">
            <button className="tb-btn">{I.filter()} 이번 주</button>
            <button className="tb-btn">{I.copy()} 운영 기준 복제</button>
            <button className="btn primary">{I.plus()} 새 운영일지</button>
          </div>
        </div>

        {/* Top KPI row */}
        <div className="grid g-4 rise d1" style={{ marginBottom: 18 }}>
          <Metric
            k="오늘 마감 체크"
            v="92"
            unit="%"
            accent="olive"
            sub="강남점 · 12 / 13 항목"
            delta={<><span>{I.arrow()}</span><span className="mono">+4% vs 7일 평균</span></>}
            deltaDir="up"
          />
          <Metric
            k="오픈 준비율"
            v="64"
            unit="%"
            accent="burnt"
            sub="서울역그랜드점 · D-18"
            delta={<><span className="mono">11 / 17 마일스톤 완료</span></>}
          />
          <Metric
            k="직원 온보딩"
            v="68"
            unit="%"
            accent="ramen"
            sub="진행 4명 · 완료 3명"
            delta={<><span className="mono">위생 모듈 평균 52%</span></>}
          />
          <Metric
            k="이번 주 확인 필요"
            v="7"
            unit="건"
            sub="P1 2건 · P2 3건 · P3 2건"
            delta={<><span style={{ color: "var(--danger)" }}>●</span><span>POS 설치 지연 1건 포함</span></>}
          />
        </div>

        {/* Store cards */}
        <div className="sec-h">
          <div className="t">지점 상태</div>
          <div className="sub">{D.stores.length}개 지점 · 좌측 사이드바에서 지점 전환</div>
          <div className="spacer"></div>
          <button className="tb-btn">{I.plus()} 지점 추가</button>
        </div>
        <div className="grid g-3 rise d2" style={{ marginBottom: 18 }}>
          <StoreCardLive store={D.stores[0]} onOpen={() => onNavigate("ops")} />
          <StoreCardOpening store={D.stores[1]} onOpen={() => onNavigate("opening")} />
          <StoreCardScout store={D.stores[2]} />
        </div>

        {/* Mid row — Today timeline + Repeat issues */}
        <div className="grid rise d3" style={{ gridTemplateColumns: "1.45fr 1fr", marginBottom: 18 }}>
          <TodayActivity onOpen={() => onNavigate("ops")} />
          <RepeatIssues />
        </div>

        {/* Bottom row — covers heat + mobile preview */}
        <div className="grid rise d4" style={{ gridTemplateColumns: "1.45fr 1fr", marginBottom: 8 }}>
          <CoversCard />
          <MobilePreviewCard onOpen={() => onNavigate("mobile")} />
        </div>
      </div>

      {/* Right pane */}
      <RightPane />
    </div>
  );
}

/* ---------- Store cards ---------- */
function StoreCardLive({ store, onOpen }) {
  return (
    <div className="card store-card">
      <div className="top">
        <div className="tile olive">강남</div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
            <div className="title">{store.name}</div>
            <StatusBadge kind="live" />
          </div>
          <div className="meta">
            <span className="mono">{store.tag}</span>
            <span>·</span>
            <span>{store.area}</span>
            <span>·</span>
            <span className="mono">{store.hours}</span>
          </div>
        </div>
        <button className="iconbtn">{I.dots()}</button>
      </div>

      <div className="stats">
        <div className="stat">
          <div className="l">오늘 객수</div>
          <div className="v tnum">142<span style={{ fontSize: 13, color: "var(--muted)", fontWeight: 500 }}> / 180</span></div>
          <div style={{ marginTop: 4 }}><Bar value={142/180*100} color="olive" /></div>
        </div>
        <div className="stat">
          <div className="l">마감 체크</div>
          <div className="v tnum" style={{ color: "var(--olive-ink)" }}>92<span style={{ fontSize: 13, color: "var(--muted)", fontWeight: 500 }}>%</span></div>
          <div className="mono" style={{ fontSize: 11, color: "var(--muted)", marginTop: 4 }}>12 / 13 항목</div>
        </div>
        <div className="stat">
          <div className="l">이슈</div>
          <div className="v tnum" style={{ color: "var(--ramen-ink)" }}>1</div>
          <div className="mono" style={{ fontSize: 11, color: "var(--muted)", marginTop: 4 }}>P2 · 토마토 베이스</div>
        </div>
      </div>

      <div style={{
        display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 1,
        background: "var(--line-soft)", borderRadius: 8, overflow: "hidden",
        border: "1px solid var(--line-soft)",
      }}>
        <CellMini label="런치 피크" value="12:10–13:20" tag="만석" tagKind="ok" />
        <CellMini label="디너 라스트" value="21:00" tag="진행 중" tagKind="warn" />
        <CellMini label="점장" value={store.manager} tag="온라인" tagKind="ok" />
      </div>

      <div style={{ display: "flex", gap: 8 }}>
        <button className="btn block" onClick={onOpen}>운영일지 열기 {I.arrow()}</button>
        <button className="btn ghost">{I.copy()} 운영 기준 복제</button>
      </div>
    </div>
  );
}

function CellMini({ label, value, tag, tagKind }) {
  return (
    <div style={{ background: "var(--surface)", padding: "8px 10px", minWidth: 0 }}>
      <div className="mono" style={{ fontSize: 10.5, color: "var(--muted)", letterSpacing: ".06em", textTransform: "uppercase", whiteSpace: "nowrap" }}>{label}</div>
      <div style={{ display: "flex", alignItems: "center", gap: 6, marginTop: 4, flexWrap: "wrap" }}>
        <span style={{ fontSize: 12.5, fontWeight: 600, whiteSpace: "nowrap" }} className="mono">{value}</span>
        <span className={`pill ${tagKind}`} style={{ fontSize: 10 }}>{tag}</span>
      </div>
    </div>
  );
}

function StoreCardOpening({ store, onOpen }) {
  return (
    <div className="card store-card">
      <div className="top">
        <div className="tile burnt">서역</div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
            <div className="title">{store.name}</div>
            <StatusBadge kind="opening" />
          </div>
          <div className="meta">
            <span className="mono">{store.tag}</span>
            <span>·</span>
            <span>{store.area}</span>
            <span>·</span>
            <span className="mono" style={{ color: "var(--burnt)", fontWeight: 600 }}>오픈 D-{store.dDay}</span>
          </div>
        </div>
        <button className="iconbtn">{I.dots()}</button>
      </div>

      <div>
        <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", marginBottom: 6 }}>
          <div style={{ fontSize: 12, color: "var(--muted)" }}>전체 준비율</div>
          <div className="tnum" style={{ fontFamily: "var(--font-display)", fontSize: 22, fontWeight: 600 }}>{store.readiness}<span style={{ fontSize: 12, color: "var(--muted)", fontWeight: 500 }}>%</span></div>
        </div>
        <Bar value={store.readiness} color="burnt" tall />
        <div className="mono" style={{ fontSize: 11, color: "var(--muted)", marginTop: 6 }}>11 / 17 마일스톤 · 5/29 발주 마감 · 6/12 오픈</div>
      </div>

      <div className="col" style={{ gap: 6 }}>
        <MilestoneRow label="주방 설비 입고" state="done" date="5/18" />
        <MilestoneRow label="POS 설치 (Toast)" state="blocked" date="5/24" note="D+2" />
        <MilestoneRow label="홀 4명 채용" state="doing" date="5/27" sub="2 / 4" />
        <MilestoneRow label="네이버 플레이스 등록" state="todo" date="5/29" />
      </div>

      <div style={{ display: "flex", gap: 8 }}>
        <button className="btn block" onClick={onOpen}>오픈 보드 열기 {I.arrow()}</button>
      </div>
    </div>
  );
}

function MilestoneRow({ label, state, date, note, sub }) {
  const dot = { done: "ok", doing: "warn", blocked: "low", todo: "" }[state];
  const txt = { done: "완료", doing: "진행", blocked: "지연", todo: "예정" }[state];
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 10, fontSize: 12.5 }}>
      <Check checked={state === "done"} size={14} onClick={() => {}} />
      <span style={{ flex: 1, color: state === "blocked" ? "var(--danger)" : "var(--ink)" }}>{label}{sub && <span className="mono" style={{ color: "var(--muted)", marginLeft: 6, fontSize: 11 }}>{sub}</span>}</span>
      {note && <span className="mono" style={{ fontSize: 10.5, color: "var(--danger)" }}>{note}</span>}
      <span className={`pill ${dot}`}>{txt}</span>
      <span className="mono" style={{ fontSize: 11, color: "var(--muted)", width: 36, textAlign: "right" }}>{date}</span>
    </div>
  );
}

function StoreCardScout({ store }) {
  return (
    <div className="card store-card" style={{ background: "var(--surface)" }}>
      <div className="top">
        <div className="tile">판교</div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
            <div className="title">{store.name}</div>
            <StatusBadge kind="scout" />
          </div>
          <div className="meta">
            <span className="mono">{store.tag}</span>
            <span>·</span>
            <span>{store.area}</span>
          </div>
        </div>
        <button className="iconbtn">{I.dots()}</button>
      </div>

      <div className="col" style={{ gap: 8 }}>
        <KVRow k="상권" v="직장인 점심 수요 高" tag="O" />
        <KVRow k="유사 매장" v="3개 · 평균 객단가 14.2K" tag="—" />
        <KVRow k="메뉴 적합도" v="검토 중 · 매운맛 ↑ 가정" tag="?" />
        <KVRow k="예상 오픈" v="2026 Q3" tag="—" />
      </div>

      <Placeholder label="상권 지도 · Naver Maps 연동 예정 (1.5)" height={94} />

      <div style={{ display: "flex", gap: 8 }}>
        <button className="btn block">상권 보고서 보기</button>
        <button className="btn ghost">{I.dots()}</button>
      </div>
    </div>
  );
}

function KVRow({ k, v, tag }) {
  return (
    <div style={{ display: "grid", gridTemplateColumns: "80px 1fr 24px", gap: 8, alignItems: "center", fontSize: 12.5 }}>
      <div className="muted">{k}</div>
      <div>{v}</div>
      <div className="mono" style={{ color: "var(--muted)", fontSize: 11, textAlign: "center" }}>{tag}</div>
    </div>
  );
}

/* ---------- Today activity ---------- */
function TodayActivity({ onOpen }) {
  const [tab, setTab] = useStateDash("today");
  const D = window.DATA;
  return (
    <div className="card">
      <CardHead
        title="오늘의 운영 — 강남 빗썸금융타워점"
        sub="실시간 activity log · 점장 코멘트 포함"
        right={
          <div style={{ display: "flex", gap: 8 }}>
            <button className="tb-btn">{I.filter()}</button>
            <button className="tb-btn" onClick={onOpen}>전체 보기 {I.chev()}</button>
          </div>
        }
      />
      <div style={{ padding: "0 14px" }}>
        <Tabs
          items={[
            { id: "today", label: "오늘", count: 6 },
            { id: "issues", label: "이슈만", count: 2 },
            { id: "photos", label: "사진", count: 4 },
            { id: "reviews", label: "고객", count: 5 },
          ]}
          active={tab}
          onChange={setTab}
        />
      </div>
      <div className="card-b">
        {D.opsLog.map((l, i) => (
          <div className="act" key={l.id}>
            <div className="when">{l.when}</div>
            <div className="rail"><div className={`nd ${l.kind === "issue" ? "warn" : l.kind === "peak" ? "ramen" : "olive"}`}></div></div>
            <div className="body">
              <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
                <span className="t">{l.title}</span>
                {l.chips && l.chips.map((c, j) => <span key={j} className="chip">{c}</span>)}
              </div>
              <div className="m">{l.body}</div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

/* ---------- Repeat issues ---------- */
function RepeatIssues() {
  const rows = [
    { rank: 1, name: "올리브오일 잔량 임계", count: 4, where: "강남", trend: "▲" },
    { rank: 2, name: "토마토 베이스 발주 누락", count: 3, where: "강남", trend: "—" },
    { rank: 3, name: "아지타마고 자가생산 지연", count: 3, where: "강남", trend: "▼" },
    { rank: 4, name: "마감 사진 누락 (홀)", count: 2, where: "강남", trend: "▼" },
  ];
  return (
    <div className="card">
      <CardHead
        title="반복 이슈 TOP"
        sub="최근 14일 · 같은 항목이 2회 이상 발생"
        right={<span className="mono" style={{ fontSize: 11, color: "var(--muted)" }}>14d</span>}
      />
      <div style={{ padding: 4 }}>
        <table className="tbl">
          <tbody>
            {rows.map(r => (
              <tr key={r.rank}>
                <td style={{ width: 28 }}>
                  <span className="mono" style={{
                    fontSize: 11, fontWeight: 600,
                    color: r.rank === 1 ? "var(--ramen)" : "var(--muted)",
                  }}>#{r.rank}</span>
                </td>
                <td>
                  <div style={{ fontWeight: 600 }}>{r.name}</div>
                  <div className="muted" style={{ fontSize: 11.5, marginTop: 1 }}>{r.where} · 마지막 발생 어제</div>
                </td>
                <td style={{ width: 60, textAlign: "right" }}>
                  <span className="mono" style={{ fontWeight: 600 }}>{r.count}회</span>
                </td>
                <td style={{ width: 28, textAlign: "right" }}>
                  <span className="mono" style={{ color: r.trend === "▲" ? "var(--danger)" : r.trend === "▼" ? "var(--success)" : "var(--muted)" }}>{r.trend}</span>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
      <div className="card-f">
        <span>운영 기준 보강 → SOP 업데이트로 전환</span>
        <div className="spacer"></div>
        <button className="btn sm">SOP 만들기</button>
      </div>
    </div>
  );
}

/* ---------- Covers heat / weekly chart ---------- */
function CoversCard() {
  // Build 14 days x 14 segments mock heat
  const cells = [];
  for (let i = 0; i < 14 * 14; i++) {
    const r = (Math.sin(i * 0.7) + Math.cos(i * 0.35)) * 0.5 + 0.5;
    const l = r > 0.8 ? "l4" : r > 0.6 ? "l3" : r > 0.4 ? "l2" : r > 0.2 ? "l1" : "";
    cells.push(l);
  }
  const series = [62, 71, 84, 92, 88, 102, 96, 110, 98, 105, 122, 118, 132, 142];
  return (
    <div className="card">
      <CardHead
        title="객수 · 매출 추이"
        sub="강남점 · 최근 14영업일 · 운영시간대 객수 밀도"
        right={
          <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
            <span className="chip">객수</span>
            <span className="chip olive">올리멘 점유</span>
            <button className="tb-btn">{I.filter()}</button>
          </div>
        }
      />
      <div className="card-b">
        <div style={{ display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: 18 }}>
          <div>
            <div style={{ display: "flex", alignItems: "baseline", gap: 8, marginBottom: 6 }}>
              <span className="tnum" style={{ fontFamily: "var(--font-display)", fontSize: 24, fontWeight: 600 }}>142</span>
              <span className="muted" style={{ fontSize: 12 }}>오늘 객수 · 회전 1.8</span>
              <span style={{ marginLeft: "auto", color: "var(--success)", fontSize: 12, fontWeight: 600 }} className="mono">+8 vs 평균</span>
            </div>
            <Spark pts={series} color="var(--ramen)" fill="var(--ramen-wash)" />
            <div className="mono" style={{ fontSize: 10.5, color: "var(--muted)", display: "flex", justifyContent: "space-between", marginTop: 4 }}>
              <span>5/12</span><span>5/19</span><span>오늘</span>
            </div>
          </div>
          <div>
            <div style={{ display: "flex", alignItems: "baseline", gap: 8, marginBottom: 8 }}>
              <span className="muted" style={{ fontSize: 12 }}>운영시간대 객수 밀도</span>
              <span className="mono" style={{ marginLeft: "auto", fontSize: 11, color: "var(--muted)" }}>11:00 → 21:30</span>
            </div>
            <div className="heat">
              {cells.map((c, i) => <div key={i} className={`c ${c}`} style={{ animationDelay: `${i * 6}ms` }}></div>)}
            </div>
            <div style={{ display: "flex", alignItems: "center", gap: 6, marginTop: 8, fontSize: 11, color: "var(--muted)" }}>
              <span>적음</span>
              <span className="c" style={{ width: 10, height: 10, borderRadius: 2, background: "var(--surface-3)", display: "inline-block" }}></span>
              <span className="c" style={{ width: 10, height: 10, borderRadius: 2, background: "oklch(0.92 0.04 60)", display: "inline-block" }}></span>
              <span className="c" style={{ width: 10, height: 10, borderRadius: 2, background: "oklch(0.85 0.07 50)", display: "inline-block" }}></span>
              <span className="c" style={{ width: 10, height: 10, borderRadius: 2, background: "oklch(0.72 0.11 40)", display: "inline-block" }}></span>
              <span className="c" style={{ width: 10, height: 10, borderRadius: 2, background: "oklch(0.55 0.13 30)", display: "inline-block" }}></span>
              <span>만석</span>
              <span className="spacer"></span>
              <span>피크 12:10–13:20 / 19:00–20:10</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

/* ---------- Mobile preview ---------- */
function MobilePreviewCard({ onOpen }) {
  return (
    <div className="card mobile-preview-card" style={{ overflow: "hidden" }}>
      <CardHead
        title="현장 직원 화면"
        sub="강남점 · 오늘 마감 체크리스트"
        right={<button className="tb-btn" onClick={onOpen}>전체화면 {I.chev()}</button>}
      />
      <div style={{ padding: 16, background: "var(--bg-2)", display: "flex", justifyContent: "center" }}>
        <div style={{ transform: "scale(.78)", transformOrigin: "top center", marginBottom: -120 }}>
          <PhoneClosingMini />
        </div>
      </div>
    </div>
  );
}

function PhoneClosingMini() {
  const D = window.DATA;
  return (
    <div className="phone">
      <div className="screen">
        <div className="notch"></div>
        <div className="status">
          <span>22:48</span>
          <span style={{ display: "flex", alignItems: "center", gap: 6 }}>
            {I.signal()} {I.wifi()} {I.battery()}
          </span>
        </div>
        <div style={{ padding: "8px 16px 0" }}>
          <div className="mono" style={{ fontSize: 10.5, color: "var(--muted)", letterSpacing: ".08em", textTransform: "uppercase" }}>강남 · 정수민</div>
          <div style={{ fontSize: 17, fontWeight: 650, marginTop: 2 }}>오늘 마감 체크</div>
          <div style={{ marginTop: 10, padding: "10px 12px", borderRadius: 10, background: "var(--olive-wash)", border: "1px solid oklch(0.85 0.04 115)", display: "flex", alignItems: "center", gap: 10 }}>
            <div style={{ flex: 1 }}>
              <div className="mono" style={{ fontSize: 11, color: "var(--olive-ink)", fontWeight: 600 }}>10 / 12 완료 · 92%</div>
              <div style={{ marginTop: 4 }}><Bar value={92} color="olive" /></div>
            </div>
            <div className="tnum" style={{ fontSize: 22, fontFamily: "var(--font-display)", fontWeight: 700, color: "var(--olive-ink)" }}>92<span style={{ fontSize: 11 }}>%</span></div>
          </div>
        </div>
        <div style={{ padding: "12px 14px", flex: 1, overflow: "auto" }}>
          {D.closing.slice(0, 5).map((c, i) => (
            <div key={c.id} style={{ display: "flex", gap: 10, alignItems: "center", padding: "9px 4px", borderBottom: "1px solid var(--line-soft)" }}>
              <Check checked={i < 3} size={20} />
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 13.5, fontWeight: i < 3 ? 500 : 600, color: i < 3 ? "var(--muted)" : "var(--ink)", textDecoration: i < 3 ? "line-through" : "none" }}>{c.title}</div>
                <div style={{ fontSize: 11.5, color: "var(--muted)", marginTop: 1 }}>{c.hint}</div>
              </div>
              <span className="mono" style={{ fontSize: 10.5, color: "var(--muted)" }}>{c.group}</span>
            </div>
          ))}
        </div>
        <div style={{ padding: 14, borderTop: "1px solid var(--line)" }}>
          <button className="btn primary lg block">관리자에게 전송 {I.arrow()}</button>
        </div>
      </div>
    </div>
  );
}

/* ---------- Right pane ---------- */
function RightPane() {
  const D = window.DATA;
  return (
    <aside className="rpane">
      <div className="rpane-h">
        <div className="t">오늘 확인할 일</div>
        <div className="spacer"></div>
        <span className="badge solid-ramen"><span className="dot"></span>6</span>
      </div>

      <div className="rpane-section">
        <h4>긴급</h4>
        {D.notifications.filter(n => n.sev === "p1").map(n => (
          <div className="notif" key={n.id}>
            <div className={`ico ${n.kind}`}>{I.alert()}</div>
            <div className="body">
              <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
                <span className={`sev ${n.sev}`}>{n.sev.toUpperCase()}</span>
                <span style={{ fontWeight: 600 }}>{n.title}</span>
              </div>
              <div className="meta">{n.store} · {n.meta}</div>
              <div style={{ marginTop: 6, display: "flex", gap: 6 }}>
                <button className="btn sm primary">{n.action}</button>
                <button className="btn sm ghost">미루기</button>
              </div>
            </div>
          </div>
        ))}
      </div>

      <div className="rpane-section">
        <h4>확인 대기</h4>
        {D.notifications.filter(n => n.sev === "p2").map(n => (
          <div className="notif" key={n.id}>
            <div className={`ico ${n.kind}`}>{n.category === "재고" ? I.box() : n.category === "온보딩" ? I.grad() : I.alert()}</div>
            <div className="body">
              <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
                <span className={`sev ${n.sev}`}>{n.sev.toUpperCase()}</span>
                <span style={{ fontWeight: 600 }}>{n.title}</span>
              </div>
              <div className="meta">{n.store} · {n.meta}</div>
            </div>
          </div>
        ))}
      </div>

      <div className="rpane-section">
        <h4>사진 확인 요청</h4>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8 }}>
          {["주방", "홀", "냉장고", "POS"].map((label, i) => (
            <div key={i} style={{
              aspectRatio: "4/3",
              borderRadius: 8,
              background: `repeating-linear-gradient(${45 + i * 15}deg, oklch(0.88 0.02 60) 0 6px, oklch(0.94 0.012 70) 6px 12px)`,
              border: "1px solid var(--line)",
              position: "relative",
              fontFamily: "var(--font-mono)",
              fontSize: 10.5,
              color: "var(--muted)",
              display: "grid", placeItems: "end start",
              padding: 6,
            }}>
              <span style={{ background: "oklch(1 0 0 / 0.85)", padding: "1px 5px", borderRadius: 4 }}>{label}</span>
            </div>
          ))}
        </div>
        <div style={{ marginTop: 8, display: "flex", gap: 6 }}>
          <button className="btn sm primary block">4장 모두 승인</button>
          <button className="btn sm">반려</button>
        </div>
      </div>

      <div className="rpane-section">
        <h4>점장 코멘트</h4>
        <div className="notif" style={{ borderBottom: 0 }}>
          <div className="avatar olive sm">정수</div>
          <div className="body">
            <div style={{ fontWeight: 600 }}>정수민 · 강남</div>
            <div className="meta" style={{ color: "var(--ink-2)", marginTop: 2 }}>"올리브오일 향 호평이 늘었습니다. 마라 매운맛은 약하다는 코멘트 2건. 페스토 농도 +5% 검토 부탁드립니다."</div>
            <div className="meta">오늘 13:42</div>
          </div>
        </div>
        <div className="notif" style={{ borderBottom: 0 }}>
          <div className="avatar olive sm">한지</div>
          <div className="body">
            <div style={{ fontWeight: 600 }}>한지우 · 서울역</div>
            <div className="meta" style={{ color: "var(--ink-2)", marginTop: 2 }}>"POS 일정 재확정 필요. 합동 교육 1회는 5/24 강남점에서 진행 예정."</div>
            <div className="meta">오늘 11:08</div>
          </div>
        </div>
      </div>
    </aside>
  );
}

window.OwnerDashboard = OwnerDashboard;