/* OrisTrack v2 — shared primitives
 * StatusBar, AppHeader, TabBar, BaselineRule, Card, etc.
 */

const V2StatusBar = () => (
  <div className="status">
    <span>9:41</span>
    <span className="status-right">
      <svg width="16" height="10" viewBox="0 0 16 10" fill="none"><rect x="0" y="6" width="3" height="4" fill="currentColor"/><rect x="4.5" y="4" width="3" height="6" fill="currentColor"/><rect x="9" y="2" width="3" height="8" fill="currentColor"/><rect x="13.5" y="0" width="3" height="10" fill="currentColor"/></svg>
      <svg width="22" height="11" viewBox="0 0 22 11" fill="none"><rect x="0.5" y="0.5" width="18" height="10" rx="2" stroke="currentColor" fill="none"/><rect x="2" y="2" width="13" height="7" fill="currentColor"/><rect x="19.5" y="3.5" width="2" height="4" rx="0.5" fill="currentColor"/></svg>
    </span>
  </div>
);

const V2Header = ({ session = "Session 014", date = "25 Apr 2026" }) => (
  <div className="app-header">
    <div style={{ display: "flex", alignItems: "baseline" }}>
      <span className="wordmark">OrisTrack</span>
      <span className="wordmark-meta">research</span>
    </div>
    <span className="cap" style={{ fontSize: 10.5 }}>
      {session} · {date}
    </span>
  </div>
);

const V2TabBar = ({ active }) => (
  <div className="tabbar">
    {[
      ["session", "Session"],
      ["results", "Results"],
      ["monitor", "Monitor"],
      ["profile", "Profile"],
    ].map(([k, label]) => (
      <div key={k} className={`tab ${active === k ? "active" : ""}`}>
        <div className="tab-dot" />
        <div>{label}</div>
      </div>
    ))}
  </div>
);

const V2BaselineRule = ({ eyebrow = "Player baseline first", children }) => (
  <div className="baseline-rule">
    <div className="baseline-rule-mark" />
    <div className="baseline-rule-body">
      <div className="eyebrow" style={{ marginBottom: 6 }}>{eyebrow}</div>
      <div className="body-sm">{children}</div>
    </div>
  </div>
);

const V2Arrow = ({ size = 14 }) => (
  <svg width={size} height={size} viewBox="0 0 14 14" fill="none">
    <path d="M3 7h8m0 0L7.5 3.5M11 7l-3.5 3.5" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round"/>
  </svg>
);

Object.assign(window, {
  V2StatusBar, V2Header, V2TabBar, V2BaselineRule, V2Arrow,
});