/* Design A4 — modern bento-grid dashboard. Scoped under .A4 */
function AdminBento() {
  const M = window.MOCK, I = window.AdI;
  return (
    <div className="A4 admin-root">
      <header className="A4-top">
        <div className="A4-brand"><LogoMark size={28} color="var(--brand)" /><div className="A4-bn">コンパス会計社<small>DASHBOARD</small></div></div>
        <div className="A4-search">{I.search({ s: 18 })}<input placeholder="検索…" /></div>
        <div className="A4-tr"><button className="A4-ti dot">{I.bell({ s: 20 })}</button><Avatar name={M.user.name} initials={M.user.initials} size={36} color="var(--brand)" /></div>
      </header>

      <div className="A4-grid">
        <div className="A4-tile A4-rev">
          <div className="A4-th"><h2>売上推移</h2><span className="A4-delta up">{I.up({ s: 13 })}+8.3%</span></div>
          <div className="A4-revv">¥4.82M<small>今月 · 対目標 102%</small></div>
          <Bars data={M.revenue} h={130} />
          <div className="A4-months">{["1","2","3","4","5","6","7","8","9","10","11","12"].map((m) => <span key={m}>{m}月</span>)}</div>
        </div>

        {M.kpis.map((k, i) => (
          <div key={k.key} className={"A4-tile A4-kpi k" + i}>
            <span className="A4-kl">{k.label}</span>
            <span className="A4-kv">{k.value}</span>
            <span className={"A4-kd " + (k.up ? "up" : "dn")}>{(k.up ? I.up : I.down)({ s: 12 })}{k.delta}</span>
          </div>
        ))}

        <div className="A4-tile A4-goal">
          <div className="A4-th"><h2>目標達成率</h2></div>
          <Donut value={102} size={124} stroke={11} color="var(--accent)" />
          <div className="A4-goalt">月次目標 ¥4.7M<b>達成 ✓</b></div>
        </div>

        <div className="A4-tile A4-tasks">
          <div className="A4-th"><h2>タスク</h2><a>{M.tasks.length}件</a></div>
          <ul>
            {M.tasks.map((t, i) => (
              <li key={i}><span className={"A4-pri p" + t.pri}>{t.pri}</span><div className="A4-li"><b>{t.title}</b><span>{t.owner}・期限 {t.due}</span></div></li>
            ))}
          </ul>
        </div>

        <div className="A4-tile A4-act">
          <div className="A4-th"><h2>アクティビティ</h2></div>
          <ul>
            {M.activity.map((a, i) => (
              <li key={i}><Avatar name={a.who} size={30} color="var(--brand-2)" /><div className="A4-li"><b>{a.act}</b><span>{a.who}・{a.when}</span></div></li>
            ))}
          </ul>
        </div>

        <div className="A4-tile A4-quick">
          <div className="A4-th"><h2>クイック操作</h2></div>
          <div className="A4-qa">
            <button><span>{I.plus({ s: 20 })}</span>顧問先追加</button>
            <button><span>{I.news({ s: 20 })}</span>お知らせ投稿</button>
            <button><span>{I.mail({ s: 20 })}</span>問い合わせ返信</button>
            <button><span>{I.docs({ s: 20 })}</span>書類アップ</button>
          </div>
        </div>

        <div className="A4-tile A4-inq">
          <div className="A4-th"><h2>新着問い合わせ</h2><i className="A4-badge">3</i></div>
          <ul>
            {M.inquiries.slice(0, 3).map((q, i) => (
              <li key={i}><div className="A4-li"><b>{q.subject}</b><span>{q.name}・{q.channel}</span></div><span className="A4-qd">{q.date}</span></li>
            ))}
          </ul>
        </div>
      </div>
    </div>
  );
}
Object.assign(window, { AdminBento });