function Dashboard() {
  const products = [
    { name: 'Фонбет', tag: '[ЦУПИС]', kapa: '24/30', bar: 'b1' },
    { name: 'Винлайн', tag: '[ЦУПИС]', kapa: '15/30', bar: 'b2' },
    { name: 'Парибет', tag: '[ЦУПИС]', kapa: '30/30', bar: 'b3' },
  ];
  return (
    <section className="sec dash-aura" data-screen-label="03 Results">
      <div className="container">
        <div className="sec-head enter">
          <h2>
            НАШИ{' '}
            <span style={{
              background: 'linear-gradient(90deg,#e8a93b,#f59e0b)',
              WebkitBackgroundClip: 'text',
              backgroundClip: 'text',
              WebkitTextFillColor: 'transparent',
              fontStyle: 'italic',
              filter: 'drop-shadow(0 0 24px rgba(232,169,59,0.4))'
            }}>ОБОРОТЫ</span>
          </h2>
        </div>
        <div className="enter">
          <div className="dash-subhead">
            <div className="ttl">Mediabuyer Dashboard</div>
            <div className="month">Текущий месяц ▾</div>
          </div>
          <div className="dash-grid">
            <div className="chart-card glass">
              <div className="chart-head">
                <span className="pip"></span>
                <span className="lbl">График доходности</span>
              </div>
              <div className="chart-wrap">
                <div className="chart-yaxis">
                  {['500k','400k','300k','200k','100k','0'].map(v => <div key={v}>{v}</div>)}
                </div>
                <div className="chart-svg-wrap">
                  <svg viewBox="0 0 700 256" preserveAspectRatio="none">
                    <defs>
                      <linearGradient id="grad-fill" x1="0" y1="0" x2="0" y2="1">
                        <stop offset="0%" stopColor="#e8a93b" stopOpacity="0.45" />
                        <stop offset="100%" stopColor="#e8a93b" stopOpacity="0" />
                      </linearGradient>
                    </defs>
                    <g stroke="rgba(70,72,77,0.25)" strokeWidth="1">
                      {[42,92,142,192,242].map(y => <line key={y} x1="0" y1={y} x2="700" y2={y} />)}
                    </g>
                    <path d="M0,200 L60,165 L120,180 L180,110 L240,140 L300,80 L360,120 L420,55 L480,95 L540,40 L600,75 L660,30 L700,55 L700,256 L0,256 Z" fill="url(#grad-fill)" />
                    <path d="M0,200 L60,165 L120,180 L180,110 L240,140 L300,80 L360,120 L420,55 L480,95 L540,40 L600,75 L660,30 L700,55"
                          fill="none" stroke="#e8a93b" strokeWidth="3.5" strokeLinecap="round" strokeLinejoin="round"
                          style={{ filter: 'drop-shadow(0 0 10px rgba(232,169,59,0.6))' }} />
                    <circle cx="700" cy="55" r="5" fill="#e8a93b" style={{ filter: 'drop-shadow(0 0 8px rgba(232,169,59,0.9))' }} />
                  </svg>
                  <div className="chart-xaxis">
                    {['1','3','5','7','9','11','15','19','23','27','30'].map(d => <span key={d}>{d}</span>)}
                  </div>
                </div>
              </div>
            </div>
            <div className="plan-card glass">
              <div className="plan-head">
                <span className="ttl">План Продуктов</span>
              </div>
              <div className="plan-toggles">
                <span className="tg active">В РАБОТЕ 5</span>
                <span className="tg">ОТКЛЮЧЕНЫ 3</span>
              </div>
              {products.map(p => (
                <div className="prod-row" key={p.name}>
                  <div className="nm"><span className="gdot"></span>{p.name} <span style={{ color: 'var(--fg-mute)', fontSize: 11 }}>{p.tag}</span></div>
                  <div className="kapa">КАПА (ЛИМИТ) <b>{p.kapa}</b></div>
                  <div className={'pbar ' + p.bar}><div></div></div>
                </div>
              ))}
            </div>
          </div>
          <div className="metrics">
            <div className="metric glass">
              <div className="lbl">DEPOSITS</div>
              <div className="v1">FD: 2,241</div>
              <div className="v1" style={{ color: 'var(--fg-mute)' }}>RD: 13,446</div>
            </div>
            <div className="metric glass">
              <div className="lbl">VOLUME</div>
              <div className="v2">СУММА FD: 3,430,300 ₽</div>
              <div className="v1" style={{ marginTop: 6, color: 'var(--fg)' }}>СУММА RD: 17,479,800 ₽</div>
            </div>
            <div className="metric glass dev">
              <div className="diamond"></div>
              <div className="ll">В РАЗРАБОТКЕ</div>
            </div>
            <div className="metric income glass">
              <div className="lbl">СРЕЗ (ДОХОД)</div>
              <div className="num">10,021,900 ₽</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
window.Dashboard = Dashboard;