// WEBWORKS — canonical dashboard (Direction C, promoted to a full product).
// Sticky top bar + elevated KPI strip + decision banner + project lanes +
// spend/radar footer. Reuses the C_* components from dir-c.jsx.

function WW_TopBar({ theme, onToggleTheme }) {
  const m = WW.meta;
  return (
    <div style={{ position: 'sticky', top: 0, zIndex: 50, background: 'var(--surface)',
      borderBottom: '1px solid var(--border)', boxShadow: 'var(--shadow-sm)' }}>
      <div style={{ maxWidth: 1680, margin: '0 auto', padding: '14px 40px',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 20 }}>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 12 }}>
          <span className="ww-h" style={{ fontSize: 22, letterSpacing: '-0.02em' }}>{m.title}</span>
          <span style={{ color: 'var(--text-3)', fontSize: 15, fontWeight: 500 }}>{m.subtitle}</span>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 18 }}>
          <div className="ww-mono" style={{ fontSize: 11, color: 'var(--text-3)', textAlign: 'right', lineHeight: 1.5 }}>
            <div>snapshot <span style={{ color: 'var(--text-2)' }}>{m.source}</span></div>
            <div>build <span style={{ color: 'var(--text-2)' }}>{m.build}</span></div>
          </div>
          <button onClick={onToggleTheme} aria-label="Toggle theme"
            style={{ display: 'flex', alignItems: 'center', gap: 7, cursor: 'pointer',
              background: 'var(--surface-3)', border: '1px solid var(--border)', color: 'var(--text-2)',
              borderRadius: 999, padding: '7px 13px', font: 'inherit', fontSize: 12.5, fontWeight: 600 }}>
            {theme === 'dark' ? <Icon.moon s={15} /> : <Icon.sun s={15} />}
            {theme === 'dark' ? 'Dark' : 'Light'}
          </button>
        </div>
      </div>
    </div>
  );
}

function WW_KpiStrip() {
  return (
    <div className="ww-card" style={{ display: 'grid', gridTemplateColumns: 'repeat(6,1fr)', padding: '20px 8px', marginBottom: 22 }}>
      {WW.kpis.map((k, i) => (
        <div key={i} style={{ padding: '0 24px', borderLeft: i ? '1px solid var(--border)' : 'none' }}>
          <Stat value={k.value} sub={k.sub} label={k.label} tone={k.tone} />
        </div>
      ))}
    </div>
  );
}

function Canonical({ cols = 4 }) {
  return (
    <div style={{ maxWidth: 1680, margin: '0 auto', padding: '26px 40px 48px' }}>
      <WW_KpiStrip />
      <C_DecisionBanner />
      <C_Lanes cols={cols} />
      <C_Bottom />
    </div>
  );
}

window.Canonical = Canonical;
window.WW_TopBar = WW_TopBar;