function HeroDashboard({ dark }) {
  const [active, setActive] = React.useState(0);
  React.useEffect(() => {
    const id = setInterval(() => setActive(a => (a + 1) % 4), 2800);
    return () => clearInterval(id);
  }, []);

  const themes = [
    { name: 'Долгая авторизация', count: 412, delta: '+38%', tone: 'neg', src: 'Поддержка · iOS · App Store' },
    { name: 'Не работает Apple Pay', count: 287, delta: '+112%', tone: 'neg', src: 'Чат · Касса · NPS' },
    { name: 'Похвала за новый поиск', count: 198, delta: '+24%', tone: 'pos', src: 'NPS · Web · Соцсети' },
    { name: 'Сложная навигация в каталоге', count: 156, delta: '+9%', tone: 'warn', src: 'UX-интервью · Сессии' },
  ];

  return (
    <div style={{
      background: 'var(--card)',
      border: '1px solid var(--line)',
      borderRadius: 14,
      boxShadow: '0 1px 0 rgba(0,0,0,0.02), 0 30px 80px -24px rgba(22,20,15,0.28)',
      overflow: 'hidden',
    }}>
      {/* window chrome */}
      <div className="hd-chrome" style={{
        display: 'flex', alignItems: 'center', gap: 8,
        padding: '10px 14px', borderBottom: '1px solid var(--line-2)',
        background: 'var(--bg-soft)',
      }}>
        <div style={{ display: 'flex', gap: 6 }}>
          <span style={{ width: 10, height: 10, borderRadius: '50%', background: '#ff5f57' }} />
          <span style={{ width: 10, height: 10, borderRadius: '50%', background: '#febc2e' }} />
          <span style={{ width: 10, height: 10, borderRadius: '50%', background: '#28c840' }} />
        </div>
        <div className="mono" style={{ fontSize: 11, color: 'var(--muted)', marginLeft: 10 }}>
          app.feedly.tech / atlas / последние 30 дней
        </div>
      </div>

      {/* search bar */}
      <div className="hd-search" style={{
        padding: '12px 16px', borderBottom: '1px solid var(--line-2)',
        display: 'flex', alignItems: 'center', gap: 10,
      }}>
        <svg width="14" height="14" viewBox="0 0 14 14"><circle cx="6" cy="6" r="4" stroke="var(--muted)" strokeWidth="1.6" fill="none" /><path d="M9 9 L12 12" stroke="var(--muted)" strokeWidth="1.6" strokeLinecap="round" /></svg>
        <span style={{ fontSize: 13, color: 'var(--ink)' }}>почему пользователи жалуются на оплату<span style={{ display: 'inline-block', width: 1.5, height: 14, background: 'var(--accent)', marginLeft: 2, verticalAlign: 'middle', animation: 'blink 1s infinite' }}></span></span>
        <style>{`@keyframes blink{50%{opacity:0}}`}</style>
        <div style={{ marginLeft: 'auto', display: 'flex', gap: 6 }}>
          <span className="mono" style={{ fontSize: 10, padding: '3px 7px', background: 'var(--bg-soft)', borderRadius: 4, color: 'var(--muted)' }}>⌘K</span>
        </div>
      </div>

      {/* chart */}
      <div className="hd-chart" style={{ padding: '16px 18px 4px' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 8 }}>
          <div>
            <div style={{ fontSize: 11, color: 'var(--muted)', fontWeight: 500, marginBottom: 2 }}>Упоминания по темам</div>
            <div className="display" style={{ fontSize: 26, fontWeight: 700 }}>14 832 <span style={{ color: 'var(--pos)', fontSize: 13, fontWeight: 600 }}>↑ 21%</span></div>
          </div>
          <div style={{ display: 'flex', gap: 4 }}>
            {['7д', '30д', '90д'].map((t, i) => (
              <span key={t} className="mono" style={{
                fontSize: 10, padding: '3px 8px', borderRadius: 4,
                background: i === 1 ? 'var(--ink)' : 'transparent',
                color: i === 1 ? 'var(--bg)' : 'var(--muted)',
                border: i === 1 ? 'none' : '1px solid var(--line)',
              }}>{t}</span>
            ))}
          </div>
        </div>
        <Sparkline />
      </div>

      {/* themes table */}
      <div className="hd-themes" style={{ padding: '14px 18px 18px' }}>
        <div style={{
          display: 'grid', gridTemplateColumns: '1fr auto auto',
          fontSize: 10.5, color: 'var(--muted)', fontWeight: 500,
          padding: '0 0 8px', borderBottom: '1px solid var(--line-2)',
          letterSpacing: '0.06em', textTransform: 'uppercase',
        }}>
          <span>Тема</span>
          <span style={{ textAlign: 'right', padding: '0 14px' }}>Упом.</span>
          <span style={{ textAlign: 'right' }}>Δ нед.</span>
        </div>
        {themes.map((t, i) => (
          <div key={t.name} className="hd-row" data-i={i} style={{
            display: 'grid', gridTemplateColumns: '1fr auto auto',
            alignItems: 'center',
            borderBottom: i < themes.length - 1 ? '1px solid var(--line-2)' : 'none',
            background: active === i ? 'rgba(74,57,255,0.05)' : 'transparent',
            margin: active === i ? '0 -10px' : '0',
            padding: active === i ? '10px' : '10px 0',
            borderRadius: active === i ? 6 : 0,
            transition: 'all 0.25s',
          }}>
            <div>
              <div style={{ fontSize: 13, fontWeight: 500, color: 'var(--ink)' }}>{t.name}</div>
              <div className="mono" style={{ fontSize: 10.5, color: 'var(--muted)', marginTop: 2 }}>{t.src}</div>
            </div>
            <div className="mono" style={{ fontSize: 12, textAlign: 'right', padding: '0 14px', color: 'var(--ink)' }}>{t.count}</div>
            <div className="mono" style={{
              fontSize: 12, textAlign: 'right', fontWeight: 600,
              color: t.tone === 'neg' ? 'var(--neg)' : t.tone === 'pos' ? 'var(--pos)' : 'var(--warn)',
            }}>{t.delta}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

function Sparkline() {
  const points = [22, 26, 24, 31, 28, 35, 33, 41, 38, 44, 42, 49, 47, 55, 52, 61, 58, 67, 64, 72, 70, 78];
  const max = 80;
  const W = 460, H = 64;
  const step = W / (points.length - 1);
  const path = points.map((p, i) => `${i === 0 ? 'M' : 'L'} ${(i * step).toFixed(1)} ${(H - (p / max) * H).toFixed(1)}`).join(' ');
  const area = `${path} L ${W} ${H} L 0 ${H} Z`;
  return (
    <svg width="100%" viewBox={`0 0 ${W} ${H}`} preserveAspectRatio="none" style={{ display: 'block', height: 64 }}>
      <defs>
        <linearGradient id="spk" x1="0" x2="0" y1="0" y2="1">
          <stop offset="0" stopColor="var(--accent)" stopOpacity="0.22" />
          <stop offset="1" stopColor="var(--accent)" stopOpacity="0" />
        </linearGradient>
      </defs>
      <path d={area} fill="url(#spk)" />
      <path d={path} stroke="var(--accent)" strokeWidth="1.8" fill="none" strokeLinecap="round" strokeLinejoin="round" />
      <circle cx={W} cy={H - (points[points.length - 1] / max) * H} r="3" fill="var(--accent)" />
    </svg>
  );
}

window.HeroDashboard = HeroDashboard;