/* 아리 — 스마트 인박스 전용 페이지
   적을 때는 분류하지 않는다 — 분류·배치·자동화는 아리가. */
const I = window.AriShell.Icon;
const Topbar = window.AriShell.Topbar;
const SD = window.AriSmartInbox;

/* 분류 원칙 — '일상적인 것도 작업에 넣어야 할까?'에 대한 답 */
const RULES = [
  {
    icon: "check", tone: "green",
    title: "행동이 있으면 → 작업",
    desc: "‘비행기 티켓 사기’도 작업이에요. 작업 트리의 ‘개인 › 여행’ 프로젝트로 들어가 다른 작업과 똑같이 보여요.",
  },
  {
    icon: "cal", tone: "blue",
    title: "시간이 정해지면 → 일정",
    desc: "‘수요일 11시 자전거 수리’는 작업이 아니라 캘린더에 바로 등록돼요.",
  },
  {
    icon: "brain", tone: "violet",
    title: "막연하면 → 아이디어",
    desc: "행동이 정해지지 않은 생각은 보드에 보관하고, 관련 프로젝트에 연결해둬요.",
  },
  {
    icon: "clock", tone: "coral",
    title: "개인은 섹션이 아니라 프로젝트",
    desc: "따로 숨기거나 분리하지 않아요. 같은 작업 트리에서 필터로만 구분하고, 배치만 저녁·주말 빈 시간으로 추천해요.",
  },
];

const DEST = [
  { label: "작업", n: 4, sub: "개인 3 · 업무 1", tone: "green", href: "작업.html" },
  { label: "일정", n: 2, sub: "캘린더 등록", tone: "blue", href: "일정.html" },
  { label: "아이디어", n: 1, sub: "보드 보관", tone: "violet", href: null },
];

function App() {
  return (
    <div className="dash">
      <Topbar current="sbox" />

      <div className="pagehead">
        <div>
          <div className="ph-eyebrow">
            <span>오늘 {SD.todayRouted}건 정리</span>
            <span className="sep" />
            <span>분류를 고민한 시간 0초</span>
          </div>
          <h1 className="ph-title">스마트 인박스 <em>일단 적으세요</em></h1>
        </div>
      </div>

      <div className="work">
        <div className="board">
          {/* 인박스 본체 (sinbox.jsx) */}
          <SmartInbox I={I} />

          {/* 분류 원칙 */}
          <section className="card">
            <div className="ch">
              <div className="ico"><I d="route" /></div>
              <div className="htext"><h3>아리의 분류 원칙</h3><div className="sub">적을 때 고민하지 마세요</div></div>
            </div>
            <div className="prin-list">
              {RULES.map((r, i) => (
                <div className="prin" key={i} style={{ "--tone": `var(--${r.tone})` }}>
                  <span className="prin-ic"><I d={r.icon} /></span>
                  <span className="prin-body">
                    <span className="prin-title">{r.title}</span>
                    <span className="prin-desc">{r.desc}</span>
                  </span>
                </div>
              ))}
            </div>
          </section>

          {/* 오늘 어디로 갔나 */}
          <section className="card">
            <div className="ch">
              <div className="ico"><I d="arrow" /></div>
              <div className="htext"><h3>오늘 어디로 갔나</h3><div className="sub">{SD.todayRouted}건의 행선지</div></div>
            </div>
            <div className="dest-list">
              {DEST.map((d, i) => {
                const inner = (
                  <>
                    <span className="dest-dot" style={{ background: `var(--${d.tone})` }} />
                    <span className="dest-label">{d.label}</span>
                    <span className="dest-sub">{d.sub}</span>
                    <span className="dest-n">{d.n}</span>
                    {d.href && <span className="dest-go"><I d="arrow" /></span>}
                  </>
                );
                return d.href
                  ? <a className="dest go" key={i} href={d.href}>{inner}</a>
                  : <div className="dest" key={i}>{inner}</div>;
              })}
            </div>
            <div className="auton-note dim">
              <I d="swap" />분류가 마음에 안 들면 칩을 눌러 바꾸세요 — 아리가 다음부터 기억해요.
            </div>
          </section>
        </div>
      </div>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);