// Risk Hotspots · standalone page hosting the longer-window quality widgets
// (Pre-release defects + Post-PR rework). These are the observed risk
// hotspots in the SDLC, moved out of the Dashboard so risk analysis lives
// in its own focused canvas.

function HotspotsPage({ navigate, openSidePanel }) {
  const headerWindow = DATA.windowFor(DATA.DEFAULT_WEEKS);

  return (
    <div className="page page-fade">
      <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 14 }}>
        <div>
          <h1 style={{ margin: 0, fontSize: 22, fontWeight: 600, letterSpacing: '-0.02em' }}>Risk hotspots</h1>
          <div className="mono-caps" style={{ marginTop: 4 }}>{headerWindow.dateLabel} · {DATA.viewer.team}</div>
        </div>
        <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
          <span className="evidence-chip" title="theSitrep shows what happened · not what might happen.">
            <span className="ev-dot" />
            <span>Ground truth · observed only</span>
          </span>
        </div>
      </div>

      <div className="dash-grid">
        <div className="span-2">
          <HighDefectsWidget openSidePanel={openSidePanel} navigate={navigate} />
        </div>
      </div>

      <div className="dash-grid" style={{ marginTop: 22 }}>
        <div className="span-2">
          <ReworkStatsWidget navigate={navigate} />
        </div>
      </div>
    </div>
  );
}

window.HotspotsPage = HotspotsPage;