const AuthSidePanel = () => {
  const days = ['пн','вт','ср','чт','пт','сб','вс'];
  const ratings = [5,4,5,3,5,5,4];
  return (
    <div style={{ padding: 56, height:'100%', display:'flex', flexDirection:'column', justifyContent:'space-between', color:'var(--fg)' }}>
      <div style={{
        display:'inline-flex', alignItems:'center', gap: 8, padding:'6px 12px',
        background:'rgba(255,255,255,.6)', borderRadius: 999, border:'1px solid rgba(224,93,60,.15)',
        fontSize: 12, width:'fit-content', color:'var(--accent-hover)'
      }}>
        <IconSparkle size={14}/> Тёплый взгляд на воспитание
      </div>

      <div>
        <h2 style={{ fontSize: 34, lineHeight: 1.15, letterSpacing:'-.02em', fontWeight: 600, margin:'0 0 18px', maxWidth: 440 }}>
          Замечайте хорошее.<br/>Обсуждайте важное.
        </h2>
        <p style={{ color:'var(--fg-muted)', fontSize: 15, lineHeight: 1.55, maxWidth: 400, margin: 0 }}>
          Один раз в день поставьте оценку и оставьте пару слов — через месяц вы увидите закономерности, о которых даже не догадывались.
        </p>
      </div>

      <div style={{ background:'var(--surface)', border:'1px solid var(--border)', borderRadius: 16, padding: 20, boxShadow: 'var(--shadow-md)', maxWidth: 420 }}>
        <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom: 14 }}>
          <div>
            <div style={{ fontSize: 13, fontWeight: 500 }}>Эта неделя</div>
            <div className="mono" style={{ fontSize: 11, color:'var(--fg-subtle)' }}>СРЕДНЯЯ ОЦЕНКА · 4.4</div>
          </div>
          <Pill tone="good">+0.3 к прошлой</Pill>
        </div>
        <div style={{ display:'grid', gridTemplateColumns:'repeat(7, 1fr)', gap: 6 }}>
          {days.map((d,i)=>(
            <div key={i} style={{ textAlign:'center' }}>
              <div className="mono" style={{ fontSize: 10, color:'var(--fg-subtle)', marginBottom: 4 }}>{d}</div>
              <div style={{
                height: 40, borderRadius: 10,
                background: `var(--level-${ratings[i]})`,
                display:'grid', placeItems:'center', color: ratings[i] >= 4 ? 'rgba(0,0,0,.4)' : '#fff', fontSize: 12, fontWeight: 600
              }}>{ratings[i]}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { AuthSidePanel });