/* Prototype Hub — desktop catalog + design system preview */

function HubPage({ navigate }) {
  return (
    <div className="hub-full">
      <div className="side-card" style={{ marginBottom: 16 }}>
        <div className="hub-hero">
          <div className="hub-hero__mark">ま</div>
          <div>
            <h1>Maho 學日文 · Designer Mockup</h1>
            <p>高精度擬真正式 Ionic Vue App。給 AI / 設計師用低成本提案新功能。</p>
          </div>
        </div>
        <div style={{ display: "flex", gap: 10, flexWrap: "wrap" }}>
          <ZenButton variant="primary" onClick={() => navigate("/home")}>
            開啟 App Mockup
          </ZenButton>
          <ZenButton
            variant="outline"
            onClick={() => { window.location.href = "/design-inspector/flow.html"; }}
          >
            Flow Canvas
          </ZenButton>
        </div>
      </div>

      {HUB_PAGES.filter((g) => g.group !== "總覽").map((g) => (
        <div key={g.group} className="side-card" style={{ marginBottom: 16 }}>
          <h2>{g.group}</h2>
          <div className="hub-grid">
            {g.items.map((it) => (
              <button key={it.route} type="button" className="hub-tile" onClick={() => navigate(it.route)}>
                <div className="hub-tile__title">{it.title}</div>
                <div className="hub-tile__route">#{it.route}</div>
                <div className="hub-tile__desc">{it.desc}</div>
              </button>
            ))}
          </div>
        </div>
      ))}

      <div className="side-card">
        <h2>Design System · Zen Tokens</h2>
        <p>對齊正式 App 的和紙 / 抹茶 / 朱印語彙。</p>
        <div className="token-swatches">
          {[
            ["#FEFDFB", "washi-50"],
            ["#F5F4F0", "washi-200"],
            ["#7B8C5B", "matcha"],
            ["#5A6641", "matcha-shade"],
            ["#E8EFE0", "matcha-soft"],
            ["#C2410C", "shuin"],
            ["#1F2937", "sumi-900"],
            ["#6B7280", "sumi-500"],
          ].map(([c, n]) => (
            <div key={n} className="swatch">
              <div className="swatch__chip" style={{ background: c }} />
              <div className="swatch__name">{n}</div>
            </div>
          ))}
        </div>
        <div style={{ marginTop: 16, display: "flex", gap: 8, flexWrap: "wrap" }}>
          <ZenButton variant="primary" sm>Primary</ZenButton>
          <ZenButton variant="accent" sm>Accent</ZenButton>
          <ZenButton variant="outline" sm>Outline</ZenButton>
          <ZenButton variant="ghost" sm>Ghost</ZenButton>
          <StatusPill status="completed">已完成</StatusPill>
          <StatusPill status="processing">處理中</StatusPill>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { HubPage });