// Analytics screen — overview stats for the seller.

function AnalyticsScreen() {
  const stats = [
    { label: 'Profile views',      value: '2,341', change: '+12%' },
    { label: 'Product taps',       value: '847',   change: '+8%'  },
    { label: 'WhatsApp contacts',  value: '156',   change: '+23%' },
  ];

  return (
    <div style={{ height: '100%', display: 'flex', flexDirection: 'column', background: HUUL_TOKENS.color.bg }}>
      <div style={{ padding: '54px 16px 8px' }}>
        <div style={{ fontSize: 22, fontWeight: 700, letterSpacing: -0.5 }}>Analytics</div>
        <div style={{ fontSize: 13.5, color: HUUL_TOKENS.color.ink3, marginTop: 2 }}>Last 30 days</div>
      </div>

      <div style={{ flex: 1, overflow: 'auto', padding: '10px 16px 100px' }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginBottom: 20 }}>
          {stats.map(s => (
            <div key={s.label} style={{
              background: '#fff', borderRadius: 18, padding: '18px 18px',
              boxShadow: HUUL_TOKENS.shadow.card,
              display: 'flex', alignItems: 'center', justifyContent: 'space-between',
            }}>
              <div>
                <div style={{ fontSize: 13, color: HUUL_TOKENS.color.ink3, marginBottom: 4 }}>{s.label}</div>
                <div style={{ fontSize: 30, fontWeight: 700, letterSpacing: -1 }}>{s.value}</div>
              </div>
              <div style={{
                background: 'rgba(52,199,89,0.12)', color: HUUL_TOKENS.color.success,
                fontSize: 13, fontWeight: 600, padding: '5px 12px', borderRadius: 99,
              }}>{s.change}</div>
            </div>
          ))}
        </div>

        <div style={{
          background: '#fff', borderRadius: 18, padding: '32px 20px',
          textAlign: 'center', boxShadow: HUUL_TOKENS.shadow.card,
        }}>
          <div style={{ fontSize: 36, marginBottom: 10 }}>📊</div>
          <div style={{ fontSize: 15, fontWeight: 600, marginBottom: 4 }}>Charts coming soon</div>
          <div style={{ fontSize: 13.5, color: HUUL_TOKENS.color.ink3, lineHeight: 1.5 }}>
            Detailed charts and product-level insights will be available in the next update.
          </div>
        </div>
      </div>
    </div>
  );
}

window.AnalyticsScreen = AnalyticsScreen;