// ROKKOR window chrome: dark titlebar + ivory sidebar with logo lockup & nav.
function TitleBar() {
  return (
    <div style={{
      height: "var(--titlebar-height)", background: "var(--titlebar)", display: "flex",
      alignItems: "center", justifyContent: "space-between", padding: "0 14px", flex: "none",
      WebkitAppRegion: "drag",
    }}>
      <div style={{ display: "flex", alignItems: "center", gap: 9 }}>
        <span style={{ width: 9, height: 9, borderRadius: "50%", background: "var(--success-600)" }} />
        <span style={{ font: "600 12px/1 var(--font-sans)", color: "var(--paper-200)", letterSpacing: "0.04em" }}>ROKKOR</span>
      </div>
      <div style={{ display: "flex", gap: 18, color: "var(--ink-400)" }}>
        <span style={{ font: "13px/1 var(--font-sans)" }}>—</span>
        <span style={{ font: "13px/1 var(--font-sans)" }}>▢</span>
        <span style={{ font: "13px/1 var(--font-sans)" }}>✕</span>
      </div>
    </div>
  );
}

function Sidebar({ active, onNav }) {
  const { NavItem } = window.ROKKORDesignSystem_4e99ef;
  const I = window.RokkorIcons;
  const items = [
    ["overview", "Overview", I.Home],
    ["recordings", "Recordings / History", I.Clock],
    ["settings", "Settings", I.Settings],
    ["models", "Models", I.Cpu],
    ["memory", "Memory / KB", I.Brain],
    ["style", "Style & Tone", I.Wand],
    ["transforms", "Transforms", I.Transform],
    ["snippets", "Snippets", I.Snippet],
    ["teams", "Teams", I.Users],
    ["dictionary", "Dictionary", I.Book],
    ["scratchpad", "Scratchpad", I.Pen],
    ["insights", "Insights", I.Chart],
  ];
  return (
    <div style={{
      width: "var(--sidebar-width)", flex: "none", background: "var(--sidebar)",
      borderRight: "1px solid var(--sidebar-border)", display: "flex", flexDirection: "column",
    }}>
      {/* Logo lockup */}
      <div style={{ display: "flex", alignItems: "center", gap: 11, padding: "16px 16px 14px" }}>
        <img src="../assets/rokkor-wheel.png" alt="ROKKOR" style={{ width: 40, height: 40 }} />
        <div>
          <div style={{ font: "700 19px/1 var(--font-display)", letterSpacing: "0.07em", color: "var(--ink-900)" }}>ROKKOR</div>
          <div style={{ font: "italic 400 11px/1.2 var(--font-serif)", color: "var(--ink-500)", marginTop: 3, whiteSpace: "nowrap" }}>Speech to text. Simplified.</div>
        </div>
      </div>
      <div style={{ height: 1, background: "var(--sidebar-border)", margin: "0 0 8px" }} />
      <div className="rk-scroll" style={{ flex: 1, overflowY: "auto", padding: "0 10px", display: "flex", flexDirection: "column", gap: 2 }}>
        {items.map(([id, label, Icon]) => (
          <NavItem key={id} icon={<Icon size={17} />} label={label} active={active === id} onClick={() => onNav(id)} />
        ))}
      </div>
      <div style={{ borderTop: "1px solid var(--sidebar-border)", padding: "10px", display: "flex", flexDirection: "column", gap: 8 }}>
        <NavItem icon={<I.Help size={17} />} label="Help & Shortcuts" active={active === "help"} onClick={() => onNav("help")} />
        <div style={{ display: "flex", alignItems: "center", gap: 7, font: "400 11px/1 var(--font-sans)", color: "var(--ink-500)", padding: "2px 12px 4px" }}>
          <span style={{ width: 7, height: 7, borderRadius: "50%", background: "var(--oxblood-500)" }} />
          100% local · private
        </div>
      </div>
    </div>
  );
}

window.RokkorChrome = { TitleBar, Sidebar };