/* global React, Card, Ic */

function ChartsScreen() {
  return (
    <div style={{ padding: 24, maxWidth: 960, margin: '0 auto' }}>
      <div style={{ marginBottom: 16 }}>
        <div className="uppercase-label" style={{ marginBottom: 6 }}>Analityka</div>
        <h1 style={{ margin: 0, fontSize: 24, fontWeight: 500, letterSpacing: '-0.02em' }}>Wykresy długookresowe</h1>
        <div style={{ fontSize: 12.5, color: 'var(--fg-muted)', marginTop: 6 }}>
          Trendy prędkości, przyspieszeń i kopert dla wybranych punktów pomiarowych w przekroju miesięcy.
        </div>
      </div>

      <Card>
        <div style={{ textAlign: 'center', padding: '48px 24px', color: 'var(--fg-muted)' }}>
          <div style={{
            width: 44, height: 44, margin: '0 auto 16px',
            border: '1px solid var(--border)', borderRadius: 'var(--r-md)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}>
            <Ic.chart size={20} />
          </div>
          <div style={{ fontSize: 15, fontWeight: 500, color: 'var(--fg)', marginBottom: 6 }}>W przygotowaniu</div>
          <div style={{ fontSize: 12.5, maxWidth: 440, margin: '0 auto' }}>
            Pełna zakładka długoterminowych trendów pojawi się w kolejnej iteracji. Podgląd trendu dla pojedynczego
            punktu jest już dostępny w widoku szczegółów sesji.
          </div>
        </div>
      </Card>
    </div>
  );
}

Object.assign(window, { ChartsScreen });